/* CSS Document */
/*
	Core CSS style For the site
*/

/* Generic */

html, body {
	height:100%;
	background-color:#F6F7F4;
}

body, div, th, p {
    font-family: -apple-system, Calibri, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    line-height: 1.5em;
}

.hidden-for-ada {
	position: fixed;
	top: -680px;
	left: -680px;
}

.content {
	padding:10px 3% 10px 3%;
}

.content.thinner {
	padding:6px 2% 6px 2%;
}

	h1 {
		font-size: 20px !important;
		color:#555;
		font-weight:bold;
		margin-top: 12px;
		margin-bottom: 8px;
	}
	
	h2 {
		font-size:18px;
		color:#505050;
		font-weight: 600;
		margin-top: 8px;
		margin-bottom: 4px;
	}
	
	h3 {
		font-size:14px;
		color:#666;
		font-weight: 600;
		margin-top: 4px;
		margin-bottom: 4px;
	}
	
.fixedControls {
	text-align:center;
	z-index: 99; position: fixed; bottom:36px; left: 50%; -webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);
}

.absoluteControls {
	text-align:center;
	z-index: 99; position: absolute; bottom:36px; left: 50%; -webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);
}

table {
	width:100%;
	border-collapse: collapse;
	font-size:13px;
	font-family: -apple-system, Calibri, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 400;
	color:#333;
}

	th {
		background-color:#F7F5EF;
		padding: 8px 5px;
		border: 1px solid #ddd;
		color:grey;
	}
	
	td {
		padding: 3px 5px;
		border-collapse:collapse;
	}
	
	table.bordered td {
		border:1px solid #ddd;
	}
	
	table.text-right th {
		text-align:right;
	}
	
	table.text-right td {
		text-align:right;
	}
	
	table.text-center th {
		text-align:center;
	}
	
	table.text-center td {
		text-align:center;
	}
	
	table.fat td {
		padding:6px 10px;
	}
	
	table.thin td {
		padding:1px 2px;
	}
	
	table.small td * {
		font-size: 96%;
	}
	
	table.altrow tr:nth-child(odd) {
		background-color:#f9f9f9;
	}
	
	table.altrow tr:nth-child(even) {
		background-color:#ffffff;
	}

	table.highlightedrow tr:hover {
		background-color: #eee !important;
		border-radius:3px;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

.vbase {
	vertical-align: baseline;
}

.vbottom {
	vertical-align: bottom;
}

.vcenter {
	vertical-align: middle;
}

.vtop {
	vertical-align: top;
}

table.vtop td, table.vtop th {
	vertical-align: top;
}

.left {
	float:left;
}

.right {
	float:right;
}

.clear {
	clear:both;
}

div.clear:after {
	content: '';
	clear:both;
	display:block;
}

label { font-weight: 400;}

.hovercontent {
	display:none;
}

.hovercontainer:hover .hovercontent {
	display:inherit !important;
}

.text-small {
	font-size:94%;
}

.text-xs {
	font-size:86%;
}

.text-large {
	font-size:110%;
}

.text-xlarge {
	font-size:125%;
}

/* Buttons */
button {
	margin: 3px;
}

.btn.btn-content-pencil:before {
	content: "\f040  ";
	font-family:"FontAwesome";
}

.btn.btn-content-config:before {
	content: "\f013  ";
	font-family:"FontAwesome";
}

.btn.btn-content-plus:before {
	content: "\f067  ";
	font-family:"FontAwesome";
}

.btn.btn-content-expand:before {
	content: "\f0fe  ";
	font-family:"FontAwesome";
}

.btn.btn-content-minus:before {
	content: "\f068  ";
	font-family:"FontAwesome";
}

.btn.btn-content-eye:before {
	content: "\f06e  ";
	font-family:"FontAwesome";
}

.btn.btn-content-fa-arrow-circle-right:before  {
	content: "\f0a9  ";
	font-family:"FontAwesome";
}

.btn.btn-content-play:before {
	content: "\f144  ";
	font-family:"FontAwesome";
}

.btn.concession-btn-stop:before {
	content: "\f28e  ";
	font-family:"FontAwesome";
}

.btn.btn-content-refresh:before  {
	content: "\f021  ";
	font-family:"FontAwesome";
}

.btn.btn-content-trash:before {
	content: "\f1f8  ";
	font-family:"FontAwesome";
}

.btn.btn-content-back:before {
	content: "\f190  ";
	font-family:"FontAwesome";
}

.btn.btn-content-eraser:before {
	content: "\f12d  ";
	font-family:"FontAwesome";
}

.btn.btn-content-sliders:before {
	content: "\f1de  ";
	font-family:"FontAwesome";
}

.btn.btn-content-file:before {
	content: "\f15b  ";
	font-family:"FontAwesome";
}

.btn.btn-content-toggle:before {
	content: "\f205  ";
	font-family:"FontAwesome";
}

.btn.btn-content-toggle-off:before {
	content: "\f204  ";
	font-family:"FontAwesome";
}

.btn.btn-content-send:before {
	content: "\f1d8  ";
	font-family:"FontAwesome";
}

.btn.btn-content-pdf:before {
	content: "\f1c1  ";
	font-family:"FontAwesome";
}

.btn.btn-content-envelop:before {
	content: "\f003  ";
	font-family:"FontAwesome";
}

.btn.btn-content-csv:before {
	content: "\f1c3  ";
	font-family:"FontAwesome";
}

.btn.btn-content-grid:before {
	content: "\f00a  ";
	font-family:"FontAwesome";
}

.btn.btn-content-history:before {
	content: "\f1da  ";
	font-family:"FontAwesome";
}

.btn.btn-content-check:before {
	content: "\f058  ";
	font-family:"FontAwesome";
}

.btn.btn-content-times:before {
	content: "\f057  ";
	font-family:"FontAwesome";
}

/* background icons*/
.bgicon {
	position:relative;
}

.bgicon.place-right:after {
	content: '';
	font-family:FontAwesome;
	top:50%;
	right:16px;
	position: absolute;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-khtml-transform: translateY(-50%);
	transform: translateY(-50%);
}

.bgicon.angleright:after {
	content:"\f105";
}

.bgicon.expand:after {
	content:"\f196";
}

/* */

hr {
	display: block;
	height: 1px; border: 0; 
	border-top: 1px solid #eee; 
	margin: 0.6em 0 0.4em 0; 
	padding: 0;
}

input:not([type=checkbox]):not([type=radio]), textarea {
	padding:8px 10px;
	border:1px solid #ddd;
	border-radius: 2px;
	width:99%;
	margin:3px;
}
	
	input.autosize {
		width:auto !important;
	}

	input:not([type=checkbox]):not([type=radio]).small {
		padding: 4px 5px;
	}
	
	
	label.fordate {
		position:relative;
	}
	
	label.fordate input {
		padding-left:28px !important;
	}
		label.fordate:before {
			content: "\f073";
			font-family: FontAwesome;
			position:absolute;
			left: 12px;
			top: 50%;
			color:#666;
			-moz-transform: translateY(-50%);
			-webkit-transform: translateY(-50%);
			-o-transform: translateY(-50%);
			-ms-transform: translateY(-50%);
			-khtml-transform: translateY(-50%);
			transform: translateY(-50%);
		}

label.sxx-input-date-styled {
	position: relative;
	display:inline-block;
}

	label.sxx-input-date-styled:before {
		position:absolute;
		left:8px;
		top:50%;
		-moz-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-khtml-transform: translateY(-50%);
		transform: translateY(-50%);
		
		content: "\f073";
		font-family:"FontAwesome";
		color:#8d8d8d;
		font-size: 11px;
	}

	label.sxx-input-date-styled input {
		padding-left:24px !important;
		width:124px !important;
	}
	
	label.sxx-input-date-styled input:focus {
		border: 1px solid #aaa;
	}

label.sxx-input-currency-styled {
	position: relative;
	display:inline-block;
}

	label.sxx-input-currency-styled:before {
		position:absolute;
		left:8px;
		top:50%;
		-moz-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-khtml-transform: translateY(-50%);
		transform: translateY(-50%);
		
		content: "\f155";
		font-family:"FontAwesome";
		color:#8d8d8d;
		font-size: 11px;
	}
	
	label.sxx-input-currency-styled input {
		padding-left:24px !important;
		width:124px !important;
	}
	
	label.sxx-input-currency-styled input:focus {
		border: 1px solid #aaa;
	}
	
label.sxx-input-percentage-styled {
	position: relative;
	display:inline-block;
}

	label.sxx-input-percentage-styled:before {
		position:absolute;
		right:8px;
		top:50%;
		-moz-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-khtml-transform: translateY(-50%);
		transform: translateY(-50%);
		
		content: "\f295";
		font-family:"FontAwesome";
		color:#8d8d8d;
		font-size: 10px;
	}
	
	label.sxx-input-percentage-styled input {
		padding-left:8px !important;
		width:124px !important;
	}
	
	label.sxx-input-percentage-styled input:focus {
		border: 1px solid #aaa;
	}
	
label.sxx-input-filter-styled {
	position: relative;
	display:inline-block;
}

	label.sxx-input-filter-styled:before {
		position:absolute;
		left:8px;
		top:50%;
		-moz-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-khtml-transform: translateY(-50%);
		transform: translateY(-50%);
		
		content: "\f0b0";
		font-family:"FontAwesome";
		color:#8d8d8d;
	}
	
	label.sxx-input-filter-styled input {
		padding-left:24px !important;
	}

label.sxx-input-search-styled {
	position: relative;
	display:inline-block;
}

	label.sxx-input-search-styled:before {
		position:absolute;
		left:8px;
		top:50%;
		-moz-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-khtml-transform: translateY(-50%);
		transform: translateY(-50%);
		
		content: "\f002";
		font-family:"FontAwesome";
		color:#8d8d8d;
	}
	
	label.sxx-input-search-styled input {
		padding-left:24px !important;
	}

	
.flat-inputs input:not([type=checkbox]):not([type=radio]), .flat-inputs textarea { 
	background: #f3f3f3;
    border: none !important;
}

.sxx-slider input {
    border: none !important;
    background-color: #fafafa !important;
}

/******/
.padding-x1 {
	padding: 2px 5px;
}

.padding-x2 {
	padding: 4px 8px;
}

.margin-x1 {
	margin: 4px;
}

.margin-x2 {
	margin: 8px;
}

.nomargin {
	margin:0px;
}

.nopadding {
	padding:0px;
}

.inline {
	display:inline-block;
}

.noscroll {
    overflow: hidden;
}

.overlay {
	top:0;
	left:0;
	background-color:rgba(0,0,0,0.3);
	width:100%;
	height:100%;
	position:absolute;
	z-index:199;
	/*charles Zhang 7/24/2017*/
	display:flex;
	justify-content: center;
	align-items: center;
	min-height: 60px;

}
/*
.overlay > .overlay-loading {
	margin-top:20%;
	margin-left:46%;
}
*/

/* style checkbox | works in mobile browser, Chrome for now*/
input[type="checkbox"] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    outline: none;
    -webkit-appearance: initial;
}

	input[type="checkbox"]:focus {
		outline: none;
	}
	
	input[type="checkbox"]:hover:before {
		content: "\f14a";
	}
	
	input[type="checkbox"]:focus:before {
		content: "\f0c8";
	}
	
	input[type="checkbox"]:checked:focus:before {
		content: "\f14a";
	}
	
	input[type="checkbox"]:before {
		content: "\f0c8";
		font-family: FontAwesome;
		font-size: 110%;
		color: grey;
		position:relative;
		vertical-align:middle;
		top:-2px;
		left:-1px;
	}
	
	input[type="checkbox"]:checked:before {
		content: "\f14a";
		font-family: FontAwesome;
		font-size: 110%;
		color: #00a800;
		background-color:white;
	}
/* end style checkbox */

select {
	padding: 8px 10px !important;
	border: 1px solid #ddd;
	margin:3px;
}
	select.small {
		padding: 4px 5px !important;
		font-size:95%;
	}

.imagewrapper img {
	max-width: 100%;
}

.imagewrapper.v img {
	max-width:none;
	max-height:100%;
}

.imagewrapper.hv img {
	max-width: 100%;
	max-height:100%;
}

.iwrapper {
	position:relative;
	border-top:1px solid #ddd;
	border-left:1px solid #ddd;
	border-right:1px solid #ddd;
	border-bottom:none;
	
}
	.iwrapper:first-child {
		border-radius: 3px 3px 0 0;
	}
	
	.iwrapper:last-child {
		border-bottom:1px solid #ddd;
		border-radius: 0 0 3px 3px;
	}
	
	.iwrapper input:not([type=checkbox]):not([type=radio]), .iwrapper textarea {
		border:none;
		margin:0;
	}

.footer {
	background-color:grey;
	font-size:90%;
	color:white;
	padding: 5px;
}

	.footer * {
		font-size:90%;
		color:#eee;
	}
	
	.footer a:hover {
		color:#eee;
		text-decoration:underline;
		cursor:pointer;
	}

li > a {
	display:block;
}

.banner {
	background-color: #86878C;
	padding: 20px 2%;
	font-weight: bold;
	color: #eee;
}

.banner0 {
	background-color:#86878C;
	padding:20px 2%;
	font-weight: bold;
	color: #fff;
}

.banner1 {
	background-color:#ededed;
	padding:20px 2%;
	font-weight: bold;
	color: #444;

}
.banner2 {
	background-color:#f6f6f6;
	padding:14px 2%;
}

.banner3 {
	background-color:#fcfcfc;
	padding:8px 2%;
}

.banner-controls {
	padding: 16px;
	background-color:#35404F;
}

.hot {
	cursor:pointer;
}
	
.hotter {
	cursor:pointer;
}
	.hotter:hover {
		box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
		opacity: 0.9;
	}

ul, ol {
	padding-left:16px;
}

.bordered {
	border: 1px solid #eee;
}

.onhover {
	padding:2px 5px;
	border-radius:3px;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
	
	.onhover:hover {
		background-color: #eee !important;
		box-shadow: 0 4px 4px 0 rgba(0,0,0,0.2);
	}

.whitespace-normal, .whitespace-normal pre{
	white-space: normal;
}

.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
		-moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* Internet Explorer/Edge */
			user-select: none; /* Non-prefixed version, currently
								supported by Chrome and Opera */
}


/*
circled numbers
*/
div.circle.number {
	width:20px;
	height:20px;
	display:inline-block;
	border-radius:40px;
	line-height:20px;
	text-align:center;
	font-size:94%;
	border-color:#eee;
}
	
/* Colors */
div.white:not(.bg), h1.white, b.white, p.white, span.white, .btn.white:before {
	color:white;
}
div.bg.white {
	background-color:white;
}

div.red:not(.bg), b.red, p.red, span.red, .btn.red:before {
	color:#f94d4d;
}
div.bg.red {
	background-color:#f94d4d;
	color:white;
}

/*lightgreen*/
div.lightgreen:not(.bg), b.lightgreen, p.lightgreen, span.lightgreen, .btn.lightgreen:before {
	color:#00e300;
}
div.bg.lightgreen {
	background-color:#00e300;
	color:white;
}

/*shadowgreen*/
div.shadowgreen:not(.bg), b.shadowgreen, p.shadowgreen, span.shadowgreen, .btn.shadowgreen:before {
	color:#3c763d;
}
div.bg.shadowgreen {
	color: #3c763d;
	background-color: #9cff9e;
}

/*green*/
div.green:not(.bg), b.green, p.green, span.green, .btn.green:before {
	color:green;
}
div.bg.green {
	background-color:#23b323;
	color:white;
}

/*light gray*/
div.lightgray:not(.bg), b.lightgray, p.lightgray, span.lightgray, .btn.lightgray:before, div.lightgray:not(.bg):after {
	color:#f6f6f6;
}
div.bg.lightgray {
	background-color:#f6f6f6;
}

/*shadow gray*/
div.shadowgray:not(.bg), b.shadowgray, p.shadowgray, span.shadowgray, .btn.shadowgray:before, div.shadowgray:not(.bg):after {
	color:#777;
}
div.bg.shadowgray {
	color: #777;
	background-color: #e4e4e4;
}

/*gold*/
div.gold:not(.bg), b.gold, p.gold, span.gold, .btn.gold:before, div.gold:not(.bg):after {
	color:gold;
}
div.bg.gold {
	background-color:gold;
}

/* lengends for numbers */
.number-lengend:after {
	content: '';
	display:inline-block;
	width:8px;
	height:8px;
	border-radius:16px;
	background-color:#ccc;
	margin-left: 4px;
	margin-right: 4px;
}

.number-lengend.green:after {
	background-color:#00CC00;
}

.number-lengend.red:after {
	background-color:#FF474A;
}



/* Text style classes */
.text-fade {
	color:#ccc;
}

.text-ucase {
	text-transform: uppercase;
}

/* header */
.header {
	position:fixed;
	width:100%;
	height:60px;
	border-bottom:1px solid #eee;
	z-index: 9;
    opacity: 1;
    background-color: white;
}

	.header:after {
		content: "";
		display: table;
		clear: both;
	}
	
	.header .rightcol:after {
		content: "";
		display: table;
		clear: both;
	}
	
	.header .rightcol {
		background-color:white;
	}
	
	.header .rightcol .content {
		float: left;
	}
	
	.header .rightcol .actionbar {
		float: right;
		height:100%;
	}

.branding {
	width: 100%;
	height: 100%;
	padding: 0px;
	background-color: #f3f3f3; /*#F4F1E6;*/
	text-align:center;
}

	.branding a {
		line-height:58px;
	}
	
	.branding img {
		width:90%;
		max-width:220px;
	}

.searchbar input {
	outline:none;
}

	.searchbar .content:before {
		content: '\f002';
		font-family: FontAwesome;
		color:#bbb;
		font-size: 16px;
	}
	
	.searchbar .content input {
		border:none;
		width:90%;
		height:38px;
		padding-left:10px;
		font-size:14px;
		color: grey;
	}

.actionbar ul {
	margin:0px;
}

	.actionbar ul:after {
		content: "";
		display: table;
		clear: both;
	}
	
	.actionbar ul > li {
		float: right;
		list-style: none;
		width:60px;
		text-align:center;
		line-height: 58px;
		height: 60px;
		border-left:1px solid #eee;
		color:grey;
		cursor:pointer;
		font-size:16px;
	}
	.actionbar ul > li.auto {
		width:auto;
	}
	
	.actionbar .btn-site-access-selector {
		padding-bottom:12px;
		padding-left:8px;
		padding-right:8px;
	}
	
	.actionbar .btn-site-access-selector:after {
		content: '  \f078';
		font-family:FontAwesome;
	}
	
	.actionbar .btn-site-access-selector.mobileonly:after {
		content: '  \f079';
		font-family:FontAwesome;
	}	
	
	.actionbar ul > li:hover {
		background-color:#eee;
	}
	
	.actionbar ul > li.highlight {
		background-color:#5ea6ef;
		color:white;
	}
	
	.actionbar ul > li.highlight:hover {
		background-color:#8cc5ff;
	}

/* page content */

.leftcol {
	float: left;
	width: 20%;
	height:100%;
}

.rightcol {
	float: right;
	width: 80%;	
	height:100%;
	position: relative;
}
.page-content {
	width: 100%;
	height:auto;
	min-height:100%;
	padding-top:60px;
	position:absolute;
	background-color: #F4F8F9;/*#F6F7F4;  #F4F8F9;*/
}

	.page-content:after {
		content: "";
		display: table;
		clear: both;
	}

	.page-content > .leftcol {
		background-color: #202e42;
		position:relative;
	}
	
	.sxx-mode-fullscreen .page-content > .leftcol {
		height: 0;
		position: absolute;
		right: 0;
		top: 60px;
		width: 360px;
	}
	
	.sxx-mode-fullscreen .page-content > .rightcol {
		width:100%;
	}
	
	.page-content-navigation ul li {
		list-style: none;
		text-align:left;
		color:white;
		cursor:pointer;
	}
	
	.page-content-dashboard {
		font-family: -apple-system, Calibri, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:13px; font-weight:400; color: #333333;
	}

	.page-content-navigation-footer {
		position: fixed;
		bottom: 0px;
		left: 0;
		height: 40px;
		line-height: 40px;
		background-color: rgba(246,247,244, 0.2);
		width: 100%;
		color: white;
		padding: 0px;
	}
		.page-content-navigation-footer .nav-bar-item {
			padding: 0 16px;
		}
/* Legends */
.legend {
	display:inline-block;
	height:24px;
	margin: 2px 16px 2px 0;
	font-weight: bold;
	white-space: nowrap;
}

	.legend-color {
		display: inline-block;
		width:24px;
		height:24px;
		border-radius:3px;
		vertical-align:middle;
	}
/* List Box*/
ul.listbox {
	list-style:none;
	margin:0;
	padding:0;
}
/*
ul.listbox.full {
}
*/
ul.listbox:after {
	content: '';
	clear:both;
	display:block;
}

ul.listbox li {
	float: left;
	width: 32%;
	min-height: 156px;
	background-color:white;
	margin-right:1%;
	margin-top:8px;
	margin-bottom:4px;
	position:relative;
	border: 1px solid #eee;
}

ul.listbox.full li {
	width: 100%;
	height:auto;
	min-height:100px;
}

ul.listbox .listbox-content {
	height:98%;
	overflow:hidden;
	padding:10px 3% 40px 3%;
}

ul.listbox .listbox-footer {
	position:absolute;
	bottom: 0px;
	right:0px;
	width:100%;
	padding:4px;
}

.sep-line-vertical {
	display:inline-block;
	border-right:1px solid #ddd;
	margin-left:8px;
	margin-right:8px;
	width:1px;
	height:100%;
}

@media only screen and (max-width: 1080px) {
	ul.listbox li {
		width: 48%;
		margin-right:1%;
	}
}

@media only screen and (max-width: 600px) {
	ul.listbox li {
		width: 99%;
		margin-right:1%;
		height:auto;
	}
}

ul.listbox li > .listbox-item-hovermask {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;

    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    background-color: rgba(219, 124, 0, 0.7);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

ul.listbox li:hover > .listbox-item-hovermask {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

ul.listbox li > .listbox-item-hovermask p {
	-webkit-transform: translateY(100px);
	-moz-transform: translateY(100px);
	-o-transform: translateY(100px);
	-ms-transform: translateY(100px);
	transform: translateY(100px);
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
	transition-delay: 0s;
	
	font-size:12px;
	padding:30px 20px 20px;
	text-align:center;
	color:white;

}

ul.listbox li:hover > .listbox-item-hovermask p {
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    -ms-transition-delay: 0.1s;
    transition-delay: 0.1s;
	
	filter: alpha(opacity=100);
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-o-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);

}

/* Stats Box*/
ul.statslist {
	list-style:none;
	margin:0;
	padding:0;
}

/*
ul.statslist.full {
}
*/

ul.statslist:after {
	content: '';
	clear:both;
	display:block;
}

ul.statslist li {
	float: left;
	width: 32%;
	margin-right:1%;
	margin-bottom:10px;
	position:relative;
	border-right: 1px solid #eee;
}

ul.statslist li:last-child {
	border-right:none;
}

ul.statslist.full li {
	width: 100%;
	height:auto;
	min-height:100px;
}

ul.statslist .statslist-title {
	font-size: 13px;
	font-weight: 400;	
	text-align:center;
	color:#888;
	text-transform:uppercase;
	padding:8px 0 0 0;
}

ul.statslist .statslist-content {
	font-size: 24px;
	font-weight: 100;
	color:#555;
	text-align:center;
}

@media only screen and (max-width: 1080px) {
	ul.statslist li {
		width: 48%;
		margin-right:1%;
	}
	
	ul.statslist li:nth-child(even) {
		border-right:none;
	}
	
	ul.statslist li:nth-child(odd) {
		border-right:1px solid #eee;
	}
}

@media only screen and (max-width: 600px) {
	ul.statslist li {
		width: 99%;
		margin-right:1%;
		height:auto;
		border-bottom: 1px solid #eee;
	}
	
	ul.statslist li:nth-child(even) {
		border-right:none;
	}
	
	ul.statslist li:nth-child(odd) {
		border-right:none;
	}
}

ul.statslist li > .statslist-item-hovermask {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;

    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    background-color: rgba(219, 124, 0, 0.7);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

ul.statslist li:hover > .statslist-item-hovermask {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

ul.statslist li > .statslist-item-hovermask p {
	-webkit-transform: translateY(100px);
	-moz-transform: translateY(100px);
	-o-transform: translateY(100px);
	-ms-transform: translateY(100px);
	transform: translateY(100px);
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
	transition-delay: 0s;
	
	font-size:13px;
	padding:20px 20px 20px;
	text-align:center;
	color:white;

}

ul.statslist li:hover > .statslist-item-hovermask p {
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    -ms-transition-delay: 0.1s;
    transition-delay: 0.1s;
	
	filter: alpha(opacity=100);
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-o-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);

}

/* Responsive */
.mobileonly {
	display:none;
}

@media only screen and (max-width: 1080px) {
	
	.header .rightcol .searchbar {
		width:100% !important;
	}
	
	.actionbar ul:before {
		content: "\f054";
		display: block;
		top: 50%;
		left: 50%;
		position: absolute;
		font:normal normal normal 14px/1 FontAwesome;
		
		-moz-transform: translate(-50%,-50%) rotate(0deg);
		-webkit-transform: translate(-50%,-50%) rotate(0deg);
		-o-transform: translate(-50%,-50%) rotate(0deg);
		-ms-transform: translate(-50%,-50%) rotate(0deg);
		-khtml-transform: translate(-50%,-50%) rotate(0deg);
		transform: translate(-50%,-50%) rotate(0deg);
		
		transition: all 1s ease;
		-moz-transition: all 1s ease;
		-webkit-transition: all 1s ease;
		-o-transition: all 1s ease;
		-ms-transition: all 1s ease;
		-khtml-transition: all 1s ease;
	}
	
	.actionbar ul {
		padding-top:59px;
		max-height: 59px;
		background-color: #fcfcfc;
		overflow:hidden;
		-webkit-transition: max-height 0.8s ease-out;
		-moz-transition: max-height 0.8s ease-out;
		-o-transition: max-height 0.8s ease-out;
		transition: max-height 0.8s ease-out;
		cursor:pointer;
	}
	
	.actionbar ul.mobileexpanded {
		max-height:500px;
		-webkit-transition: max-height 0.8s ease-out;
		-moz-transition: max-height 0.8s ease-out;
		-o-transition: max-height 0.8s ease-out;
		transition: max-height 0.8s ease-out;
	}
	
	.actionbar ul.mobileexpanded:before {
		content: "\f054";
		
		-moz-transform: translate(-50%,-50%) rotate(90deg);
		-webkit-transform: translate(-50%,-50%) rotate(90deg);
		-o-transform: translate(-50%,-50%) rotate(90deg);
		-ms-transform: translate(-50%,-50%) rotate(90deg);
		-khtml-transform: translate(-50%,-50%) rotate(90deg);
		transform: translate(-50%,-50%) rotate(90deg);
		transition: all 0.6s ease;
		-moz-transition: all 0.6s ease;
		-webkit-transition: all 0.6s ease;
		-o-transition: all 0.6s ease;
		-ms-transition: all 0.6s ease;
		-khtml-transition: all 0.6s ease;
	}
	
	.header .rightcol .actionbar {
		position: absolute !important;
		top:0px !important;
		right:0px !important;
		width:60px !important;
	}
	
	.header > .rightcol > .content {
		display: inherit !important;
	}
	
	/*
    .page-content .leftcol, .leftcol {
        display:none;
    }
	*/
	.header .leftcol {
		display:none;
	}
	
	
	.page-content .leftcol {
		width:100%;
		z-index:9;
	}	
	
	.leftcol, .rightcol {
		width:100% !important;
	}
	
	.desktoponly {
		display:none;
	}
	
	.mobileonly {
		display:inherit;
	}

	table.mobile-friendly {
		border: none;
	}

	table.mobile-friendly,
	table.mobile-friendly tbody,
	table.mobile-friendly tr:not(.desktoponly),
	table.mobile-friendly td:not(.desktoponly) {
		display: block;
	}

	table.mobile-friendly thead {
		display: none;
	}

	table.mobile-friendly td {
		border: none;
	}

	table.mobile-friendly tr {
		padding: 12px;
		background-color: #fff !important;
		box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
		border-radius: 3px;
		overflow: hidden;
	}

	table.mobile-friendly tr + tr {
		margin-top: 1rem;
	}

	table.mobile-friendly td::before {
		content: attr(data-label)": ";
		font-weight: 800;
	}
}

@media only screen and (max-width: 960px) {
	.header > .rightcol > .content {
		display: none;
	}
}

@media only screen and (min-width: 1400px) {
	.leftcol {
		width: 16%;
	}
	
	.rightcol {
		width: 84%;	
	}
}

@media only screen and (min-width: 1800px) {
	.leftcol {
		width: 12%;
	}
	
	.rightcol {
		width: 88%;	
	}
}