.banner {
	background: #083165;
	color: #fff;
}

.will-img {
	width: 200px;
	border: 8px double #d9860f;
	margin-bottom: 2rem;
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;	
	
}

.will-img:hover {
		  
		  transform: scale(1.1);
}

.jumbotron {
	    padding: 3rem 2rem;
}

.pt-1-5 {
    padding-top: 1.5rem!important;
}

.py-1-5 {
    padding: 1.5rem 0px!important;
}


/* On screens that are 767px or less */
@media screen and (max-width: 767px) {
  .pl-1-5 {
    padding-left: 1.5rem!important;
  }
  .pr-1-5 {
    padding-right: 1.5rem!important;
  }  
}


hr.my-4 {
	border-color: #fff;
}

.w1 {
padding: 1rem 0;
}

.w2 {
padding: 2rem 0; }

.w3 {
padding: 3rem 0; }

.w8 {
padding: 8rem 0; }

.main-button {
	background: #d9860f;
	border: #d9860f;
}

.main-button:hover {
	background: #f89404;
	border: #fff;
	color: #083165;	
}

.main-button:active, .main-button:focus{
	background: #083165 !important;
	border: #083165;
	color: #fff;	
}

p.lead {
	padding-top:1rem !important;
}

h2 {
	font-size: 16px;
	font-weight: normal;
	margin-bottom: 32px
}

.portfolio-holder h3 {
	color: #fff;
	position: absolute;
	top: 0;
	width: 100%;
	top: 50%;
	transform: translateY(-50%);
	font-size: 32px;
}

.portfolio-holder {
	position: relative;
	text-align: center;
}

.portfolio-holder img{
  
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
}
.portfolio-holder img:hover {
  transform: scale(1.05);
  /*cursor: pointer;*/
}


.skill-img {
	width: 150px;
	border: 0px double #d9860f;
	margin-bottom: 1rem;
  -webkit-transition: -webkit-transform .4s ease-in-out;
          transition:         transform .4s ease-in-out;	
	
}

.skill-img:hover {
		  transform: scale(1.1);
}

.jumbotron {
    margin-bottom: 0rem;
	border-radius: 0rem;
}

nav.portfolio img,nav.portfolio p {
	float: left;
}

nav.portfolio {
	height: 60px;
}



p {
	font-size: 1.1rem;
}

figcaption {
	margin-top: 1rem;
	text-align: center;
	font-size: 0.8rem;
}

nav.portfolio .will-img {
	max-width: 50px;
	border: 2px double #d9860f;	
	margin-right: 20px;
	margin-top: 5px;
}

nav.portfolio .main-button {
	margin-top: 8px;
	right: 0;

}

.portfolio-section > header {
	background: #064391;
	color: #fff;
	text-align: center;
}

.portfolio-section.website-banner > header {
	background-image: url("/img/website-design-banner.jpg");
	background-size: 100%;
}

.portfolio-section.dev-banner > header {
	background-image: url("/img/website-development-banner.jpg");
	background-size: 100%;
}

.portfolio-section.print-banner > header {
	background-image: url("/img/typography-banner.jpg");
	background-size: 100%;
}

.portfolio-section.book-banner > header {
	background-image: url("/img/book-design-banner.jpg");
	background-size: 100%;
}

.portfolio-section.video-banner > header {
	background-image: url("/img/video-production-banner.jpg");
	background-size: 100%;
}

.portfolio-section.email-banner > header {
	background-image: url("/img/email-campaigns-banner.jpg");
	background-size: 100%;
}

.portfolio-section.game-banner > header {
	background-image: url("/img/game-design-banner.jpg");
	background-size: 100%;
}

.portfolio-section.logo-banner > header {
	background-image: url("/img/logo-design-banner.jpg");
	background-size: 100%;
}

figure.img-center {
	text-align:center;
}

.key-skills {
	background-color:#eee;
	padding: 0.5rem;
	font-size: 0.8rem !important;
}

.portfolio-section h2 {
font-size: 1.4rem;
font-weight: bold;
}

a {
	color: #064391;
}

nav.portfolio p.lead > a {
	color: #fff;
	text-decoration: none;
}

nav.portfolio p.lead > a:hover {
	color: #d9860f;

}

/* On screens that are 767px or less */
@media screen and (max-width: 767px) {
	nav.portfolio {
		height: auto;
	}
	.main-button {
	margin-bottom: 1rem;
	width: 100%;
	}
	
	nav.portfolio p.lead {
	text-align: center;
    width: 100%;
	}
	
	nav.portfolio .will-img {
		max-width: 100px;
		border: 2px double #d9860f;
		margin: 0px auto;
		margin-top: 15px;
		display: block;
		text-align: center;
		float: none;
		width: 100px;
	}	
}