/*
For mobile first designs we use min-widths. The styles in the @media tags will only be used if the screen width is larger than 480px, 660px or 1095px. They will be added to (or over-ride) the default styles which are for mobile devices 480 px or less. 480px is a common size for phones in landscape mode.
*/

/* The sticky footer is created by the flexbox code on the wrapper and footer elements. This code keeps the footer stuck to the bottom of the window unless the content in the wrapper causes the page to overflow the height of the window: In which case the footer will get pushed down. */

 /***************************
	HEADER - COLORS
 ****************************/

header{
	background-color: #000;
	border-bottom: 3px solid #e6745f;
	-webkit-box-shadow: 8px 5px 26px -2px rgba(46,74,117,1);
	-moz-box-shadow: 	8px 5px 26px -2px rgba(46,74,117,1);
	box-shadow: 		8px 5px 26px -2px rgba(46,74,117,1);
}

/***************************
	NAV - COLORS
 ***************************/

nav ul li a:visited,
nav ul li a:link,
nav ul li a:active{
	color: #e6745f;
}

nav ul li a.selected,
nav ul li a:hover{
	color: #fff;
}

#logo h1 {
	color: #e6745f;
	text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.75);
}

#logo h2 {
	color: #e6745f;
	text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.75);
}

/***************************
	INDEX PAGE - COLORS
 ***************************/

.index .caption{	
	color: #000;
	background-color: #fff;
	-webkit-box-shadow: 8px 9px 26px -2px rgba(119,119,119,1);
	-moz-box-shadow: 8px 9px 26px -2px rgba(119,119,119,1);
	box-shadow: 8px 9px 26px -2px rgba(119,119,119,1);
}
.index .caption:hover{	
	color: #fff;
	background-color: rgb(0, 0, 0, .7);
}

/* 
.index .caption .border,
.index .caption .border a,
.index .caption .border span{
	color:inherit;
}	 
*/

.index .text-container {
	color: #000;
	/* text-align: justify; */
	background-color: #000;
	border-top:    2px solid #fff;
	border-bottom: 2px solid #fff;
	-webkit-box-shadow: 8px 9px 26px -2px rgba(119,119,119,1);
	-moz-box-shadow: 8px 9px 26px -2px rgb(43, 28, 28);
	box-shadow: 8px 9px 26px -2px rgba(119,119,119,1);
}

.index .text-container .middle {
	max-width: 1000px;
	margin: 0 auto 0 auto;
}

/* .index .text-container .inner {} */

/***************************
	PORTFOLIO PAGE - COLORS
 ***************************/

/* .portfolio .wrapper #wrapper-inner{
	background-color: #fff;
	border: 1px solid #000;
} */

.gallery li{ background-color:#f5f5f5; }

.gallery li a p{ color:#000; }

/***************************
	CONTACT PAGE - COLORS
 ***************************/

.contact .wrapper #wrapper-inner{
    /* opacity: 0.5; */
	background-color: #fff;
	border: 1px solid #000;
}

.contact .wrapper #wrapper-inner h3{
	color:#000;
}

.contact .wrapper #wrapper-inner ul li a{
	color:#000;
}

/***************************
	RESUME PAGE - COLORS
 ***************************/

.resume .wrapper #wrapper-inner{
    opacity: 0.5;
	background-color: #fff;
	border: 1px solid #000;
}

.resume .wrapper #wrapper-inner h3{
	color:#000;
}

.resume .wrapper #wrapper-inner ul li a{
	color:#000;
}

/***************************
	FOOTER - COLORS
 ***************************/

 footer{
	background-color: #000;
	border-top: 2px solid #e6745f;
	color: #fff;
	-webkit-box-shadow: 8px -5px 26px -2px rgba(46,74,117,1);
	-moz-box-shadow: 	8px -5px 26px -2px rgba(46,74,117,1);
	box-shadow: 		8px -5px 26px -2px rgba(46,74,117,1);
}


/***************************
	BODY - IMAGES
 ***************************/

 body{
	background-image: url("../img/background-sky.png");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

body.index{
	background-image: none;
}

img{ max-width:100%; }

/***************************
	INDEX PAGE - IMAGES
 ***************************/

 .index .bigimg{
	min-height: 100%;
	position: relative;
	/* opacity: 0.65; */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
 }

.index .bgimg-1 { background-image: url("../img/img_parallax1.jpg"); }

.index .bgimg-2 { background-image: url("../img/img_parallax2.jpg"); }

.index .bgimg-3 { background-image: url("../img/img_parallax3.jpg"); }

.index .bgimg-4 { 
	background-image: url("../img/img_parallax4.jpg"); 
	background-position: center bottom;
}

/***************************
	BODY - FONTS
 ***************************/

body { font-family: 'open Sans', sans-serif; }

a{ text-decoration: none; 
	color: #000;
}

h1 {
	/* Headers are bold by default so we need to add normal to remove the bold */
	font-weight:normal;
	/* The amount of space between lines of text */
	line-height: 0.8em;
	font-size: 1.75em;
}

@media screen and (min-width: 660px){
	h1{ font-size: 2.5em;
		margin: 15px 0; 
	}
}

h2 {
	font-size: 0.75em;
	font-weight: normal;
	/* It is common to use negative margins when dealing with typography. This will pull the two headlines closer together. */
	margin: -5px 0 0;
}

@media screen and (min-width: 660px){
	h2{
		font-size: 0.825em;
		margin-bottom: 20px;
	}
}

h3{
	margin-top: 10px;
	margin-bottom: 10px;
}

/***************************
	NAV - FONTS
 ***************************/

nav ul li a{
	font-weight: 800;
	padding: 15px 10px;
}

/***************************
	LOGO - FONTS
 ***************************/

#logo {
	text-align: center;
	margin: 0;
}

#logo h1 { text-align: center; }

/***************************
	INDEX PAGE - FONTS
 ***************************/

 .index .caption {
	text-align: center;
  }

 .index h3,
 .index h2 {
	letter-spacing: 1px;
	/* text-transform: uppercase; */
	/* font: 20px "Lato", sans-serif; */
	text-align:center;
  }

  .index p {
	letter-spacing: 1px;
  }

/***************************
	CONTACT PAGE - FONTS
 ***************************/

.contact .wrapper #wrapper-inner h3{
	font-size: 25px;
}

.contact .wrapper #wrapper-inner ul li a{
	font-size: 16px;
}

/****************************
	RESUME PAGE - FONTS
*****************************/

.resume{
	font-size:18px;
	text-align: left;
}

.resume #wrapper{
	padding-top:130px;
}

.resume .wrapper a{
	text-decoration:underline;
	font-weight:400;
}

.resume .italics{font-style:italic}
.resume .underline{text-decoration:underline}

/****************************
	BODY
*****************************/

html, body {
	/* This is needed for the sticky footer to work*/
	height: 100%;
	/* This is needed for the sticky footer to work*/
	margin: 0;
	scroll-behavior: smooth;
}

body{
	display: none;
	/* These attributes are needed for the sticky footer to work*/
	/* display:flex; is commented out here and being set in the JS*/
	/* display: flex; */
  	flex-direction: column;
	margin: 0 auto;
}

#wrapper{
	max-width: 940px;
	margin: 0 auto;
	padding: 0 5% 15px;
	overflow: hidden;
	/* This is needed for the sticky footer to work */
	flex: 1 0 auto;

	background-image: url("../img/background-sky.png");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/****************************
	HEADER
*****************************/

header{
	z-index: 100;
	/* Float;left; or display:inline-block; or overflow:hidden; is needed for the desktop version to keep the header from collapsing */
	float:left;
	/* Floated elements are like in-line elements. Their auto width is the width of the child elements. So we need to add an explicit width of 100% */
	width:100%;
	/* Remove the header default margins but keep 30px on the bottom to separate the content */
	margin: 0 0 30px 0;
	/* Add 5px of padding to the top of the page */
	padding: 5px 0 0;
	position:fixed;
	margin: 0 auto;
}

/****************************
	NAV
*****************************/

/*phone and desktop*/
nav{
	text-align: center;
	padding: 10px 0;
	margin: 20px 0 20px;
}

/*large desktop*/
@media screen and (min-width: 660px){
	/*
	• float it to the right
	• make the font slightly larger
	• add some margin just on the right side
	• align all of the text to the right
	• increase the width to 45%
	*/
	nav{
		float: right;
		font-size: 1.125em;
		margin-right: 5%;
		text-align: right;
		width: 55%;
	}
}

/*all sizes*/
nav ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

/*all sizes*/
nav ul li{
	display: block;
}

/*large desktop*/
@media screen and (min-width: 660px){
	nav ul li{
		display: inline-block;
	}
}

/****************************
	LOGO
*****************************/

/*all sizes*/
#logo a{
	display:inline-block;
}

/*large desktop*/
@media screen and (min-width: 660px){
	#logo{
		float: left;
		margin-left: 5%;
		text-align: left;
		width: 35%;
	}
}

/****************************
	INDEX PAGE
*****************************/

.index #wrapper{ padding-top:150px; }

.index #wrapper .padding{ padding-top:30px; }

@media screen and (min-width: 480px){
	.index #wrapper .padding{
		padding-top:30px;
	}
}

.index .caption {
	position: absolute;
	top: 45%;
  	left: 50%;
  	transform: translate(-50%, -45%);
  	-ms-transform: translate(-50%, -45%);
	max-width: 605px;
	width: calc(100%-18px);
	text-align: center;
	border-radius: 7px;
	opacity: 0.7;
	padding: 20px;
}

.index .caption .border span,
.index .caption .border a {
	padding: 18px;
	font-size: 25px;
	letter-spacing: 5px;
	font-weight: 400;
}

.index .text-container {
	padding:50px 5%;
	background-image: url("../img/background-pasley.jpg");
	/* background-attachment: fixed; */
	background-position: center;
	background-repeat: repeat;
	/* opacity: 0.75; */
}

.index .text-container span.button{
	font-size: 26px;
	font-weight: 700;
	color: #000;
	background-color: transparent;
	padding: 10px;
	border-radius: 5px;
	display: table;
	margin:0 auto;
}

.index .text-container span.button:hover{
	color: #fff;
	background-color: rgb(0, 0, 0, .2);
}

.index .text-container span.button i{
	margin: 5px;
	padding: 6px;
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
	.index .bgimg-1, 
	.index .bgimg-2, 
	.index .bgimg-3,
	.index .bgimg-4 {
		background-attachment: scroll;
	}
}

/****************************
	PORTFOLIO PAGE
*****************************/

.portfolio .wrapper #wrapper-inner{
	padding: 16px 50px;
    /* font-size: 25px; */
    letter-spacing: 5px;
    font-weight: 400;
    /* opacity: 0.5; */
    border-radius: 7px;
}

a.back-button{
	margin-bottom: 25px;
	margin-top: 10px;
	display:block;
}

.gallery{
	margin:0;
	padding:0;
	list-style:none;
}

.gallery::after {
  content: "";
  clear: both;
  display: table;
}

.gallery li{
	float: left;
	width:90%;
	margin:2.5%;
	padding:2.5% 2.5% 0 2.5%;
	display: block;
}

/*desktop*/
@media screen and (min-width: 480px){
	.gallery li {
		/****************************
		3 * 5 = 15% (margins)
		100% - 15% = 85%
		85% / 3 = 28.3333333333333
		*****************************/
		width: 26%;
		padding:1% 1% 0 1%;
		border-radius:3px;

		-webkit-box-shadow: 8px 9px 26px -2px rgba(46,74,117,1);
		-moz-box-shadow: 8px 9px 26px -2px rgba(46,74,117,1);
		box-shadow: 8px 9px 26px -2px rgba(46,74,117,1);
	}

	/* .gallery li:nth-child(4n) {} */

	/****************************
	Every 4th list item in the
	gallery must be cleared so that
	it moves to the end of the
	row. Sometimes the items do not
	clear if there is a lot of text
	in the caption making a list item
	have a greater height than the
	others.

	(??? This stopped working once I added
	the float fix to the gallery divs ??? )
	*****************************/
	/*clear:left;*/
	
}

.gallery li a{
	cursor:pointer;
}

.gallery li a img{
	border:1px solid #939393;
	width:100%;
	height:160px;
}

.gallery li a p{
	/* ??? We zero the margin and use padding instead because margins tend to have unwanted effects inside a parent container that padding does not have ??? */
	margin:0;
	padding:5%;
	font-size: 0.75em;
	min-height:40px;
}

.gallery.websites li a p{
	min-height:45px;
}

.gallery.webmd-websites li a p{
	min-height:15px;
}

.gallery.merck-websites li a p{
	min-height:28px;
}

.gallery.api-demos li a p{
	min-height:93px;
}

.gallery.angularjs-demos li a p{
	min-height:15px;
}

.gallery.conference-panels li a p{
	min-height:15px;
}

.gallery.banner-ads li a p{
	min-height:15px;
}

.gallery.flash-projects li a p{
	min-height:15px;
}

.gallery.java-projects li a p{
	min-height:15px;
}

.gallery.webmd-banner-ads li a p{
	min-height:15px;
}

.gallery.webmd-square-ads li a p{
	min-height:15px;
}

.gallery.jh-landing-pages li a p{
	min-height:28px;
}

.gallery.utilities li a p{
	min-height:28px;
}

.gallery.demos li a p{
	min-height:15px;
}

.gallery.emails li a p{
	min-height:28px;
}

.gallery.animal-health li a p{
	min-height:28px;
}
.gallery.best-practices li a p{
	min-height:28px;
}
.gallery.tender1 li a p{
	min-height:28px;
}
.gallery.wintoday li a p{
	min-height:40px;
}
.gallery.cosmic li a p{
	min-height:28px;
}
.gallery.gtd li a p{
	min-height:40px;
}
.gallery.merck-gives-back li a p{
	min-height:40px;
}
.gallery.outpatient-engagement li a p{
	min-height:40px;
}
.gallery.cicoe li a p{
	min-height:40px;
}
.gallery.pneumococcal-and-zoster li a p{
	min-height:40px;
}

/****************************
	CONTACT PAGE
*****************************/

.contact .wrapper{
	padding-top:150px;
	display:flex;
	justify-content: center;
	align-items: center;
}

.contact .wrapper #wrapper-inner{
	margin-bottom: 100px;
	padding: 16px 50px;
    font-size: 25px;
    letter-spacing: 5px;
    font-weight: 400;
    opacity: 0.5;
    border-radius: 7px;
}

/*all sizes*/
.contact-info{
	list-style:none;
	padding: 0;
	margin: 0;
	font-size: 0.9em;
	margin-bottom: 20px;
}

.contact .footer{
	margin-top:0;
}

/* When adding images for stylistic purposes (rather than as content) you should add the images to the CSS rather than using the image tag. */

/*all sizes*/
.contact-info li a{
	display:block;
	min-height: 20px;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	padding-left: 30px;
	margin-left: 0;
}

/*all sizes*/
.contact-info li.phone a{
	background-image: url('../img/phone.png');
}

/*all sizes*/
.contact-info li.mail a{
	background-image: url('../img/mail.png');
}

/*all sizes*/
.contact-info li.twitter a{
	background-image: url('../img/twitter.png');
}

/****************************
	RESUME PAGE
*****************************/

.resume .wrapper #wrapper-inner{
	padding: 16px 50px;
    opacity: 0.7;
    border-radius: 7px;
}

/****************************
	FOOTER
*****************************/

/*all sizes*/
footer{
	font-size: 0.75em;
	text-align: center;
	clear: both;
	padding: 15px 0 10px;
	width:100%;
	/* For some reason I put this top margin on the footer. So I removed it.
	/* margin-top:60px; */

	/* This is needed for the sticky footer to work*/
	flex-shrink: 0;
}

footer.fixed{
	position: fixed;
	bottom:0;
}

/*all sizes*/
footer a img.facebook,
footer a img.twitter{
	width:36px;
	height:36px;
	padding:0;
	margin: 0;
}

/*all sizes*/
footer a img.linkedin{
	width:36px;
	height:36px;
	position: relative;
	top:3px;
	padding:0;
	margin: 0;
}

/****************************
	BR
*****************************/

/*phone*/
br#show-hide{
	display:none;
}

/*large desktop*/
@media screen and (min-width: 660px){
	br#show-hide{
		display:block;
	}
}

/*extra large desktop*/
@media screen and (min-width: 1095px){
	br#show-hide{
		display:none;
	}
}

/****************************
	Placeholder Image
*****************************/

.placeholder-image{
	display:inline-flex;
	justify-content: center;
	align-items: center;
	height:165px;
	width: 100%;
	background-color:#e6745f;
	padding:0;
	margin:0;
	border: 1px solid #555;
}
.placeholder-image p {
	width:50%;
	height:50%;
	text-align: center;
}