/* HTML Elements */

html, body {
	height: 100%;
}


html {
	overflow-y: hidden;
}
body {
	background: url("../images/feng-shui-1960783_1920.jpg") top left no-repeat;
	/*background-attachment: fixed;*/
	background-size:  cover;
	overflow-y: scroll;
}


footer {
	background: #ccc;
	position: relative;
	bottom: 0;
	text-align:  center;
	height: 100px;
	z-index: 1;
}

footer p {
	position: absolute;
	width: 100%;
	height: 30%;
	top: 35%;
	
}

p, li {
	font-size: 1.8rem;
	/*padding-bottom: 2.5rem;*/
	/*padding-top: .75rem;*/
}

img {
	position: relative;
}

/* Skeleton Framework Over-rides */

.container {
	padding: 20px 0px 20px 0px;
	margin: auto;		
	width: 100%;
}

/* Page container elements */

/* Need a better name for this class - is main page content; everything other than footer. */
#main {
	background-color: rgba(35,48,59, 0.8);
	min-height:  400px;
}


/*Added wrapper div so that footer can be placed properly */
.wrapper {
	min-height: 800px;
	
}


/* Landing (index) page hero section */
#hero {
	color: white;
	text-align: center;
	padding: 20px 0;
}

#portfolio {
	margin: 0 auto;	
	width: 95%;
	max-width: 960px;
	height: auto;
	padding: 10px;
	overflow: auto;
	text-align: center;
}

#writing-portfolio {
	padding-top: 40px;
}

.portfolio-box {
	float: none;
	display: inline-block;
	text-align: center;
	min-width: 150px;
	max-width: 500px;
	/*border: 4px solid black;*/
	margin: 1%;
	width: 32%;
}


.portfolio-box img {
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	z-index: -3;
}


#bio {
	background-color: rgba(129,211,241, 0.75);
	/*min-height: 200px;*/
	text-align: center;
	vertical-align: center;
	padding: 40px;
}

#bio p, #bio li {
	width: 60%;
	margin: 0 auto;
	max-width:  800px;
	min-width: 300px;
}


.contact {
	font-size: 12px;
}

.contact span {
	margin: 10px 0;
	padding: 5px;
	/*font-size: 32px;*/
}

#bio p i.fa-circle {
	color: #006b92;
}

.technical-writing-banner {
	background: rgba(27,70,103,0.7);
	height: 100px;
	padding-top: 20px;
}

/* Text */

.text-large{
	font-size: 3rem;
}

.lowercase {
	text-transform:  lowercase;
}

.uppercase {
	text-transform: uppercase;
}

.centered {
	text-align: center;
}

.title-text {
	display: table-cell;
	vertical-align: middle;
}

/* Layout control */

.centered-div {
	margin: 0 auto;	
	/*border: 3px solid green;*/
	width: 95%;
	max-width: 960px;
	height: auto;
	padding: 10px;
	overflow: auto;
	text-align: center;
}

.title-div {
	display: table;
	height: 100px;
	width: 100%;
	text-align: center;
}


@media (min-width: 550px) {
	.fluid_columns{
		-webkit-column-count: 3; /* Chrome, Safari, Opera */
		-moz-column-count: 3; /* Firefox */
		column-count: 3;

	}
}



@media (max-width: 549px){
/* http://css-discuss.incutio.com/wiki/Centering_Block_Element*/

	footer p{
		height: 60px;
		width: 300px;
		left: 50%;
		top: 50%;
		margin-left: -150px;
		margin-top: -30px;
	}


	.wrapper {
		min-height: 400px;
	}

	.portfolio-box {
		width: 300px;
		height: 300px;
		margin: 10px;
		padding: 0;


	}

	.portfolio-box:hover figcaption {
		display: none;
		z-index: -10;
	}

	.portfolio-box figcaption {
		font-size:  1.2em;
		margin-top: -20%;
		padding: 4%;
		/*margin-top: -38px;*/
	}

	#portfolio-design a:hover, #portfolio-usability a:hover, #portfolio-writing a:hover {
		/*background: none;*/
		background-size: 300px;
		overflow: none;
	}

	#portfolio-design a:active {
		background-image: url("../images/design01-600.jpg") no-repeat center;
		background-size: 300px;
	}

}

@media (min-width: 1000px) {
	.portfolio-box figcaption {
		font-size:  1.2em;
		margin-top: -21%;
		padding: 4%;
		/*padding: 2px;
		padding-bottom: 0;*/
	}

	#portfolio-design a:hover, #portfolio-usability a:hover, #portfolio-writing a:hover {
		background-size: 280px;
	}
}