/* Move down content because we have a fixed navbar that is 50px tall */
body {
  padding-top: 50px;
}

footer {
	background-color: #d9534f;
	padding-top: 100px;
	padding-bottom: 30px;
}

#skills {
	background-color: #f5d2d0;
}

#bold {
	font-weight: bold;
}

.jumbotron {
	text-align:center;
	background-image: url('../images/austin.jpg');
	background-size: 100%;
	background-color: black;	
	background-attachment: fixed;
	color: white;
	background-repeat: no-repeat;	
}

.jumbotron h1 {
	margin-top: 0px;
	margin-bottom: 30px;
}
 
.jumbotron p {
	margin-bottom: 30px;
	font-weight: 100;
	padding: 0px 50px;
}

.btn-lg {
	font-size: 36px;
}

.homepage {
	text-align: center;
	padding-top: 20px;
	padding-bottom: 0px;
}

.homepage h2, .homepage h3, .homepage h4 {
	font-family: "Lato", courier, sarif;
	color: #d9534f;
	text-transform: uppercase;
}

.homepage p {
	font-weight: 400;
	font-size: 15px;
}

.homepage a {
	color:#d9534f;
}

.homepage hr {
	border-color:#d9534f;
	width: 100px;
	margin-top: 0px auto	;
}

.divider {
	text-align: left;
	font-weight: 500;
}

.divider hr {
	border-color: black;
	size: 10px;
}

.divider h4 {
	color: #d9534f;
}

/*----------------------------------------------*/
/*	Skill Bars
/*----------------------------------------------*/

.bars {
	width: 95%;
	padding: 0px;
	text-align: left;
}
.bars .tech_skills {
  	margin-top: 36px;
   list-style: none;
   margin-right: 30px;
   margin-left: 30px;
}
.bars li {
    position: relative;
  	margin-bottom: 50px;
  	background: #ccc;
  	height: 42px;
  	border-radius: 3px;
}
.bars li em {
	font: 15px 'Lato', sans-serif;
	text-transform: uppercase;
    letter-spacing: 2px;
	font-weight: normal;
    position: relative;
	top: 10px;/* Can set this to -36 if I want text above the bar */
	left: 10px;
}
.bar-expand {
   position: absolute;
   left: 0;
   top: 0;

   margin: 0;
   padding-right: 24px;
  	background: #d9534f;/*was #313131*/
   display: inline-block;
  	height: 42px;
   line-height: 42px;
   border-radius: 3px 0 0 3px;
}
.skill-bar-percent {
  position:absolute;
  right:10px;
  top:10px;
  font-size:15px;
  height:15px;
  line-height:15px;
  color:black;
}

.photoshop {
  	width: 50%;
  	-moz-animation: photoshop 2s ease;
  	-webkit-animation: photoshop 2s ease;
}
.jquery {
  	width: 65%;
  	-moz-animation: jquery 2s ease;
  	-webkit-animation: jquery 2s ease;
}
.javascript {
  	width: 70%;
  	-moz-animation: javascript 2s ease;
  	-webkit-animation: javascript 2s ease;
}
.css {
  	width: 80%;
  	-moz-animation: css 2s ease;
  	-webkit-animation: css 2s ease;
}
.html5 {
  	width: 80%;
  	-moz-animation: html5 2s ease;
  	-webkit-animation: html5 2s ease;
 }

@-moz-keyframes photoshop {
  0%   { width: 0px;  }
  100% { width: 50%;  }
}
@-moz-keyframes jquery {
  0%   { width: 0px;  }
  100% { width: 65%;  }
}
@-moz-keyframes javascript {
  0%   { width: 0px;  }
  100% { width: 70%;  }
}
@-moz-keyframes css {
  0%   { width: 0px;  }
  100% { width: 80%;  }
}
@-moz-keyframes html5 {
  0%   { width: 0px;  }
  100% { width: 80%;  }
}

@-webkit-keyframes photoshop {
  0%   { width: 0px;  }
  100% { width: 50%;  }
}
@-webkit-keyframes jquery {
  0%   { width: 0px;  }
  100% { width: 65%;  }
}
@-webkit-keyframes javascript {
  0%   { width: 0px;  }
  100% { width: 70%;  }
}
@-webkit-keyframes css {
  0%   { width: 0px;  }
  100% { width: 80%;  }
}
@-webkit-keyframes html5 {
  0%   { width: 0px;  }
  100% { width: 80%;  }
}