body {    background-color:#666;
		font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
		Helvetica, arial, sans-serif;
		font-size: 14px;
		color:#fff; }

@media only screen and (max-width: 767px) {
	.wrapper {	background-color:#a5a5a5; }
	.navigation {	padding: 10px 0px 10px 55px; }
	.about {	padding-top:30px;
				padding-bottom:50px; }
	.heading {	font-size:1.4em; }
	.heading-cv {	font-size:1.3em; padding:20px 0px; }
	.box, .lead { font-size:1.1em;}
	.contact {	padding-top:50px;
				padding-bottom:70px; }
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
	.wrapper {	height:600px;
				background-image:url(../images/20170929_2062.jpg); 
				background-size:cover; }
	.profile {	display:none; }
	.navigation {	padding: 10px 0px 10px 45px; }
	.leadCopyRight {	padding:40px !important; }
	.about {	padding-top:130px;
				padding-bottom:700px; }
	.heading {	font-size:2em; }
	.heading-cv {	font-size:1.7em; padding:20px 0px; }
	.box, .lead { font-size:1.6em;}
	.resume {	padding: 20px 0; }
	.contact {	padding-top:150px;
				padding-bottom:360px; }
}
@media only screen and (min-width: 1101px) {
	.wrapper {	height:700px;
				background-image:url(../images/20170929_2062.jpg); 
				background-size:cover; }
	.profile {	display:none; }
	.navigation {	padding: 10px 0px 10px 45px; }
	.about { 	padding-top:130px;
				padding-bottom:700px; }
	.heading {	font-size:2em; }
	.heading-cv {	font-size:1.7em; padding:20px 0px; }
	.box, .lead { font-size:1.6em;}
	.resume {	padding: 20px 0; }
	.contact {	padding-top:150px;
				padding-bottom:360px; }
	.cv {	padding-top:40px;
				padding-bottom:40px; }
}

.form-control { padding: 6px 36px 6px 12px; }

/* portfolio animations */
	.caption-style-4{
		list-style-type: none;
		margin: 0px;
		padding: 0px;
		display: inline-block;
		padding-bottom:30px;
	}
	.caption-style-4 li{
		/* MES: this is what is pushing them left 		
		float: left;*/
		float:left;
		padding: 0px;
		padding-bottom:10px;
		position: relative;
		overflow: hidden;
	}
	.caption-style-4 li:hover .caption{
		opacity: 1;
	}
	.caption-style-4 li:hover img{
		opacity: 1;
		transform: scale(1.15,1.15);
		-webkit-transform:scale(1.15,1.15);
		-moz-transform:scale(1.15,1.15);
		-ms-transform:scale(1.15,1.15);
		-o-transform:scale(1.15,1.15);
	}
	.caption-style-4 img{
		margin: 0px;
		padding: 10px;
		float: left;
		z-index: 4;
	}
	.caption-style-4 .caption{
		cursor: pointer;
		position: absolute;
		opacity: 0;
		-webkit-transition:all 0.45s ease-in-out;
		-moz-transition:all 0.45s ease-in-out;
		-o-transition:all 0.45s ease-in-out;
		-ms-transition:all 0.45s ease-in-out;
		transition:all 0.45s ease-in-out;
	}
	.caption-style-4 img{
		-webkit-transition:all 0.25s ease-in-out;
		-moz-transition:all 0.25s ease-in-out;
		-o-transition:all 0.25s ease-in-out;
		-ms-transition:all 0.25s ease-in-out;
		transition:all 0.25s ease-in-out;
	}
	.caption-style-4 .blur{
		background-color: rgba(0,0,0,0.65);
		height: 260px;
		width: 260px;
		z-index: 5;
		position: absolute;
	}
	.caption-style-4 .caption-text h1{
		text-transform: uppercase;
		font-size: 24px;
	}
	.caption-style-4 .caption-text{
		z-index: 10;
		color: #fff;
		position: absolute;
		width: 260px;
		height: 260px;
		text-align: center;
		top:100px;
	}
	
/* home page animations */

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 

.fade-in{
	color:#999;
	color:#666;
	color:#fff;
}
 
.fade-in {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
 
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:1.0s;
	-moz-animation-duration:1.0s;
	animation-duration:1.0s;
}
 
.fade-in.one {
	-webkit-animation-delay: 1.0s;
	-moz-animation-delay:1.0s;
	animation-delay: 1.0s;
}
 
.fade-in.two {
	-webkit-animation-delay: 2.0s;
	-moz-animation-delay: 2.0s;
	animation-delay: 2.0s;
}
 
.fade-in.three {
	-webkit-animation-delay: 2.0s;
	-moz-animation-delay: 2.0s;
	animation-delay: 2.0s;
}

.fade-in.four {
	-webkit-animation-delay: 4.5s;
	-moz-animation-delay:  4.5s;
	animation-delay: 4.5s;
	padding-top:10px;
}
 
.fade-in.five {
	-webkit-animation-delay: 4.5s;
	-moz-animation-delay: 4.5s;
	animation-delay: 4.5s;
	padding-top:10px;
}
 
.fade-in.six {
	-webkit-animation-delay: 4.5s;
	-moz-animation-delay: 4.5s;
	animation-delay: 4.5s;
	padding-top:10px;
}

.fade-in.seven {
	-webkit-animation-delay: 4.5s;
	-moz-animation-delay: 4.5s;
	animation-delay: 4.5s;
	padding-top:10px;
}
 
.fade-in.eight {
	-webkit-animation-delay: 7.5s;
	-moz-animation-delay: 7.5s;
	animation-delay: 7.5s;
	padding-top:20px;
}
 
.fade-in.nine {
	-webkit-animation-delay: 7.5s;
	-moz-animation-delay: 7.5s;
	animation-delay: 7.5s;
	padding-top:20px;
}

.box{
	width: 600px;
	height: 20px;
	position: relative;
	margin-top: 10px;
	float: left;
	background: transparent;
}

.heading { 	
	font-family: Impact, Charcoal, sans-serif; 
}

.text { color:#ff9900; }
.text { color:#3C6; }


/* end animation css */
	
li a, a { color:#fff; }

a.underline { border-bottom:dotted thin #fff; }
a.underlineBlack { 	border-bottom:dotted thin #333;
					color:#333; }
a:hover {	color:#000; }
a:visited {	color:#fff; }
a.underlineBlack:visited, a.black:visited {	color:#333; }

li > a:hover {
    color: #000;
    background-color: transparent;
}

.nav > li > a:hover, .nav > li > a:focus {	color: #000;
    										background-color: transparent; }
.selected {
	color:#3C6;
}
.logo {	padding-top:20px;
		padding-left:55px; }
/*	
.bgimg {	background-image:url(../images/back_home_narrow-5.png);
			background-repeat:no-repeat;
			background-size:100% auto; }
		
.bgimg {	background-image:url(../images/back_home_narrow-4.png);
			background-repeat:no-repeat;
			background-size:100% auto; }
	
.bgimg {	background-image:url(../images/back_home_narrow-6.png);
			background-repeat:no-repeat;
			background-size:100% auto; }
	*/			
.bgimg {	background-image:url(../images/back_home_narrow-7.png);
			background-repeat:no-repeat;
			background-size:100% auto; }

.main {	padding-left:55px; }

.main ul { padding:20px 10px 20px 30px; }
.main form { padding:20px 10px 20px 20px; }

.button {	background: transparent;
			border: solid 2px #ffffff;
			-moz-border-radius: 2px;
			border-radius: 2px; 
			padding: 5px 10px;
			font-size: 13px;
			color:#ffffff;
 }

.buttonBlack {	background: transparent;
			border: solid 2px #333;
			-moz-border-radius: 2px;
			border-radius: 2px; 
			padding: 5px 10px;
			font-size: 13px;
			color:#333;
 }

header {	background-color:#666; }

.portfolio {	padding:0px 40px 60px 40px; }

.pwrapper { background-color:#999;}

.category {	padding-top:20px;
			padding-bottom:20px; }

.leadCopy {	font-size:20px; 
			padding-top:20px;
			padding-bottom:20px;
			}
.leadCopy > p, .leadCopy > ul
			{	
			font-size:20px; 
			padding-top:0px;
			padding-bottom:10px;
			font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
			font-weight: 100;
			letter-spacing: 0.5px;
			}
.leadCopy > p > a.selected
			{	
			font-size:14px; 
			font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
			font-weight: bold;
			color:#3C6;
			}
.leadCopy > p.description, p.description-white
			{	
			color:#333;
			font-size:16px;
			font-weight: 200;
			letter-spacing: 0.5px;
			}
.leadCopy > p.description-white
			{	
			color:#fff;
			font-weight: 100;
			}
.leadCopy > p.description-white > a
			{	
			font-weight: 200;
			}
.leadCopy > p.role
			{	
			color:#333;
			font-weight:200;
			}
.leadCopy > ul > li
			{	
			padding-bottom:10px;
			font-size:16px;
			}

.author {	
			margin-top:-30px;
			font-size:16px;
			padding-bottom:30px;
			font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
			font-weight: 100;
			letter-spacing: 0.5px;
			}		
.author > a {	
			color: #3C6;
			font-weight:bold;
			}

.leadCopyRight {	font-size:20px; 
					padding:80px; }

.sampleThumbs {	
			text-align: center;
			padding-bottom:40px;
			}				

h1 {	color:#996699; }

.emailBottom {	padding-bottom:80px; }

.margin10 { margin:10px 0; }

footer {	font-family: calibri, sans-serif;
			color: #996699;
			color:#000;
			text-align: center;
			font-size: 12px;
			padding-top: 30px;
			padding-bottom: 30px;
			background-color:#ccc; }

footer a {	color:#996699; }

.contactform td.align {
	padding-top:20px;
}

.instructions {
	font-size: 12px;
	font-weight: normal;
	text-align:center;
	padding-top:40px;
}

.project-title {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 24px;
  font-weight: normal;
}

.job-title {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 18px;
	color:#333;
    padding-bottom:0px;
}

.job-venue {
	font-family:Cambria, serif;
    font-size: 15px;
	color: #ff9900;
	padding-bottom:0px;
}

.job-description {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 13px;
	color: #fff;
	padding-bottom:20px;
}


.fluff {
	font-family:Cambria, serif;
    font-size: 21px;
	color:#333;
}

ul.skills{
	margin-top:-20px;
	margin-left: -10px;
	}
	
#phone, #address, #software {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 14px;
	color:#333;
}
#phone > ul > li {
	padding-bottom:10px;
}