body {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
}
.banner-name {
	font-family: 'Roboto', sans-serif;
	font-size: 3em;
	font-weight: 100;
	color: white;
	position: absolute;
	top: 65px;
	left: 8%;
}
#banner-name {
margin-bottom: 40px;
}
.banner-name-show {
	opacity: 1;
}
.banner-name-hide {
	opacity: 0;
}
#about-text {
	margin-top: 250px;
}
.page-header {
	color: #999;
	font-size: 3em;
}
.job-text {
	font-size: 0.5em;
	letter-spacing: 8px;
	font-weight: 300;
}
#contact-info {
	position: absolute;
	top: 280px;
	left: 8%;
	color: white;
	font-size: 1.5em;
	text-decoration: none;
}
#contact-info p {
	font-size: 1.2em;
}
.navbar-transparent {
	background-color: rgba(0, 0, 0, 0.3);
}
.navbar-transparent a {
	color: white;
	font-weight: 300;
}
.navbar-transparent .navbar-toggle .icon-bar {
  background-color: #fff;
}
.nav.navbar-nav a:hover{
	background-color:  rgba(250, 250, 250, 0.1);
}
.ar-active {
	background-color: rgba(200, 200, 200, 0.2);
}
@media only screen and (max-width: 1200px) {
	body{font-size: 10px}
	.banner-name {
	bottom: 30px;
	left: 5%;
}
.eight-em {
	font-size: 1.0em;
}
.nine-em {
	font-size: 1.0em;
}
.navbar-transparent a {
	font-size: 1.5em;
}
#contact-info p {
	font-size: 1.0em;
}
}
@media only screen and (min-width: 1201px) {
	.banner-name {top:100px;}
	.ar-text-small li{
	font-size: 1em;
}
}
@media only screen and (max-width: 769px) {
	body{font-size: 10px}
	.job-text {font-size: 0.4em;letter-spacing: 8px;}
}
@media only screen and (max-width: 767px){
	.navbar-collapse { background:#777; /*replace with desired color*/ }
	#about-text {
	margin-top: 200px;
	font-size: 1.0em;
}
}
@media only screen and (max-width: 414px) {
	body{font-size: 10px}
	.banner-name {font-size: 2em; bottom: 50px; left: 5%;}
	
}