#langChart, #appChart, #osChart {
	background: white;
}

.legend {
	padding-top: 1%;
}

.legend span {
	white-space:nowrap;
	font-size: 18px;
}

.invisiable {
	visibility: hidden;
}

.bar-graph {
	padding: 0;
	width: 100%;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-align-items: flex-end;
		-ms-flex-align: end;
			align-items: flex-end;
	height: 425px;
	margin: 0;
	background: white;
}

.bar-graph li {
	display: block;
	/* padding: 1.5625rem 0; */
	padding: .5rem 0;
	position: relative;
	text-align: center;
	vertical-align: bottom;
	border-radius: 4px 4px 0 0;
	/* max-width: 10%; */
	height: 100%;
	margin: 0 1% 0 0;
	-webkit-flex: 1 1 15%;
		-ms-flex: 1 1 15%;
			flex: 1 1 15%;
}

@media (max-width: 768px) {
	.bar-graph li {
		margin: 0;
	}
}

.bar-graph .bar-graph-axis {
	/* max-width: 13%; */
	padding-left: 1%;
	-webkit-flex: 1 1 8%;
		-ms-flex: 1 1 8%;
			flex: 1 1 8%;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: column;
		-ms-flex-direction: column;
			flex-direction: column;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
			justify-content: space-between;
}

.bar-graph .bar-graph-label {
	margin: 0;
	text-align: left;
	  /*background-color: none;*/
	color: black;
	position: relative;
	font-size: 16pt;
}

@media print, screen and (min-width: 40em) and (min-width: 64em) {
  .bar-graph .bar-graph-label:before, .bar-graph .bar-graph-label:after {
		/* width: 30%; */
  }
}

@media print, screen and (min-width: 40em) {
  .bar-graph .bar-graph-label:after {
		left: auto;
		right: 0;
  }
}

.bar-graph .description {
	font-weight: bold;
	color: white;
	width: 100%;
	bottom: 10px;
	position: absolute;
	font-size: 18px;
	overflow: hidden;
}

/* 
		Reg		Dark	Rich	Light	
HTML = #ec6630 #e44d26 #f4500e #f47542 
CSS  = #35a8db #1572b6
JS   = #FFCA28 #e5a228 #ffae00
JQuery =
React  =
PHP    = #6a14ca
MySQL  = #009ec1 #00758F #0089a8
LESS   = #25528E
SASS   = #F8BBD0
*/

.bar-graph .bar.html {
	border: 1px solid #f47542;
	background: #f47542;
}

.bar-graph .bar.css {
	border: 1px solid #35a8db;
	background: #35a8db;
}

.bar-graph .bar.js {
	border: 1px solid #ffae00;
	background: #ffae00;
}

.bar-graph .bar.jquery {
	border: 1px solid #7AC141;
	background: #7AC141;
}

.bar-graph .bar.react {
	border: 4px solid #00d8ff;
	background: #222222;
}

.bar-graph .bar.php {
	border: 4px solid #6a14ca;
	background: #6a14ca;
}

.bar-graph .bar.mysql {
	border: 4px solid #0089a8;
	background: #009ec1;
}

.bar-graph .bar.less {
	border: 4px solid #25528E;
	background: #25528E;
}

.bar-graph .bar.sass {
	border: 4px solid #F8BBD0;
	background: #F8BBD0;
}

/* 
ps = #00a4e4 #00a3e2
il	= #fbb034
an	= #ff0000 #f93434 #e84a4a
word = #2c5699 #3978dd
excel = #1e7144 #53946c
powerpoint = #d44624 #dc6649
access = #a43434 #b4575a
publish = #047464 #5fb4ac
visio = #3b539f #8391b6
 */
.bar-graph .bar.ps {
	border: 4px solid black;
	background: #00a3e2;
}
.bar-graph .bar.il {
	border: 4px solid black;
	background: #fbb034;
}
.bar-graph .bar.an {
	border: 4px solid black;
	background: #e84a4a;
}
.bar-graph .bar.word {
	border: 4px solid #2c5699;
	background: #3978dd;
}
.bar-graph .bar.excel {
	border: 4px solid #1e7144;
	background: #53946c;
}
.bar-graph .bar.powerpoint {
	border: 5px solid #d44624;
	background: #dc6649;
}
.bar-graph .bar.access {
	border: 5px solid #a43434;
	background: #b4575a;
}
.bar-graph .bar.publish {
	border: 4px solid #047464;
	background: #5fb4ac;
}
.bar-graph .bar.visio {
	border: 4px solid #3b539f;
	background: #8391b6;
}

/* 
Windows = #00A4EF; #59caff;
Apple 	= #ff0800; #ff5751;
Linux	= #ffd000;
Android = #89e202; #d3ed28;
 */
.bar-graph .bar.windows {
	/* border: 4px solid #00A4EF; */
	border: 4px solid #00A4EF;
	background: #00A4EF;
}
.bar-graph .bar.apple {
	border: 4px solid #ff0800;
	background: #ff0800;
}
.bar-graph .bar.apple img{
	width: 75%;
}
.bar-graph .bar.linux {
	border: 4px solid #ffd000;
	background: #ffd000;
}
.bar-graph .bar.android {
	border: 4px solid #89e202;
	background: #89e202;
}

img {
	width: 80%;
}

/* h2 {
	margin-bottom: 5%;
} */