@keyframes fadeIn 	{ from { opacity:	0;		} to { opacity:		1;		} }
@keyframes fadeOut 	{ from { opacity:	1;		} to { opacity:		0;		} }
@keyframes menuUp 	{ from { top:		100%;	} to { top:			67%;	} }
@keyframes menuUp2 	{ from { top:		100%;	} to { top:			0%;		} }

:root
{
		--tecsfont1:		'Raleway', sans-serif;
}


/* ----------------   HTML   -------------------*/


HTML
	{
		height:				100%;
		margin: 			0px;
		padding:			0px;
		overflow:			hidden;
	}


BODY
	{
		height:				100%;
		background-color: 	#FFFFFF;
		margin: 			0px;
		padding:			0px;
		overflow:			hidden;
		-webkit-font-smoothing:antialiased;
	}


A
	{
		outline: 			none;
		margin: 			0px;
	}


DIV
	{
		position:				absolute;
		overflow: 				hidden;
		display: 				block;
		margin:					0px;
		padding:				0px;
	}


FORM
	{
		margin: 			0px;
	}


IMG
	{
		display: 				block;
		margin: 				0px;
		padding:				0px;
	}


/* ---------------   DIVs   -------------------*/


#backmid
	{
		background-color: 		#FFFFFF;
		overflow:				hidden;
		background-image:		url(images/backmid1.png);
		background-attachment:	fixed;
		background-repeat:		none;
		background-position:	top;
		border-top:				solid 1px #0070C0;
	}


#backbot
	{
		background-color: 		#FFFFFF;
		overflow:				hidden;
		background-image:		url(images/backbot1.png);
		background-attachment:	fixed;
		background-repeat:		repeat;
		background-position:	top;
		border-top:				solid 1px #0070C0;
	}


#menu
	{
		background-color: 		#FFFFFF;
	}


#menulogo
	{
		width:					var(--mainwidth);
		height:					var(--value100);
		float:					left;
	}


#menublock
	{
		position:				absolute;
		left:					0px;
		top:					var(--menuheight);
		width:					calc(var(--mainwidth) + 2);
		height:					var(--menubh);
		overflow: 				hidden;
		display: 				table;
		margin: 				0 auto;
		white-space:			nowrap;
		float:					inherit;

		animation:				menuUp ease 1;	 	/* call our keyframe named fadeIn, use animattion ease and repeat it only 1 time */
		animation-fill-mode:	forwards;  			/* this makes sure that after animation is done we remain at the last keyframe value */
		animation-duration:		3s;
		animation-delay: 		1s;
	}


#menublock > #about
	{
		top:					var(--menuheight);
		animation:				menuUp2 ease 1;	 	/* call our keyframe named fadeIn, use animattion ease and repeat it only 1 time */
		animation-fill-mode:	forwards;  			/* this makes sure that after animation is done we remain at the last keyframe value */
		animation-duration:		3s;
		animation-delay: 		1.5s;
	}


#menublock > #services
	{
		top:					var(--menuheight);
		animation:				menuUp2 ease 1;	 	/* call our keyframe named fadeIn, use animattion ease and repeat it only 1 time */
		animation-fill-mode:	forwards;  			/* this makes sure that after animation is done we remain at the last keyframe value */
		animation-duration:		3s;
		animation-delay: 		2s;
	}


#menublock > #experience
	{
		top:					var(--menuheight);
		animation:				menuUp2 ease 1;	 	/* call our keyframe named fadeIn, use animattion ease and repeat it only 1 time */
		animation-fill-mode:	forwards;  			/* this makes sure that after animation is done we remain at the last keyframe value */
		animation-duration:		3s;
		animation-delay: 		2.5s;
	}


#menublock > #contact
	{
		top:					var(--menuheight);
		animation:				menuUp2 ease 1;	 	/* call our keyframe named fadeIn, use animattion ease and repeat it only 1 time */
		animation-fill-mode:	forwards;  			/* this makes sure that after animation is done we remain at the last keyframe value */
		animation-duration:		3s;
		animation-delay: 		3s;
	}


#pager
	{
		background-color: 		#FFFFFF;
		border-top:				solid 1px #0070C0;
		position: 				absolute;
		overflow-y:				visible;
		display:				block;
		-webkit-overflow-scrolling: touch;
	}


#pager_home, #pager_about, #pager_services, #pager_experience, #pager_contact
	{
		position: 				absolute;
		left:					0px;
		top:					0px;
		overflow:				visible;
	}


#para1
	{
		position:				absolute;
		left:					var(--value50);
		top:					calc(var(--pic1height) + var(--value50));
		width:					var(--para1width);
		padding-bottom:			var(--value50);
	}


#para2
	{
		position:				absolute;
		left:					var(--value50);
		top:					var(--value50);
		width:					var(--para1width);
		padding-bottom:			var(--value50);
	}


#pic1
	{
		width:					var(--mainwidth);
		height:					var(--pic1height);
	}


#footer
	{
		background-color: 		#CCCCCC;
		border-top:				solid 1px #0070C0;
	}



/* ----------------   CSS   -------------------*/



/* the images are positioned absolutely to stack. opacity transitions are animated. */
.ambient img 
	{ 
	  display: 				block;
	  position: 			absolute; 
	  width: 				100%;
	  height: 				auto;
	  opacity: 				0;
	
		-webkit-transition: -webkit-opacity 3s;
			-ms-transition:     -ms-opacity 3s;
			 -o-transition:      -o-opacity 3s;
				transition:         opacity 3s;
	}


/* the first image is the current slide. it's faded in. */
.ambient img:first-child 
	{ 
	  z-index: 			2; /* frontmost */
	  filter:			alpha(opacity=100);	/* Internet Explorer       */
	  opacity: 			1;               	/* newer Mozilla and CSS-3 */
	}


/* the last image is the previous slide. it's behind the current slide and it's faded over. */
.ambient img:last-child 
	{
	  z-index: 			1; /* behind current slide */
	  filter:			alpha(opacity=100);	/* Internet Explorer       */
	  opacity: 			1;               	/* newer Mozilla and CSS-3 */
	}


.button1
	{
		color: 					#666666;
		background-color:		#CCCCCC;
		border: 				none;
		font-family: 			var(--tecsfont1);
		font-size: 				var(--text1fs);
		font-weight: 			normal;
		height:					calc(var(--text1lh) * 1.2); /* Make the height just a scooch bigger to stand out */
		vertical-align: 		middle;
		padding:				var(--value5) var(--value10) var(--value5) var(--value10);

		-webkit-transition: background-color 1.2s ease-out;
		-o-transition: 		background-color 1.2s ease-out;
		-ms-transition: 	background-color 1.2s ease-out;
		transition: 		background-color 1.2s ease-out;
	}


.button1_hover
	{
		color: 					#FFFFFF;
		background-color:		#0070C0;
		border: 				none;
		font-family: 			var(--tecsfont1);
		font-size: 				var(--text1fs);
		font-weight: 			normal;
		height:					calc(var(--text1lh) * 1.2); /* Make the height just a scooch bigger to stand out */
		vertical-align: 		middle;
		padding:				var(--value5) var(--value10) var(--value5) var(--value10);
		cursor:					pointer;
	}


.formarea1
	{
		color: 					#333333;
		background-color:		#EEEEEE;
		border: 				solid 1px #666666;
		font-family: 			var(--tecsfont1);
		font-size:				var(--text1fs);
		height:					calc(var(--text1lh) * 4);
		vertical-align: 		top;
		margin-top:				calc(var(--text2lh) - var(--text1lh));
		padding-left:			5px;
	}


.formfield1
	{
		color: 					#333333;
		background-color:		#EEEEEE;
		border: 				solid 1px #666666;
		font-family: 			var(--tecsfont1);
		font-size:				var(--text1fs);
		height:					var(--text1lh);
		vertical-align: 		middle;
		padding-left:			5px;
	}


.menu_off
	{
		font-family: 			var(--tecsfont1);
		font-size: 				var(--menufs);
		font-weight: 			normal;
		letter-spacing:			var(--menuls);
		text-align:				center;
		color: 					#666666;
		background-color:		#CCCCCC;
		cursor:					pointer;
		width:					var(--menubw);
		height:					var(--menubh);
		border-right:			solid 1px white;
		display: 				table-cell;
		vertical-align: 		middle;
		position:				relative;

		-webkit-transition: 	background-color 1.2s ease-out;
		-o-transition: 			background-color 1.2s ease-out;
		-ms-transition: 		background-color 1.2s ease-out;
		transition: 			background-color 1.2s ease-out;
	}


.menu_off:hover
	{
		font-family: 			var(--tecsfont1);
		font-size: 				var(--menufs);
		font-weight: 			normal;
		letter-spacing:			var(--menuls);
		text-align:				center;
		color: 					#FFFFFF;
		background-color:		#0070C0;
		cursor:					pointer;
		width:					var(--menubw);
		height:					var(--menubh);
		border-right:			solid 1px white;
		display: 				table-cell;
		vertical-align: 		middle;
		position:				relative;
		
		-webkit-transition: 	background-color 0.1s ease-in;
		-o-transition: 			background-color 0.1s ease-in;
		-ms-transition: 		background-color 0.1s ease-in;
 		transition: 			background-color 0.1s ease-in;
	}


.menu_on
	{
		font-family: 			var(--tecsfont1);
		font-size: 				var(--menufs);
		font-weight: 			normal;
		letter-spacing:			var(--menuls);
		text-align:				center;
		color: 					#FFFFFF;
		background-color:		#0070C0;
		cursor:					pointer;
		width:					var(--menubw);
		height:					var(--menubh);
		border-right:			solid 1px white;
		display: 				table-cell;
		vertical-align: 		middle;
		position:				relative;
	}


.pager_off
	{
		opacity:				0;
		display:				none;

		-webkit-animation-duration: 		1s;
		-webkit-animation-timing-function: 	ease-out;
		-webkit-animation-iteration-count: 	1;
		-webkit-animation-name: 			fadeOut;
		
		-ms-animation-duration: 			1s;
		-ms-animation-timing-function: 		ease-out;
		-ms-animation-iteration-count: 		1;
		-ms-animation-name: 				fadeOut;
		
		-o-animation-duration: 				1s;
		-o-animation-timing-function: 		ease-out;
		-o-animation-iteration-count: 		1;
		-o-animation-name: 					fadeOut;
		
		-animation-duration: 				1s;
		-animation-timing-function: 		ease-out;
		-animation-iteration-count: 		1;
		-animation-name: 					fadeOut;
	}


.pager_on
	{
		opacity:				1;
		display:				block;

		-webkit-animation-duration: 		1s;
		-webkit-animation-timing-function: 	ease-in;
		-webkit-animation-iteration-count: 	1;
		-webkit-animation-name: 			fadeIn;
		
		-ms-animation-duration: 			1s;
		-ms-animation-timing-function: 		ease-in;
		-ms-animation-iteration-count: 		1;
		-ms-animation-name: 				fadeIn;
		
		-o-animation-duration: 				1s;
		-o-animation-timing-function: 		ease-in;
		-o-animation-iteration-count: 		1;
		-o-animation-name: 					fadeIn;
		
		-animation-duration: 				1s;
		-animation-timing-function: 		ease-in;
		-animation-iteration-count: 		1;
		-animation-name: 					fadeIn;
	}


.radio1
	{
		
	}


.text1
	{
		font-family: 			var(--tecsfont1);
		font-size: 				var(--text1fs);
		font-weight: 			normal;
		color: 					#666666;
		line-height:			var(--text1lh);
	}


.text1_link
	{
		font-family: 			var(--tecsfont1);
		font-size: 				var(--text1fs);
		font-weight: 			normal;
		color: 					#0070C0;
		line-height:			var(--text1lh);

		-webkit-transition: 	color 1.2s ease-out;
		-o-transition: 			color 1.2s ease-out;
		-ms-transition: 		color 1.2s ease-out;
		transition: 			color 1.2s ease-out;
	}


.text1_link:hover
	{
		font-family: 			var(--tecsfont1);
		font-size: 				var(--text1fs);
		font-weight: 			normal;
		color: 					#FF7300;
		line-height:			var(--text1lh);
		
		-webkit-transition: 	color 0.1s ease-in;
		-o-transition: 			color 0.1s ease-in;
		-ms-transition: 		color 0.1s ease-in;
 		transition: 			color 0.1s ease-in;
	}


.text2
	{
		font-family: 			var(--tecsfont1);
		font-size: 				var(--text1fs);
		font-weight: 			normal;
		color: 					#666666;
		line-height:			var(--text2lh);
	}