/* ================================= 
  Base Element Styles
==================================== */

* {
	box-sizing: border-box;
}
body {
	font: 1em/1.5 'Open Sans', sans-serif;
	color: #373737;
	background: #eaeaea;
	margin: 0;
}
a {
	text-decoration: none;
}
h1,
h2,
h3 {
	text-transform: uppercase;
}
h2 {
	font-size: 1.125em;
	color: #4a89ca;
	font-weight: 600;
	margin: 0;
}
h3 {
	font-size: 1.3em;
	line-height: 1.25em;
	margin-top: .85em;
	margin-bottom: .5em;
}
p {
	font-size: .875em;
	line-height: 1.4;
	margin: 0 0 1.5em;
}

img {
    max-width: 100%
}

/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Layout Containers ---- */

.container-blah {
	width: 94.02985075%;
	max-width: 1260px;
	background: #fff;
	margin: auto;
}
.main-header {
	text-align: center;
	padding: 2.0em 0 .5em 0;
}
#snow-target {
    position: relative;
    overflow: hidden;
}
.photo-container {
	text-align: center;
	margin-bottom: 4em;
}
.grid {
/*    padding-left: 18px;*/
    margin: 0 auto;
}
.grid:after {
    content: '';
    display: block;
    clear: both;
}
.grid-item {
    width: 350px;
    margin-bottom: 10px;
}
.original-pos {
	height: 100%;
	display: block;
	line-height: 0;
}
.navbar-fixed-bottom {
    background-color: white;
    padding-top: 15px;
}
.contact {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.contact img {
    flex-flow: 1;
    width: 90%;
    padding: 1em;
}
.contact #primary {
    flex-grow: 1;
    padding: 1em;
}
.contact #secondary li {
    flex-grow: 1;
    text-align: left;
}


/* ---- Page Elements ---- */

.name {
	font-size: 1.65em;
	font-weight: 800;
	margin: 0 0 1.5em;
	line-height: 1;
}
.name span {
	font-weight: 300;
	margin-left: -7px;
}
.logo {
	width: 45px;
	margin-bottom: .4em;
	cursor: pointer;
}
.photo {
	position: relative;
	line-height: 0;
	margin-bottom: 2em;
	overflow: hidden;
}
.photo-container img {
 	max-width: 100%;
}

.about {
    text-align: center;
    align-content: center;
    padding: .2em 0;
}
.about-image {
    max-width: 70%;
    padding: 2em;
    margin-top: -20px;
    margin-bottom: 5px;
}
.about-me {
    max-width: 500px;
    font-size: 15px;
}
.under-construction {
    text-align: center;
    align-content: center;
    padding: .2em 0;
}
.under-construction img {
    max-width: 90%;
    padding: 2em;
    margin-top: -20px;
}
.main-index {
    text-align: center;
    align-content: center;
    padding: 2.0em 0;
}
.main-index img {
    max-width: 100%;
    padding: 2em;
    margin-top: -20px;
}
.return-button {
    align-content: center;
    text-align: center;
}
.button {
	color: #4a89ca;
	width: 60%;
	font-weight: 700;
	display: block;
	text-decoration: none;
	text-transform: uppercase;
	padding: 10px 0;
	border: 2px solid #4a89ca;
	border-radius: .5em;
	margin: 4em auto;
}

.main-footer {
    text-align: center;
    align-content: center;
    padding: 2em 0;
}
.social-icon {
    max-width: 35px;
}
/*
#linkedin_icon {
    max-width: 60px;
}
*/

/* ---- Photo Overlay ---- */

.photo-overlay {
	color: #fff;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0; 
	left: 0;
	padding-left: 20px;
	padding-right: 20px;

	display: flex; /* For centering text inside .photo-overlay */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: rgba(0,0,0, .5);
}
.photo-overlay h3 {
	margin-top: 0;
}
.slide .button {
	color: #fff;
	padding: 20px 0;
	background: rgba(74,137,202, .8);
	margin: 0;
}
.slide .photo-overlay {
	opacity: 1;
	background: #345d88;
}
/* ---- Float clearfix ---- */

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

/* ================================= 
  Media Queries
==================================== */

@media (min-width: 0) and (max-width: 768px) {
	.container-blah {
		padding: 0 1.225em 2.5em;
	}
}
@media (min-width: 769px) {
	.container-blah {
		padding: 0 2.25em 3em;
	}
	.photo-container {
		width: 48%;
		float: left;
		margin-left: 4%;
	}
    .button-container {
		width: 48%;
        display: inline-block;
        align-content: center;
/*        padding-left: 60px;*/
/*        float: left;*/
	}
    .about img {
    max-width: 60%;
    padding: 2em;
    margin-top: -20px;
    }
    .under-construction img {
    max-width: 60%;
    padding: 2em;
    margin-top: -20px;
    }
    .button {
	width: 30%;
}
}
@media (min-width: 769px) and (max-width: 1024px) { 
	.photo-container:nth-child(2n+1) {
		margin-left: 0;
		clear: left;
	}
    .button-container:nth-child(2n+1) {
		margin-left: 20px;
		clear: left;
	}
}
@media (min-width: 1025px) { 
	.photo-container {
		width: 30.63973064%;
	}
	.photo-container:nth-child(3n+1) {
		margin-left: 0;
		clear: left;
	}
    .button-container {
		width: 30.63973064%;
	}
	.button-container:nth-child(3n+1) {
		margin-left: 0;
		clear: left;
	}
    .about img {
    max-width: 40%;
    padding: 1em;
    margin-top: -20px;
    }
    .under-construction img {
    max-width: 50%;
    padding: 1em;
    margin-top: -20px;
    }
    .button {
	width: 20%;
    }
    .contact {
    display: flex;
    flex-direction: row;
    padding: 0 5em 0 5em;
    }

}