body {
        font-family: "Fira Sans", sans-serif;
        padding-top: 0px;
        padding-bottom: 0px;
		background:#e0e0e0;
}
.wrapper{
		max-width:1200px;
		display:block;
		margin-right:auto;
		margin-left:auto;
		background:#fff;
}	
.container{
    padding:0px 20px;
}
.navbar {
		margin-bottom: 0px;
		border-radius:0px;
		/* background-color: #F5F5F5; */ 
}
.sub{
    padding:30px 0px 30px;
}
.totop{
    margin-top:0px;
}
h1 {
    font-size: 32.5px;
}
.attention h2, .attention h3{
		font-size:30px;
}
p{
    text-align:justify;
}

.thumbnail{
    margin-bottom:30px;
}
.thumbnail img{
    min-width:100%;
}
footer{
		padding-top:40px;
		margin-top:0px;
		border-top:1px solid #dedede;
		background:#282828;
		color:#fff;
}
footer a{
		color:#fff;
}
.related-projects{
		padding-top:20px;
		margin-top:20px;
}
.embed-container {
    height: 0;
    width: 100%;
    padding-bottom: 30%;
    overflow: hidden;
    position: relative;
	}		
.embed-container iframe {
    width: 100%;
    height: 100%;
	border: 0;
    position: absolute;
    top: 0;
    left: 0;
}
@media (max-width: 979px){
		.navbar .btn-navbar {
			margin-top:20px;
    }
}
@media (max-width: 767px){
		.container {
			padding-right:20px;
			padding-left:20px;
    }
}	 
/* ===proficency DIV===*/
#proficency {
    margin-left: 10px;
}
li.proficency {
    list-style-type: none;
    margin-bottom: 5px;
}
.progress_container{
	float: right;
	padding:1px;
	height:20px;
	overflow:hidden;
	background-color:#d7d7d7;
	margin: 0 0 5px 0px;
	width: 220px;
}	
.progress_bar{
	height:20px;
	width:0px;
	background-color:#bcb7b7;
}
.progress_bar1{
	height:20px;
	width:0px;
	background-color:#44423C;
}
.progress_bar2{
	height:20px;
	width:0px;
	background-color:#C39947;
}
.progress_bar3{
	height:20px;
	width:0px;
	background-color:#DA781E;
}
.progress_bar4{
	height:20px;
	width:0px;
	background-color:#9F2028;
}
.progress_bar5{
	height:20px;
	width:0px;
	background-color:#A94E2F;
}
.progress_bar6{
	height:20px;
	width:0px;
	background-color:#784E2F;
}
.progress_bar7{
	height:20px;
	width:0px;
	background-color:#C1A98A;
}
.progress_bar8{
	height:20px;
	width:0px;
	background-color:#797269;
}
.progress_bar9{
	height:20px;
	width:0px;
	background-color:#6C554B;
}
.progress_bar10{
	height:20px;
	width:0px;
	background-color:#4B3A32;
}
.progress_bar11{
	height:20px;
	width:0px;
	background-color:#3B4157;
}
.progress_bar12{
	height:20px;
	width:0px;
	background-color:#627471;
}
.progress_bar13{
	height:20px;
	width:0px;
	background-color:#8F9F84;
}
.progress_bar14{
	height:20px;
	width:0px;
	background-color:#9AA96B;
}
.progress_bar15{
	height:20px;
	width:0px;
	background-color:#6DA38A;
}

/* === FROM: http://geoffgraham.me/creating-a-responsive-css-bar-chart/for vertical bars ===*/
.vertical-text {
	transform: rotate(90deg);
	transform-origin: left top 0;
}
/* styles the UL element for the outer container */
.chart {
  clear: both;
  padding: 0;
  width: 100%;
}
@media (min-width: 300px) {
  .chart {
    background: url("http://cl.ly/QSpc/bg-chart.png") right top repeat-x;
    height: 30em;
    width: 40em;
    margin: 0 auto emCalc(-32px);
  }
}
/* styles each veritcal list item inside the container */
.chart li {
  display: block;
  height: 100px;
  padding: emCalc(25px) 0;
  position: relative;
  text-align: center;
  vertical-align: bottom; /* rests bars on baseline */
  -moz-border-radius: 4px 4px 0 0;
  -webkit-border-radius: 4px;
  border-radius: 4px 4px 0 0;
  -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
  -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
}
@media (min-width: 300px) {
  .chart li {
    display: inline-block;
    height: 300px; /* height of chart */
    margin: 0 1.8% 0 0;
    width: 16%; /* vertical bar width */
  }
}
/* styles the column for the chart labels */
.chart .axis {
    display: none;
    width: 10%; /* width of column for the labels */
    top: emCalc(-45px);
}
@media (min-width: 300px) {
  .chart .axis {
    display: inline-block;
  }
}
/* styles each horizontal DIV label inside the container */
.chart .label {
    background: #cccccc;
    margin: 0px 0 71px 0;
}
hr {
    width: 100%; 
    background: #cccccc;
    line-height: 0.1em;
}
.chart .percent {
  letter-spacing: -3px;
  opacity: .4; /* transparency of percentage */
  width: 100%;
  font-size: 30px;
  font-size: 1.875rem;
}
@media (min-width: 700px) {
  .chart .percent {
    position: absolute;
    font-size: 62px;
    font-size: 3.875rem;
  }
}
.chart .percent span {
  font-size: 30px;
  font-size: 1.875rem;
}
.chart .skill {
  font-weight: 500;
  opacity: .8;
  /* overflow: hidden; */
  width: 100%;
  font-size: 30px;
  font-size: 1.875rem;
}
@media (min-width: 700px) {
  .chart .skill {
    bottom: 40px;  /* space from bottom of bar */
    position: absolute; /* starts text at 30px; bottom */
    font-size: 30px;
    font-size: 30px;
    transform: rotate(-90deg);
  }
}
.chart .teal {
  background: rgba(195, 153, 71, 0.7);   /* #4ecdc4 */
  /* border: 1px solid #4ecdc4;
  background-image: -moz-linear-gradient(#76d8d1, #4ecdc4 70%);
  background-image: -webkit-linear-gradient(#76d8d1, #4ecdc4 70%);
  background-image: linear-gradient(#76d8d1, #4ecdc4 70%); */
}
.chart .salmon {
  background: rgba(159, 32, 40, 0.7);  /* #ff6b6b */
  /* border: 1px solid #ff6b6b;
  background-image: -moz-linear-gradient(#ff9e9e, #ff6b6b 70%);
  background-image: -webkit-linear-gradient(#ff9e9e, #ff6b6b 70%);
  background-image: linear-gradient(#ff9e9e, #ff6b6b 70%); */
}
.chart .lime {
  background: rgba(59, 65, 87, 0.7);   /* #97f464 */
   /*border: 1px solid #97f464;
  background-image: -moz-linear-gradient(#b7f794, #97f464 70%);
  background-image: -webkit-linear-gradient(#b7f794, #97f464 70%);
  background-image: linear-gradient(#b7f794, #97f464 70%); */
}
.chart .peach {
  background: rgba(154, 169, 107, 0.7);  /* #ffcd92 */
  /* border: 1px solid #ffcd92;
  background-image: -moz-linear-gradient(#ffe4c5, #ffcd92 70%);
  background-image: -webkit-linear-gradient(#ffe4c5, #ffcd92 70%);
  background-image: linear-gradient(#ffe4c5, #ffcd92 70%); */
}
.chart .grape {
  background: rgba(120, 78, 47, 0.7); /* #ab64f4 */
  /* border: 1px solid #ab64f4;
  background-image: -moz-linear-gradient(#c594f7, #ab64f4 70%);
  background-image: -webkit-linear-gradient(#c594f7, #ab64f4 70%);
  background-image: linear-gradient(#c594f7, #ab64f4 70%); */
}