/* General Rules */
.body-styling
{
	margin: 0; 
	font-family: 'Open Sans', sans-serif; 
}
a:hover,
a:focus,
a:visited
{
	text-decoration: none;
}

/* Header + Navbar */

#main-header
{
	height: auto;
}
.header-overlay
{
    height: 100%; 
    width: 100%; 
}
.navbar-nav > li > a
{
	color: white !important;
}
.navbar-inverse .navbar-brand
{
	color: white;
	font-family: inherit;
}
.header-image-text
{
	text-align: center; 
	letter-spacing: 3px; 
	font-weight: 300;
	margin-top: 0px;
	animation: fadeIn 12s;
	-webkit-animation: fadeIn 12s;
}
.header-image-container
{
	margin: 50px -15px 25px -15px;
}
.header-image-positioning
{
	display: block;
	margin-left: auto;
	margin-right: auto;	
	padding: 25px 0 40px 0;
	max-width: 90%;
	height: auto;	
	animation: fadeInExpand 6s;
	-webkit-animation: fadeInExpand 6s;	
}
.proj-link-wrapper
{
	margin: 20px 0;
	text-align: center;
}
.head-proj-button
{
	border-radius: 10px;
	border: 0px solid transparent;
	box-shadow: 0px 7px 0px #71b5f7;
	background-color: #0d6bff;
	padding: 15px;
	margin: 0 auto 5px auto;
	color: white;
	font-size: 1.3em;
	text-overflow: clip;
	display: block;	
	outline: none !important;
	width: 300px;
}
.head-proj-button:active
{
	background-color: #0a3c95;
	box-shadow: 0px 3px 0px #568ec6;
	transform: translateY(4px);
	-webkit-transform: translateY(4px);
	-ms-transform: translateY(4px);
	-moz-transform: translateY(4px);
	
}
.head-proj-button-link:visited,
.head-proj-button-link:active,
.head-proj-button-link:hover
{
	color: white !important;
	text-decoration: none;
}

/* Header Animation Keyframes */
@keyframes fadeIn
{
	0% {opacity: 0;}
	50% {opacity: 0.01; transform: scaleX(0.8)}
	100% {opacity: 1;}
}
@-moz-keyframes fadeIn
{
	0% {opacity: 0;}
	50% {opacity: 0.01; transform: scaleX(0.8); -moz-transform: scaleX(0.8);}
	100% {opacity: 1;}
}
@-webkit-keyframes fadeIn
{
	0% {opacity: 0;}
	50% {opacity: 0.01; transform: scaleX(0.8); -webkit-transform: scaleX(0.8);}
	100% {opacity: 1;}
}
@-o-keyframes fadeIn
{
	0% {opacity: 0;}
	50% {opacity: 0.01; transform: scaleX(0.8); -o-transform: scaleX(0.8);}
	100% {opacity: 1;}
}

@keyframes fadeInExpand
{
	0% {opacity: 0; transform: translateY(-100%) scale(0, 0);}
	20% {opacity: 0.05; transform: translateY(-50%) scale(0.25, 0.25); }
	50% {opacity: 0.25; transform: translateY(-25%) scale(0.5, 0.5); }	
	70% {opacity: 0.45; transform: translateY(0%) scale(0.65, 0.65) ; }
	100% {opacity: 1; transform: scale(1, 1);}
}
@-moz-keyframes fadeInExpand
{
	0% {opacity: 0; -moz-transform:  translateY(-100%) scale(0, 0); transform: translateY(-100%) scale(0, 0);}
	20% {opacity: 0.05; -moz-transform: translateY(-50%) scale(0.25, 0.25) ; transform: translateY(-50%) scale(0.25, 0.25); }
	50% {opacity: 0.25; -moz-transform: translateY(-25%) scale(0.5, 0.5) ; transform: translateY(-25%) scale(0.5, 0.5); }	
	70% {opacity: 0.45; -moz-transform: translateY(0%) scale(0.65, 0.65) ; transform: translateY(0%) scale(0.65, 0.65) ; }
	100% {opacity: 1; -moz-transform: scale(1, 1); transform: scale(1, 1);}
}
@-webkit-keyframes fadeInExpand
{
	0% {opacity: 0; -webkit-transform:  translateY(-100%) scale(0, 0); transform: translateY(-100%) scale(0, 0);}
	20% {opacity: 0.05; -webkit-transform: translateY(-50%) scale(0.25, 0.25) ; transform: translateY(-50%) scale(0.25, 0.25); }
	50% {opacity: 0.25; -webkit-transform: translateY(-25%) scale(0.5, 0.5) ; transform: translateY(-25%) scale(0.5, 0.5); }	
	70% {opacity: 0.45; -webkit-transform: translateY(0%) scale(0.65, 0.65) ; transform: translateY(0%) scale(0.65, 0.65) ; }
	100% {opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1);}
}

@-o-keyframes fadeInExpand
{
	0% {opacity: 0; -o-transform:  translateY(-100%) scale(0, 0); transform: translateY(-100%) scale(0, 0);}
	20% {opacity: 0.05; -o-transform: translateY(-50%) scale(0.25, 0.25) ; transform: translateY(-50%) scale(0.25, 0.25); }
	50% {opacity: 0.25; -o-transform: translateY(-25%) scale(0.5, 0.5) ; transform: translateY(-25%) scale(0.5, 0.5); }	
	70% {opacity: 0.45; -o-transform: translateY(0%) scale(0.65, 0.65) ; transform: translateY(0%) scale(0.65, 0.65) ; }
	100% {opacity: 1; -o-transform: scale(1, 1); transform: scale(1, 1);}
}

/* About Section */
.about-bg
{
	background: #dedcdc;
}
.about-row-top
{
	padding: 0;
	margin-top: 20px;
}
.about-row
{
	padding: 0;
}
.about-text
{
	font-size: 1.1em;
	padding-bottom: 20px;
	margin-bottom: 45px;
}
/* Resume & Projects Section */
.res-section-padding
{
	padding-top: 20px; 
	padding-bottom: 55px;
}
.res-sec-head-text
{
    font-weight: 700;
    font-size: 1.75em;
    margin-bottom: 5px;	
}
.res-lead
{
    font-weight: 700; 
    border-bottom: 1px solid black;
    font-size: 1.25em;
    margin-bottom: 5px;
}
.res-lead-no-border
{   
    font-weight: 700;
    font-size: 1.25em;
	margin-bottom: 0px;
}
.res-text-top-border
{
	border-top: 2px solid black; 
	padding-top: 10px;
}
.job-info-block
{
	margin: 2px 0;
}

.res-edu-text-margin
{
	margin: 0;
}

/* Section Headers */

.section-header-text
{
    text-align: center; 
    padding-top: 5px; 
    padding-bottom: 10px; 
    font-weight: 700;
}
/* Project section */
.proj-header
{
	height: 325px;
	width: 100%;
	background: url(../img/proj-top.png);
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	background-repeat: none;
}
.proj-head-second
{
	font-style: italic;
	text-align: center;
}
.proj-container
{
	padding-top: 20px !important;
	padding-bottom: 25px !important; 
	background-color: #dedcdc;
}
.project-links-wrapper
{
	margin: 0 auto 50px; 
	text-align: center;
	height: auto;
}
.project-link-col
{
	height: 100%; 	
	margin: 40px 45px; 
	display: inline-block; 
	color: white; 
	padding: 0;
	vertical-align: top;
}
.proj-st-image
{
	height: 300px;
	width: 300px;
	max-width: 400px;
	background: url(../img/st-logo.png) no-repeat;
	background-size: 100%;
	background-origin: content-box;
}
.proj-alt-image
{
	height: 300px;
	width: 300px;
	max-width: 400px;
	background: url(../img/alt-logo.png) no-repeat;
	background-size: 100%;
	background-origin: content-box;
}
.proj-sd-image
{
	height: 300px;
	width: 300px;
	max-width: 400px;
	background: url(../img/sd-logo.png) no-repeat;
	background-size: 100%;
	background-origin: content-box;
}
.proj-st-image:hover .proj-link-overlay,
.proj-sd-image:hover .proj-link-overlay,
.proj-alt-image:hover .proj-link-overlay
{
	opacity: 1;	
}
.proj-link-overlay
{
	background: rgba(0, 0, 0, 0.85);
	color: white;
	transition: opacity 0.8s;
	position: relative;
	height: 100%;
	width: 100%;
	top: 0px;
	opacity: 0;
	padding: 25px;
}
.proj-overlay-title
{
	font-size: 1.7em;
	font-weight: 700;
	margin-top: 35px;
}
.proj-overlay-desc
{
	margin-top: 15px;
}
.project-desc
{
	background: #414141;
	width: 300px;
	padding: 20px;
	font-size: 1.59em;
	display: none;
}
.project-link:visited
{
	color:inherit;
}
.project-link:hover
{
	text-decoration: none;
}

details summary
{
	font-weight: 700;	
	margin-bottom: 5px;
	letter-spacing: -1px;
}
details summary:active
{
	border: none;
}


/* Media Queries */
@media (max-width: 1170px) and (min-height: 1081px)
{

	.mobile-text-align
	{
		text-align: justify;
	}
	.mobile-margins
	{
		margin: 0 30px;				
		padding: 0;		
	}
	.project-link-col
	{	
		height: 100%; 	
		margin: 40px 150px !important; 
		display: inline-block; 
		color: white; 
		padding: 0;
		vertical-align: top;
	}
	details summary
	{
		font-weight: 700;
		font-size: 1.3em;
		margin-bottom: 5px;
		letter-spacing: -1px;
	}
	.project-desc
	{
		width: 400px;
		display: block;
	}
	.proj-images
	{
		height: 400px;
		width: 400px;
	}
	.proj-st-image
	{
		height: 400px;
		width: 400px;
		max-width: 400px;
		background: url(../img/st-logo.png) no-repeat;
		background-size: 100%;
		background-origin: content-box;
	}
	.proj-alt-image
	{
		height: 400px;
		width: 400px;
		max-width: 400px;
		background: url(../img/alt-logo.png) no-repeat;
		background-size: 100%;
		background-origin: content-box;
	}
	.proj-sd-image
	{
		height: 400px;
		width: 400px;
		max-width: 400px;
		background: url(../img/sd-logo.png) no-repeat;
		background-size: 100%;
		background-origin: content-box;
	}
	.proj-st-image, 
	.proj-sd-image,
	.proj-alt-image
	{
		pointer-events: none;
	}
}

@media (min-width: 686px) and (max-width: 1170px) and (max-height: 1080px)
{
	.header-pic
	{
		display: none;
	}
	.header-image-pos
	{		
		text-align: center;
		position: absolute;
		top: 35%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
		left: 0;
		right: 0;
	}	
	#header-mobile-pic
	{
		height: 175px; 
		width: 175px;
		display: inline !important;
	}
	.mobile-margins
	{
		margin: 0 30px;				
		padding: 0;		
	}
	.mobile-text-align
	{
		text-align: justify;
	}
	.project-link-col
	{	
		height: 100%; 	
		margin: 40px 150px; 
		display: inline-block; 
		color: white; 
		padding: 0;
		vertical-align: top;
	}	
	.proj-images
	{
		height: 400px;
		width: 400px;
	}
	.project-desc
	{
		width: 400px;
		display: block;
	}
	.proj-st-image
	{
		height: 400px;
		width: 400px;
		max-width: 400px;
		background: url(../img/st-logo.png) no-repeat;
		background-size: 100%;
		background-origin: content-box;
	}
	.proj-alt-image
	{
		height: 400px;
		width: 400px;
		max-width: 400px;
		background: url(../img/alt-logo.png) no-repeat;
		background-size: 100%;
		background-origin: content-box;
	}
	.proj-sd-image
	{
		height: 400px;
		width: 400px;
		max-width: 400px;
		background: url(../img/sd-logo.png) no-repeat;
		background-size: 100%;
		background-origin: content-box;
	}
	.proj-st-image, 
	.proj-sd-image,
	.proj-alt-image
	{
		pointer-events: none;
	}
}

@media (max-width: 1170px) and (max-height: 799px)
{

	.mobile-margins
	{
		margin: 0 30px;				
		padding: 0;		
	}
	.mobile-text-align
	{
		text-align: justify;
	}
	.project-link-col
	{	
		height: 100%; 	
		margin: 40px 100px; 
		display: inline-block; 
		color: white; 
		padding: 0;
		vertical-align: top;
	}
	.proj-st-image
	{
		height: 400px;
		width: 400px;
		max-width: 400px;
		background: url(../img/st-logo.png) no-repeat;
		background-size: 100%;
		background-origin: content-box;
	}
	.proj-alt-image
	{
		height: 400px;
		width: 400px;
		max-width: 400px;
		background: url(../img/alt-logo.png) no-repeat;
		background-size: 100%;
		background-origin: content-box;
	}
	.proj-sd-image
	{
		height: 400px;
		width: 400px;
		max-width: 400px;
		background: url(../img/sd-logo.png) no-repeat;
		background-size: 100%;
		background-origin: content-box;
	}
	.proj-st-image, 
	.proj-sd-image,
	.proj-alt-image
	{
		pointer-events: none;
	}

}
@media (max-width: 769px)
{
	.proj-st-image,
	.proj-sd-image,
	.proj-alt-image
	{
		pointer-events: none;
	}

	.proj-header
	{
		display: none;
	}
}
@media (max-width: 685px)
{

	.project-link-col
	{	
		height: 100%; 	
		margin: 40px 100px; 
		display: inline-block; 
		color: white; 
		padding: 0;
		vertical-align: top;
	}	
	.project-desc
	{
		width: 250px;
		padding: 15px;
		font-size: 1.5em;
		display: block;
	}	
	.proj-images
	{
		height: 250px;
		width: 250px;
	}
	.about-text
	{
		padding: 0 20px 20px 20px;
	}
	.proj-st-image
	{
		height: 250px;
		width: 250px;
		max-width: 400px;
		background: url(../img/st-logo.png) no-repeat;
		background-size: 100%;
		background-origin: content-box;
	}
	.proj-alt-image
	{
		height: 250px;
		width: 250px;
		max-width: 400px;
		background: url(../img/alt-logo.png) no-repeat;
		background-size: 100%;
		background-origin: content-box;
	}
	.proj-sd-image
	{
		height: 250px;
		width: 250px;
		max-width: 400px;
		background: url(../img/sd-logo.png) no-repeat;
		background-size: 100%;
		background-origin: content-box;
	}
	.proj-st-image:hover .proj-link-overlay,
	.proj-sd-image:hover .proj-link-overlay,
	.proj-alt-image:hover .proj-link-overlay
	{
		pointer-events: none;
	}

}
@media (max-width: 512px)
{
	.project-link-col
	{	
		height: 100%; 	
		margin: 40px 0px; 
		display: inline-block; 
		color: white; 
		padding: 0;
		vertical-align: top;
	}	
	.proj-st-image,
	.proj-sd-image,
	.proj-alt-image
	{
		pointer-events: none;
	}
}