/* my-02.css
 (until I come up with a better name)

Based upon W3.CSS 4.04, bootstrap 4beta, kube 6.5.2, and other frameworks
*/

html {
	box-sizing:border-box }

*, *:before, *:after {
	box-sizing:inherit }


/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html {
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100% }

body {
	margin:0 }

article, aside, details, figcaption, figure, footer, 
header, main, menu, nav, section, summary {
	display:block }

audio, canvas, progress, video {
	display:inline-block }

progress {
	vertical-align:baseline }

audio:not([controls]) {
	display:none;
	height:0 }

[hidden], template {
	display:none }

a {
	background-color:transparent;
	-webkit-text-decoration-skip:objects }

a:active, a:hover {
	outline-width:0 }

abbr[title] {
	border-bottom:none;
	text-decoration:underline;
	text-decoration:underline dotted }

dfn {
	font-style:italic }

mark {
	background:#ff0;
	color:#000 }

small { font-size:80% }

sub, sup {
	font-size:75%;
	line-height:0;
	position:relative;
	vertical-align:baseline }

sub {	bottom:-0.25em }

sup {	top:-0.5em }

figure {	margin:1em 40px }

img {	border-style:none }

svg:not(:root) { overflow:hidden }

code, kbd, pre, samp {
	font-family:monospace, monospace;
	font-size:1em }

hr {
	box-sizing:content-box;
	height:0;
	overflow:visible }

button, input, select, textarea {
	font:inherit;
	margin:0 }

optgroup { font-weight:bold }

button, input { overflow:visible }

button, select { text-transform:none }

button, html [type=button], 
[type=reset], [type=submit] {
	-webkit-appearance:button }

button::-moz-focus-inner,  [type=button]::-moz-focus-inner,  
[type=reset]::-moz-focus-inner,  [type=submit]::-moz-focus-inner {
	border-style:none;
	padding:0 }

button:-moz-focusring,  [type=button]:-moz-focusring,  
[type=reset]:-moz-focusring,  [type=submit]:-moz-focusring {
	outline:1px dotted ButtonText }

fieldset {
	border:1px solid #c0c0c0;
	margin:0 2px;
	padding:.35em .625em .75em }

legend {
	color:inherit;
	display:table;
	max-width:100%;
	padding:0;
	white-space:normal }

textarea {
	overflow:auto }

[type=checkbox], [type=radio] {
	padding:0 }

[type=number]::-webkit-inner-spin-button, 
[type=number]::-webkit-outer-spin-button {
	height:auto }

[type=search] {
	-webkit-appearance:textfield;
	outline-offset:-2px }

[type=search]::-webkit-search-cancel-button, 
[type=search]::-webkit-search-decoration {
	-webkit-appearance:none }

::-webkit-input-placeholder {
	color:inherit;
	opacity:0.54 }

::-webkit-file-upload-button {
	-webkit-appearance:button;
	font:inherit }
/* End extract ============================================================= */


html { overflow-x:hidden }

html, body {
	-webkit-font-smoothing:antialiased; /*from primitive*/
	-moz-osx-font-smoothing:grayscale; /*from primitive*/
	font-family:"helvetica neue", helvetica, arial, sans-serif; /*w3=verdana*/
	font-size:1rem; /*defaults=16px=1em=1rem, w3=15px*/
	line-height:1.375 /*22px, w3=1.5=24px, primitive=1.6=25.6px*/
}

body { /*from primitive*/
	color:#444;  /* shades: 666,585858,555,484848,444,383838,333,282828,222,181818,111,080808,000 */
	background:#fff;
	font-size: 100%} /*w3schools.com/css/css_font.asp*/

h1, h2, h3, h4, h5, h6 { 
	/* font-family:"Segoe UI", sans-serif; */
	font-weight:600; /* w3=400=normal, 700=bold*/
	line-height:1.25; /*20px*/
	margin:0.625rem 0 } /*10px, w3=10px*/
	
/*from primitive*/
h1 { font-size: 2.0rem }
h2 { font-size: 1.75rem }
h3 { font-size: 1.50rem }
h4 { font-size: 1.25rem }
h5 { font-size: 1.125rem }
h6 { font-size: 1rem }

@media (min-width:601px){
	h1 { font-size:2.5rem } /*40px, w3=36px*/
	h2 { font-size:2.0rem } /*32px, w3=30px*/
	h3 { font-size:1.75rem } /*28px, w3=24px*/
	h4 { font-size:1.50rem } /*24px, w3=20px*/
	h5 { font-size:1.25rem } /*20px, w3=18px*/
	h6 { font-size:1rem } /*16px, w3=16px*/
}

/* Font - Text */
.serif {	font-family:georgia, serif } /* "roboto slab" */
.mono-sans { font-family:lucida console, monospace }
.mono-serif { font-family:"courier new" serif-monospace }

.line-h085 { line-height:0.85 }
.line-h100 { line-height:1.00 }
.line-h125 { line-height:1.25 }

.tiny     {	font-size:10px!important } /* Need to change to rem. See my.css */
.small    {	font-size:12px!important }
.medium   {	font-size:16px!important }
.large    {	font-size:18px!important }
.xlarge   {	font-size:24px!important }
.xxlarge  {	font-size:36px!important }
.xxxlarge {	font-size:48px!important }
.jumbo    { font-size:64px!important }

.fs64 {	font-size:64px !important }
.fs54 {	font-size:54px !important }
.fs48 {	font-size:48px !important }
.fs42 {	font-size:42px !important }
.fs40 {	font-size:40px !important }
.fs38 {	font-size:38px !important }
.fs36 {	font-size:36px !important }
.fs34 {	font-size:34px !important }
.fs32 {	font-size:32px !important }
.fs30 {	font-size:30px !important }
.fs28 {	font-size:28px !important }
.fs26 {	font-size:26px !important }
.fs24 {	font-size:24px !important }
.fs22 {	font-size:22px !important }
.fs20 {	font-size:20px !important }
.fs19 {	font-size:19px !important }
.fs18 {	font-size:18px !important }
.fs17 {	font-size:17px !important }
.fs16 {	font-size:16px !important }
.fs15 {	font-size:15px !important }
.fs14 {	font-size:14px !important }
.fs13 {	font-size:13px !important }
.fs12 {	font-size:12px !important }
.fs11 {	font-size:11px !important }
.fs10 {	font-size:10px !important }
.fs9  { font-size:9px !important }
.fs8  {	font-size:8px !important }


































/* Text styles */
.bold { font-weight: bold; }
.italic { font-style: italic; }
.ltr-spc-wide { letter-spacing:4px }/*w3=.wide*/

.txt-left, .left-align {
	text-align:left }

.txt-right, .right-align {
	text-align:right }

.justify {
	text-align:justify!important }

.center, .txt-center {
	text-align:center!important }

.txt-shadow {
	text-shadow: 1px 2px 0 #aaa }

hr {
	border:0;
	border-top:1px solid #c3c3c3;
	margin:16px 0 4px 0 }

img {	margin-bottom:-5px }

a { color:inherit }

/* Tables */
.table, .table-all {
	border-collapse:collapse;
	border-spacing:0;
	width:100%;
	display:table }

.table-all {
	border:1px solid #ccc }

.bordered tr, .table-all tr {
	border-bottom:1px solid #ddd }

.striped tbody tr:nth-child(even) {
	background-color:#f1f1f1 }

.table-all tr:nth-child(odd) {
	background-color:#fff }

.table-all tr:nth-child(even) {
	background-color:#f1f1f1 }

.hoverable tbody tr:hover, .ul.hoverable li:hover {
	background-color:#ccc }

.centered tr th, .centered tr td {
	text-align:center }

.table td, .table th, 
.table-all td, .table-all th {
	padding:8px 8px;
	display:table-cell;
	text-align:left;
	vertical-align:top }

.table th:first-child, 
.table td:first-child, 
.table-all th:first-child, 
.table-all td:first-child {
	padding-left:16px }

.responsive {
	overflow-x:auto }


/* Buttons */
.btn, .button {
	border:none;
	display:inline-block;
	outline:0;
	padding:8px 16px;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	color:inherit;
	background-color:inherit;
	text-align:center;
	cursor:pointer;
	white-space:nowrap }

.btn, .button {
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none }

.button:hover {
	color:#000!important;
	background-color:#ccc!important }

.btn:hover {
	box-shadow:0 8px 16px 0 rgba(0, 0, 0, 0.2), 
		0 6px 20px 0 rgba(0, 0, 0, 0.19) }

.transparent, .hover-none:hover {
	background-color:transparent!important }

.hover-none:hover {
	box-shadow:none!important }
	
.disabled, 
.btn:disabled, 
.button:disabled {
	cursor:not-allowed;
	opacity:0.3 }

.disabled *, :disabled * {
	pointer-events:none }

.btn.disabled:hover, 
.btn:disabled:hover {
	box-shadow:none }

.ripple:active { opacity:0.5 }

.ripple { transition:opacity 0s }

/* Lists */
.ul {
	list-style-type:none;
	padding:0;
	margin:0 }

.ul li {
	padding:8px 16px;
	border-bottom:1px solid #ddd }

.ul li:last-child {
	border-bottom:none }


/* Forms-Input */
.input {
	padding:8px;
	display:block;
	border:none;
	border-bottom:1px solid #ccc;
	width:100% }

.select {
	padding:9px 0;
	width:100%;
	border:none;
	border-bottom:1px solid #ccc }

.check, .radio {
	width:24px;
	height:24px;
	position:relative;
	top:6px }

.animate-input {
	transition:width 0.4s ease-in-out }

.animate-input:focus {
	width:100%!important }


/* Dropdown Class */
.dropdown-click, 
.dropdown-hover {
	position:relative;
	display:inline-block;
	cursor:pointer }

.dropdown-hover:hover 
.dropdown-content {
	display:block;
	z-index:1 }

.dropdown-hover:first-child, 
.dropdown-click:hover {
	background-color:#ccc;
	color:#000 }

.dropdown-hover:hover > .button:first-child, 
.dropdown-click:hover > .button:first-child {
	background-color:#ccc;
	color:#000 }

.dropdown-content {
	cursor:auto;
	color:#000;
	background-color:#fff;
	display:none;
	position:absolute;
	min-width:160px;
	margin:0;
	padding:0 }


/* Bar & Bar-Block Container */
.bar-block .dropdown-hover, 
.bar-block .dropdown-click {
	width:100% }

.bar-block .dropdown-hover .dropdown-content, 
.bar-block .dropdown-click .dropdown-content {
	min-width:100% }

.bar-block .dropdown-hover .button, 
.bar-block .dropdown-click .button {
	width:100%;
	text-align:left;
	padding:8px 16px }

.bar {
	width:100%;
	overflow:hidden }

.center .bar {
	display:inline-block;
	width:auto }

.bar .bar-item {
	padding:8px 16px;
	float:left;
	width:auto;
	border:none;
	outline:none;
	display:block }
/* I added. Need to delete if nothing affected. (didn't work)  .bar-item { padding:8px 8px; } */
.bar .dropdown-hover, 
.bar .dropdown-click {
	position:static;
	float:left }

.bar .button {
	white-space:normal }

.bar-block .bar-item {
	width:100%;
	display:block;
	padding:8px 16px;
	text-align:left;
	border:none;
	outline:none;
	white-space:normal;
	float:none }

.bar-block.center .bar-item {
	text-align:center }

.sidebar {
	height:100%;
	width:200px;
	background-color:#fff;
	position:fixed!important;
	z-index:1;
	overflow:auto }

.main, #main {  /*used with sidebar & collapse*/
	transition:margin-left .4s }


/* Containers */
.badge, .tag {
	background-color:#000;
	color:#fff;
	display:inline-block;
	padding-left:8px;
	padding-right:8px;
	text-align:center }

.badge {
	border-radius:50% }

.card, .card-2 {
	box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.16), 
		0 2px 10px 0 rgba(0, 0, 0, 0.12) }

.card-4, .hover-shadow:hover {
	box-shadow:0 4px 10px 0 rgba(0, 0, 0, 0.2), 
		0 4px 20px 0 rgba(0, 0, 0, 0.19) }

.code {
	margin-top:16px;
	margin-bottom:16px }

.code, .codespan {
	font-family:Consolas, "courier new";
	font-size:16px }

.code {
	width:auto;
	background-color:#fff;
	padding:8px 12px;
	border-left:4px solid #4CAF50;
	word-wrap:break-word }

.codespan {
	color:crimson;
	background-color:#f1f1f1;
	padding-left:4px;
	padding-right:4px;
	font-size:110% }

.container {
	padding:0.01em 8px }

.panel {
	padding:0.01em 16px }

.panel, .section {
	margin-top:16px;
	margin-bottom:16px }

.container:after, .container:before, 
.panel:after, .panel:before, 
.row:after, .row:before, 
.row-padding:after, .row-padding:before, 
.cell-row:before, .cell-row:after, 
.clear:after, .clear:before, 
.bar:before, .bar:after {
	content:"";
	display:table;
	clear:both }


/*Responsive Classes */
/* also part of: row, hide-small, hide-medium, hide-large, mobile */
.row-padding, 
.row-padding>.half, 
.row-padding>.third, 
.row-padding>.twothird, 
.row-padding>.threequarter, 
.row-padding>.quarter, 
.row-padding>.col {
	padding:0 8px }

.col, .half, .third, 
.twothird, .threequarter, .quarter {
	float:left;
	width:100% }

.col.s1 { width:8.33333% }
.col.s2 { width:16.66666% }
.col.s3 { width:24.99999% }
.col.s4 { width:33.33333% }
.col.s5 { width:41.66666% }
.col.s6 { width:49.99999% }
.col.s7 { width:58.33333% }
.col.s8 { width:66.66666% }
.col.s9 { width:74.99999% }
.col.s10 { width:83.33333% }
.col.s11 { width:91.66666% }
.col.s12 { width:99.99999% }

@media (min-width:601px) {
	.col.m1 { width:8.33333% }
	.col.m2 { width:16.66666% }
	.col.m3, .quarter { width:24.99999% }
	.col.m4, .third { width:33.33333% }
	.col.m5 { width:41.66666% }
	.col.m6, .half { width:49.99999% }
	.col.m7 { width:58.33333% }
	.col.m8, .twothird { width:66.66666% }
	.col.m9, .threequarter { width:74.99999% }
	.col.m10 { width:83.33333% }
	.col.m11 { width:91.66666% }
	.col.m12 { width:99.99999% }
}

@media (min-width:993px) {
	.col.l1 { width:8.33333% }
	.col.l2 { width:16.66666% }
	.col.l3 { width:24.99999% }
	.col.l4 { width:33.33333% }
	.col.l5 { width:41.66666% }
	.col.l6 { width:49.99999% }
	.col.l7 { width:58.33333% }
	.col.l8 { width:66.66666% }
	.col.l9 { width:74.99999% }
	.col.l10 { width:83.33333% }
	.col.l11 { width:91.66666% }
	.col.l12 { width:99.99999% }
}

.content {
	max-width:980px;
	margin:auto }

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

.rest {
	overflow:hidden }


/* Layout Classes */
.cell-row {
	display:table;
	width:100% }

.cell {
	display:table-cell }

.cell-top {
	vertical-align:top }

.cell-middle {
	vertical-align:middle }

.cell-bottom {
	vertical-align:bottom }


/* Modal Class */
.modal {
	z-index:3;
	display:none;
	padding-top:100px;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	overflow:auto;
	background-color:rgb(0, 0, 0);
	background-color:rgba(0, 0, 0, 0.4) }

.modal-content {
	margin:auto;
	background-color:#fff;
	position:relative;
	padding:0;
	outline:0;
	width:600px }

.tooltip {
	position:relative }

.tooltip .text {
	display:none }

.tooltip:hover .text {
	display:inline-block }

@media (max-width:600px) {
	.modal-content {
		margin:0 10px;
		width:auto!important }
	.modal {
		padding-top:30px }
	.dropdown-hover.mobile .dropdown-content, 
	.dropdown-click.mobile .dropdown-content {
		position:relative }
	.hide-small {
		display:none!important }
	.mobile {
		display:block;
		width:100%!important }
	.bar-item.mobile, 
	.dropdown-hover.mobile, 
	.dropdown-click.mobile {
		text-align:center }
	.dropdown-hover.mobile, 
	.dropdown-hover.mobile .btn, 
	.dropdown-hover.mobile .button, 
	.dropdown-click.mobile, 
	.dropdown-click.mobile .btn, 
	.dropdown-click.mobile .button {
		width:100% }
}

@media (max-width:768px) {
	.modal-content {
		width:500px }
	.modal {
		padding-top:50px }
}

@media (min-width:993px) {
	.modal-content {
		width:900px }
	.hide-large {
		display:none!important }
	.sidebar.collapse {
		display:block!important }
}

@media (max-width:992px) and (min-width:601px) {
	.hide-medium {
		display:none!important }
}

@media (max-width:992px) {
	.sidebar.collapse {
		display:none }
	.main {
		margin-left:0!important;
		margin-right:0!important }
}


/* Content Display & Positioning */
.left {
	float:left!important }

.right {
	float:right!important }

.block {
	display:block;
	width:100% }

.hide {
	display:none!important }

.show-block, .show {
	display:block!important }

.show-inline-block {
	display:inline-block!important }

.top, .bottom {
	position:fixed;
	width:100%;
	z-index:1 }

.top {
	top:0 }

.bottom {
	bottom:0 }

	/* Display Container Class */
.display-container {
	position:relative }

.display-topleft {
	position:absolute;
	left:0;
	top:0 }

.display-topright {
	position:absolute;
	right:0;
	top:0 }

.display-bottomleft {
	position:absolute;
	left:0;
	bottom:0 }

.display-bottomright {
	position:absolute;
	right:0;
	bottom:0 }

.display-middle {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%) }

.display-left {
	position:absolute;
	top:50%;
	left:0%;
	transform:translate(0%, -50%);
	-ms-transform:translate(-0%, -50%) }

.display-right {
	position:absolute;
	top:50%;
	right:0%;
	transform:translate(0%, -50%);
	-ms-transform:translate(0%, -50%) }

.display-topmiddle {
	position:absolute;
	left:50%;
	top:0;
	transform:translate(-50%, 0%);
	-ms-transform:translate(-50%, 0%) }

.display-bottommiddle {
	position:absolute;
	left:50%;
	bottom:0;
	transform:translate(-50%, 0%);
	-ms-transform:translate(-50%, 0%) }

.display-container:hover .display-hover {
	display:block }

.display-container:hover span.display-hover {
	display:inline-block }

.display-hover {	display:none }

.display-position {	position:absolute }


/* Animation-Transforms */
.spin {
	animation:w3-spin 2s infinite linear }

@keyframes w3-spin {
	0% { transform:rotate(0deg) }
	100% { transform:rotate(359deg) }
}

.animate-fading {
	animation:fading 10s infinite }

@keyframes fading {
	0% { opacity:0 }
	50% { opacity:1 }
	100% { opacity:0 }
 }

.animate-opacity {
	animation:opac 0.8s }

@keyframes opac {
	from { opacity:0 }
	to { opacity:1 }
 }

.animate-top {
	position:relative;
	animation:animatetop 0.4s }

@keyframes animatetop {
	from { 
		top:-300px;
		opacity:0 }
	to {
		top:0;
		opacity:1 }
}

.animate-left {
	position:relative;
	animation:animateleft 0.4s }

@keyframes animateleft {
	from {
		left:-300px;
		opacity:0 }
	to {
		left:0;
		opacity:1 }
}

.animate-right {
	position:relative;
	animation:animateright 0.4s }

@keyframes animateright {
	from {
		right:-300px;
		opacity:0 }
	to {
		right:0;
		opacity:1 }
}

.animate-bottom {
	position:relative;
	animation:animatebottom 0.4s }

@keyframes animatebottom {
	from {
		bottom:-300px;
		opacity:0 }
	to {
		bottom:0;
		opacity:1 }
}

.animate-zoom  {	animation:animatezoom 0.6s }

@keyframes animatezoom {
	from { transform:scale(0) }
	to { transform:scale(1) }
}


/* Borders */
.border-0    {	border:0!important }
.border      {	border:1px solid #ccc !important }
.border-top  {	border-top:1px solid #ccc !important }
.border-bottom {	border-bottom:1px solid #ccc !important }
.border-left   {	border-left:1px solid #ccc !important }
.border-right  {	border-right:1px solid #ccc !important }
.topbar      {	border-top:6px solid #ccc !important }
.bottombar   {	border-bottom:6px solid #ccc !important }
.leftbar     {	border-left:6px solid #ccc !important }
.rightbar    {	border-right:6px solid #ccc !important }
.circle      {	border-radius:50% }
.round-small {	border-radius:2px }
.round, .round-medium {	border-radius:4px }
.round-large   {	border-radius:8px }
.round-xlarge  {	border-radius:16px }
.round-xxlarge {	border-radius:32px }


/* Margins */
.mgn0, .no-margin {	margin:0; }
.mgn0-t {	margin-top:0; }
.mgn0-b {	margin-bottom:0 }
.mgn0-l {	margin-left:0; }
.mgn0-r {	margin-right:0; }
.mgn0-tb  {	margin-top:0;	margin-bottom:0; }
.mgn0-lr  {	margin-left:0;	margin-right:0; }
.mgn4-tb  {	margin-top:4px;	margin-bottom:4px; }
.mgn4-b   {	margin-top:0;	margin-bottom:4px; }
.mgn8-b   {	margin-bottom:8px; }
.mgn16    {	margin:16px; }
.mgn16-t  {	margin-top:16px; }
.mgn16-b  {	margin-bottom:16px; }
.mgn16-l  {	margin-left:16px; }
.mgn16-r  {	margin-right:16px; }
.mgn-auto {	margin:auto; }


/* Padding */
.pad0, .no-padding      {	padding:0; }
.pad0-t, .no-pad-top    {	padding-top:0; }
.pad0-b, .no-pad-bottom {	padding-bottom:0 }
.pad0-l, .no-pad-left   {	padding-left:0 }
.pad0-r, .no-pad-right  {	padding-right:0 }
.pad0-tb {	padding-top:0!important;	padding-bottom:0!important; }
.pad0-lr {	padding-left:0;	padding-right:0; }
.pad1-tb {	padding-top:1px !important;	padding-bottom:1px !important; }
.pad4-t  {	padding-top:4px; }
.pad4-b  {	padding-bottom:4px; }
.pad4-tb {	padding-top:4px;	padding-bottom:4px; }
.pad8    {	padding:8px; }
.pad8-t  {	padding-top:8px; }
.pad8-b  {	padding-bottom:8px; }
.pad8-l  {	padding-left:8px; }
.pad8-r  {	padding-right:8px; }
.pad8-tb {	padding-top:8px;	padding-bottom:8px; }
.pad8-lr {	padding-left:8px;	padding-right:8px; }
.pad16   {	padding:16px; }
.pad16-t {	padding-top:16px; }
.pad16-b {	padding-bottom:16px; }
.pad16-l {	padding-left:16px; }
.pad16-r {	padding-right:16px; }
.pad16-tb, .padding-16 {	padding-top:16px;	padding-bottom:16px; }
.pad16-lr              {	padding-left:16px;	padding-right:16px; }
.pad24-tb, .padding-24 {	padding-top:24px;	padding-bottom:24px; }
.pad32-tb, .padding-32 {	padding-top:32px;	padding-bottom:32px; }
.pad48-tb, .padding-48 {	padding-top:48px;	padding-bottom:48px; }
.pad64-tb, .padding-64 {	padding-top:64px;	padding-bottom:64px; }

.padding-small {	padding:4px 8px; }
.padding       {	padding:8px 16px; }
.padding-large {	padding:12px 24px; }


/* Effects Class. Opacity, Grayscale, Sepia & Overlay */
.opacity, .hover-opacity:hover {
	opacity:0.60 }

.opacity-off, .hover-opacity-off:hover {
	opacity:1 }

.opacity-max {
	opacity:0.25 }

.opacity-min {
	opacity:0.75 }

.greyscale-max, .hover-greyscale:hover, 
.grayscale-max, .hover-grayscale:hover {
	filter:grayscale(100%) }

.greyscale, .grayscale {
	filter:grayscale(75%) }

.greyscale-min, .grayscale-min {
	filter:grayscale(50%) }

.sepia {
	filter:sepia(75%) }

.sepia-max, .hover-sepia:hover {
	filter:sepia(100%) }

.sepia-min {
	filter:sepia(50%) }

.overlay {
	position:fixed;
	display:none;
	width:100%;
	height:100%;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:rgba(0, 0, 0, 0.5);
	z-index:2 }


/* Colors */
.amber, .hover-amber:hover {
	color:#000!important;
	background-color:#ffc107!important }

.aqua, .hover-aqua:hover {
	color:#000!important;
	background-color:#00ffff!important }

.blue, .hover-blue:hover {
	color:#fff!important;
	background-color:#2196F3!important }

.light-blue, .hover-light-blue:hover {
	color:#000!important;
	background-color:#87CEEB!important }

.brown, .hover-brown:hover {
	color:#fff!important;
	background-color:#795548!important }

.cyan, .hover-cyan:hover {
	color:#000!important;
	background-color:#00bcd4!important }

.blue-grey, .hover-blue-grey:hover, 
.blue-gray, .hover-blue-gray:hover {
	color:#fff!important;
	background-color:#607d8b!important }

.green, .hover-green:hover {
	color:#fff!important;
	background-color:#4CAF50!important }

.light-green, .hover-light-green:hover {
	color:#000!important;
	background-color:#8bc34a!important }

.indigo, .hover-indigo:hover {
	color:#fff!important;
	background-color:#3f51b5!important }

.khaki, .hover-khaki:hover {
	color:#000!important;
	background-color:#f0e68c!important }

.lime, .hover-lime:hover {
	color:#000!important;
	background-color:#cddc39!important }

.orange, .hover-orange:hover {
	color:#000!important;
	background-color:#ff9800!important }

.deep-orange, .hover-deep-orange:hover {
	color:#fff!important;
	background-color:#ff5722!important }

.pink, .hover-pink:hover {
	color:#fff!important;
	background-color:#e91e63!important }

.purple, .hover-purple:hover {
	color:#fff!important;
	background-color:#9c27b0!important }

.deep-purple, .hover-deep-purple:hover {
	color:#fff!important;
	background-color:#673ab7!important }

.red, .hover-red:hover {
	color:#fff!important;
	background-color:#f44336!important }

.sand, .hover-sand:hover {
	color:#000!important;
	background-color:#fdf5e6!important }

.teal, .hover-teal:hover {
	color:#fff!important;
	background-color:#009688!important }

.yellow, .hover-yellow:hover {
	color:#000!important;
	background-color:#ffeb3b!important }

.white, .hover-white:hover {
	color:#000!important;
	background-color:#fff!important }

.black, .hover-black:hover {
	color:#fff!important;
	background-color:#000!important }

.grey, .hover-grey:hover, 
.gray, .hover-gray:hover {
	color:#000!important;
	background-color:#bbb!important }

.light-grey, .hover-light-grey:hover, 
.light-gray, .hover-light-gray:hover {
	color:#000!important;
	background-color:#f1f1f1!important }

.dark-grey, .hover-dark-grey:hover, 
.dark-gray, .hover-dark-gray:hover {
	color:#fff!important;
	background-color:#616161!important }

.pale-red, .hover-pale-red:hover {
	color:#000!important;
	background-color:#ffdddd!important }

.pale-green, .hover-pale-green:hover {
	color:#000!important;
	background-color:#ddffdd!important }

.pale-yellow, .hover-pale-yellow:hover {
	color:#000!important;
	background-color:#ffffcc!important }

.pale-blue, .hover-pale-blue:hover {
	color:#000!important;
	background-color:#ddffff!important }

.text-red, .hover-text-red:hover {
	color:#f44336!important }

.text-green, .hover-text-green:hover {
	color:#4CAF50!important }

.text-blue, .hover-text-blue:hover {
	color:#2196F3!important }

.text-yellow, .hover-text-yellow:hover {
	color:#ffeb3b!important }

.text-white, .hover-text-white:hover {
	color:#fff!important }

.text-black, .hover-text-black:hover {
	color:#000!important }

.text-light-grey, .hover-text-light-grey:hover, 
.text-light-gray, .hover-text-light-gray:hover {
	color:#f1f1f1!important }

.text-grey, .hover-text-grey:hover, 
.text-gray, .hover-text-gray:hover {
	color:#757575!important }

.text-dark-grey, .hover-text-dark-grey:hover, 
.text-dark-gray, .hover-text-dark-gray:hover {
	color:#3a3a3a!important }

.text-amber {
	color:#ffc107!important }

.text-aqua {
	color:#00ffff!important }

.text-light-blue {
	color:#87CEEB!important }

.text-brown {
	color:#795548!important }

.text-cyan {
	color:#00bcd4!important }

.text-blue-grey, .text-blue-gray {
	color:#607d8b!important }

.text-light-green {
	color:#8bc34a!important }

.text-indigo {
	color:#3f51b5!important }

.text-khaki {
	color:#b4aa50!important }

.text-lime {
	color:#cddc39!important }

.text-orange {
	color:#ff9800!important }

.text-deep-orange {
	color:#ff5722!important }

.text-pink {
	color:#e91e63!important }

.text-purple {
	color:#9c27b0!important }

.text-deep-purple {
	color:#673ab7!important }

.text-sand {
	color:#fdf5e6!important }

.text-teal {
	color:#009688!important }

.border-red, .hover-border-red:hover {
	border-color:#f44336!important }

.border-green, .hover-border-green:hover {
	border-color:#4CAF50!important }

.border-blue, .hover-border-blue:hover {
	border-color:#2196F3!important }

.border-yellow, .hover-border-yellow:hover {
	border-color:#ffeb3b!important }

.border-white, .hover-border-white:hover {
	border-color:#fff!important }

.border-black, .hover-border-black:hover {
	border-color:#000!important }

.border-grey, .hover-border-grey:hover, 
.border-gray, .hover-border-gray:hover {
	border-color:#bbb!important }