@import url("/css/noscript.css");
@import url("/css/customerrorpage.css");
@import url("/lib/bootstrap/css/bootstrap.min.css");
@import url("/lib/fontawesome/css/all.min.css");
@import url("/lib/devicons/devicon.css");
@import url("/lib/durandal/css/durandal.css");
@import url("/css/fonts/font_proxima.css");
@import url("/css/fonts/font_azonucleotide.css");
@import url("/css/fonts/font_azosansbold.css");
@import url("/css/fonts/font_opensans.css");
@import url("/css/fonts/font_weblysleek.css");
@import url("/css/fonts/font_ember.css");
@import url("/css/fonts/font_xyz.css");
@import url("/css/hovereffects/style_common.css");
@import url("/css/hovereffects/style10.css");
@import url("/css/common.css");
@import url("/css/animations.css");

@import url("/css/nav.css");
@import url("/css/news.css");
@import url("/css/history.css");
@import url("/css/resume.css");
@import url("/css/history.css");
@import url("/css/portfolio.css");
@import url("/css/subdomains.css");
@import url("/css/acknowledgments.css");
@import url("/css/footer.css");
@import url("/lib/amaranjs/amaran.min.css");
@import url("/lib/amaranjs/animate.min.css");
@import url("/css/liboverride/durandalmodals.css");
@import url("/css/liboverride/amaranoverrides.css");

#homecontainer,
.viewerror
{
    width: 100%;
    height: 100vh;
	margin: 0;
	padding: 0 !important;
	background: transparent none bottom center no-repeat fixed;
	background-size: cover;
	position: relative;
	color: #FFFFFF;
	border-top-width: 0;
}

.viewerror
{
	background-image: url('../images/bg1.jpg');
	color: #505050 !important;
}

#backgroundlayercontainer,
#backgroundlayercontainer > div
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	margin: 0;
	padding: 0;
	background: transparent none bottom center no-repeat fixed;
	background-size: cover;
}

#backgroundlayercontainer > div.visible
{
	-webkit-animation: fadein 2s ease-in 0s 1 normal forwards running;
	        animation: fadein 2s ease-in 0s 1 normal forwards running;
}

#backgroundlayercontainer > div.hidden,
.loadingfadeout
{
	-webkit-animation: fadeout 2s ease-out 2s 1 normal forwards running;
	        animation: fadeout 2s ease-out 2s 1 normal forwards running;
}

@media all and (min-width: 800px)
{
	body.bg1,
	#backgroundlayercontainer.bg1,
	#backgroundlayercontainer > div.bg1
	{
		background-image: url('../images/bg1.jpg');
		z-index: 20;
	}

	body.bg2,
	#backgroundlayercontainer.bg2,
	#backgroundlayercontainer > div.bg2
	{
		background-image: url('../images/bg2.jpg');
		z-index: 12;
	}

	body.bg3,
	#backgroundlayercontainer.bg3,
	#backgroundlayercontainer > div.bg3
	{
		background-image: url('../images/bg3.jpg');
		z-index: 13;
	}

	body.bg4,
	#backgroundlayercontainer.bg4,
	#backgroundlayercontainer > div.bg4
	{
		background-image: url('../images/bg4.jpg');
		z-index: 14;
	}

	body.bg5,
	#backgroundlayercontainer.bg5,
	#backgroundlayercontainer > div.bg5
	{
		background-image: url('../images/bg5.jpg');
		z-index: 15;
	}

	body.bg6,
	#backgroundlayercontainer.bg6,
	#backgroundlayercontainer > div.bg6
	{
		background-image: url('../images/bg6.jpg');
		z-index: 16;
	}

	body.bg7,
	#backgroundlayercontainer.bg7,
	#backgroundlayercontainer > div.bg7
	{
		background-image: url('../images/bg7.jpg');
		z-index: 17;
	}

	body.bg8,
	#backgroundlayercontainer.bg8,
	#backgroundlayercontainer > div.bg8
	{
		background-image: url('../images/bg8.jpg');
		z-index: 18;
	}

	body.bg9,
	#backgroundlayercontainer.bg9,
	#backgroundlayercontainer > div.bg9
	{
		background-image: url('../images/bg9.jpg');
		z-index: 19;
	}
}

@media all and (max-width: 799px)
{
	#backgroundlayercontainer.bg1,
	#backgroundlayercontainer > div.bg1,
	#backgroundlayercontainer.bg2,
	#backgroundlayercontainer > div.bg2,
	#backgroundlayercontainer.bg3,
	#backgroundlayercontainer > div.bg3,
	#backgroundlayercontainer.bg4,
	#backgroundlayercontainer > div.bg4,
	#backgroundlayercontainer.bg5,
	#backgroundlayercontainer > div.bg5,
	#backgroundlayercontainer.bg6,
	#backgroundlayercontainer > div.bg6,
	#backgroundlayercontainer.bg7,
	#backgroundlayercontainer > div.bg7,
	#backgroundlayercontainer.bg8,
	#backgroundlayercontainer > div.bg8,
	#backgroundlayercontainer.bg9,
	#backgroundlayercontainer > div.bg9
	{
		background-image: url('../images/bgmobile.jpg') !important;
	}
}

.viewerror [data-name="error"]
{
	border-top: none;
}

.viewerror [data-role="missingview"]
{
	border-top: none;
	background: rgba(255,255,255,0.20);
	padding: 1em;
	border-radius: 1em;
	display: block;
	width: 75%;
	margin: 2em auto;
}

.viewerror [data-name] :not(a)
{
	color: #FFFFFF !important;
	text-shadow: 0 0 2px #000000, 2px 2px 1px #000000;
}

.viewerror [data-name] a
{
	text-shadow: none;
}

.viewerror [data-name] a:hover
{
	color: #DEDEFF;
	text-shadow: 0 0 4px #000000, 0 0 3px #000000;
}

.viewerror [data-name] h2
{
	color: #EEF9FC !important;
}

.viewerror hr
{
	margin: -1em auto 0 auto;
	padding: 0.5em;
	background: transparent;
	border-bottom: 2px solid rgba(255,255,255,0.5);
	width: 80%;
}

.viewerror [data-name] h3
{
	font-weight: normal;
	text-align: center;
	width: 75%;
}

.viewerror .spacedout
{
	letter-spacing: 0;
}

#homecontainer #splashdisplay
{
	margin: auto;
	padding: 0;
	overflow: visible;
	position: absolute;
	top: 45%;
	left: 50%;
	z-index: 2000;
	-webkit-transform: translate(-50%,-50%);
	    -ms-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
}

#homecontainer #splashdisplay h1
{
	width: 475px;
	height: 407px;
	background: url('../images/fstamp.png') center center no-repeat;
	background-size: cover;
	text-indent: -99999px;
}

#homecontainer #splashdisplay #signature
{
	text-align: center;
	color: #CCCCCC;
	font-family: AzoNucleotide, AzoSans, sans-serif;
	background: rgba(255,255,255,0);
}

#homecontainer #splashdisplay #signature a
{
	color: #778899 !important;
}

#homecontainer #splashdisplay #signature a:hover
{
	color: #FFFFFF !important;
	text-decoration: none;
}

#homecontainer .reappear + #splashdisplay #signature
{
	color: #CCCCCC;
}

#homecontainer .reappear + #splashdisplay #signature a
{
	color: #DDEEFF !important;
}

#homecontainer #fadeablebackdrop
{
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(0.5, #30456C), color-stop(1, #000000));
	background: -webkit-linear-gradient(top, #FFFFFF 0%, #30456C 50%, #000000 100%);
	background: linear-gradient(to bottom, #FFFFFF 0%, #30456C 50%, #000000 100%);
	top: 0;
	left: 0;
	z-index: 1999;
	position: relative;
	width: 100%;
	min-height: 100vh;
	-webkit-transition: 0.25s all linear;
	        transition: 0.25s all linear;
}

@media all and (min-width: 640px) and (max-width: 859px)
{
	#homecontainer #signature
	{
		font-size: 0.85em;
	}
}

@media all and (max-width: 859px)
{
	#homecontainer #splashdisplay h1
	{
		width: 320px;
		height: 274px;
		background-image: url('../images/fstamp_mobile.png');
	}

	#homecontainer #splashdisplay #signature
	{
		color: #999999;
	}

	#homecontainer #splashdisplay #signature a
	{
		color: #AABBCC !important;
	}
}

@media all and (max-width: 449px)
{
	#homecontainer #splashdisplay
	{
		top: 45%;
	}
}

@media all and (min-width: 1900px)
{
	#homecontainer #splashdisplay h1
	{
		width: 700px;
		height: 600px;
		background-image: url('../images/fstamp_large.png');
	}
}

#homecontainer .directional,
#homecontainer .mobiledirectional
{
	position: absolute;
	bottom: 36px;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
			transform: translateX(-50%);
	-webkit-transition: 0.25s all ease;
	        transition: 0.25s all ease;
	left: 50%;
	margin: 0 auto 8px auto;
	padding: 0;
	display: inline-block;
	z-index: 8000;
}

@media all and (min-width: 640px) and (max-width: 859px)
{
	#homecontainer .directional,
	#homecontainer .mobiledirectional
	{
		bottom: 0;
		left: auto;
		right: 18px;
	}
}

#homecontainer .directional span,
#homecontainer .mobiledirectional span
{
	display: block;
	text-align: center;
	opacity: 0.75;
	filter: alpha(opacity=75);
	-webkit-transition: 0.25s all ease-in-out;
	        transition: 0.25s all ease-in-out;
	text-shadow: 1px 1px 1px #000000;
	-webkit-animation: opacitytoggle 1s ease-in-out 2s infinite alternate;
	animation: opacitytoggle 1s ease-in-out 2s infinite alternate;
}

@media all and (max-width: 1023px)
{
	#homecontainer .directional
	{
		opacity: 0;
		filter: alpha(opacity=0);
	}

	#homecontainer .mobiledirectional
	{
		opacity: 1;
		filter: alpha(opacity=100);
	}
}

@media all and (min-width: 1024px)
{
	#homecontainer .directional
	{
		opacity: 1;
		filter: alpha(opacity=100);
	}

	#homecontainer .mobiledirectional
	{
		opacity: 0;
		filter: alpha(opacity=0);
	}
}

.disappear,
.hiddenarrow
{
	opacity: 0;
	filter: alpha(opacity=0);
}

.reappear
{
	opacity: 0.75;
	filter: alpha(opacity=75);
}

/*********************<[ AWARDS ]>*********************/

.awardbannercontainer,
.awardbannercontainer.mobile
{

	position: absolute;
	top: 0;
	z-index: 9999999;
	transition: 0.25s all ease;
}

.awardbannercontainer
{
	left: 0;
}

.awardbannercontainer.mobile
{
	right: 0;
}

.awardbannercontainer .bestcssaward,
.awardbannercontainer.mobile .bestcssaward
{
	width: 106px;
	height: 92px;
	position: absolute;
	top: 0;
	z-index: 9999999;
	text-indent:-9999px;
	background-color: transparent;
	background-repeat: no-repeat;
	transition: 0.25s all ease-in-out;
}

.awardbannercontainer.mobile .bestcssaward
{
	background-image: url('/images/awards/gray-right.png');
	right: 0;
	left: auto;
}

.awardbannercontainer .bestcssaward
{
	background-image: url('/images/awards/gray-left.png');
	left: 0;
	right: auto;
}

.awardbannercontainer .csslightaward,
.awardbannercontainer.mobile .csslightaward
{
	width: 106px;
	/*height: 92px;*/
	top: 60px;
	position: absolute;
	z-index: 9999999;
	text-indent:-9999px;
	background-color: transparent;
	background-repeat: no-repeat;
	transition: 0.25s all ease-in-out;
}

.awardbannercontainer.mobile .csslightaward
{
	background-image: url('/images/awards/small-csslight-ribbon-right.png');
	right: -22px;
	left: auto;
}

.awardbannercontainer .csslightaward
{
	background-image: url('/images/awards/small-csslight-ribbon-left.png');
	left: 0;
	right: auto;
}