@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%;		} }
@keyframes about_para1		{ from { margin-left: var(--about_para1width); } to { margin-left: 0px; } }
@keyframes logo				{ from { opacity:	0;		} to { opacity:		1;		} from { top: calc(-1.2*(var(--logoheight))); } to { top: var(--value50); } }
@keyframes products_pad		{ from { opacity:	0;		} to { opacity:		1;		} }


:root
{
		--font1:		'Nunito Sans', 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;
	}


TABLE
	{
		margin:					0px;
		padding:				0px;
	}


FORM
	{
		margin: 			0px;
	}


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


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


#devinfo
	{
		float:					left;
		z-index:				200;
	}

#header
	{
		background-color: 		#0057FF;
		background-image:		url(images/header1.png);
		background-size:		cover;
		z-index:				70;
		box-shadow: 			0px var(--value10) var(--value10) rgba(0, 0, 0, 0.3);
		-webkit-box-shadow: 	0px var(--value10) var(--value10) rgba(0, 0, 0, 0.3);
	}


#menu1
	{
		z-index:				80;
	}


#menu2
	{
		background-color: 		#0057FF;
		background-image:		url(images/header1.png);
		background-size:		cover;
		z-index:				80;
		border-radius: 			0px var(--value10) 0px 0px;
		-webkit-border-radius: 	0px var(--value10) 0px 0px;
		box-shadow: 			0px 0px var(--value10) rgba(0, 0, 0, 0.5);
		-webkit-box-shadow: 	0px 0px var(--value10) rgba(0, 0, 0, 0.5);
	}


#logo
	{
		float:					left;
		z-index:				90;
		box-shadow: 			var(--value5) var(--value10) var(--value10) rgba(0, 0, 0, 0.3);
		-webkit-box-shadow: 	var(--value5) var(--value10) var(--value10) rgba(0, 0, 0, 0.3);

		animation:				logo ease 1;
		animation-fill-mode:	forwards;
		animation-duration:		8s;
		animation-delay: 		0s;
	}


#pager
	{
		background-color: 		#FFFFFF;
		position: 				absolute;
		overflow-y:				visible;
		display:				block;
		-webkit-overflow-scrolling: touch;
	}


#pager_about, #pager_products, #pager_team, #pager_contact, #pager_privacy, #pager_complaints, #pager_practice, #pager_design
	{
		position: 				absolute;
		left:					0px;
		top:					0px;
		overflow:				visible;
	}


#pager_about_panel1
	{
		position:				absolute;
		left:					0px;
		top:					0px;
		width:					var(--pagerwidth);
		height:					calc(var(--scaler) * 900); /* Original Pic is 1920 x 900 so I adjust the DIV height to match the pic1 height */

		background-image:		url(images/about_panel1.png);
		background-size:		cover;
		background-repeat:		no-repeat;
	}


#pager_about_slides
	{
		position:				absolute;
		left:					var(--value50);
		top:					var(--about_slidestop);
		width:					var(--about_slideswidth);
		height:					var(--about_slidesheight);
	}


#pager_about_para1
	{
		position:				absolute;
		left:					var(--about_para1left);
		top:					var(--about_para1top);
		width:					var(--about_para1width);

		animation:				about_para1 ease 1;
		animation-fill-mode:	forwards;
		animation-duration:		6s;
		animation-delay: 		0s;
	}


#pager_generic
	{
		position:				absolute;
		left:					var(--value100);
		top:					calc(var(--value100) * 1.5);
		width:					var(--main1width);
	}


#pager_products_main
	{
		position:				absolute;
		left:					0px;
		top:					var(--products_main_top);
		width:					var(--pagerwidth);
	}


#pager_products_pgi
	{
		position:				relative;
		left:					0px;
		width:					var(--pagerwidth);
		height:					auto;
		border-bottom:			solid 1px rgba(0,0,0,0.2);

		background-image:		url(images/productfade1.png);
		background-size: 		contain;
		background-repeat:		repeat-y;
	}


#pager_products_cred
	{
		position:				relative;
		left:					0px;
		width:					var(--pagerwidth);
		height:					auto;
		border-bottom:			solid 1px rgba(0,0,0,0.2);

		background-image:		url(images/productfade1.png);
		background-size: 		contain;
		background-repeat:		repeat-y;
	}


#pager_products_land
	{
		position:				relative;
		left:					0px;
		width:					var(--pagerwidth);
		height:					auto;
		border-bottom:			solid 1px rgba(0,0,0,0.2);

		background-image:		url(images/productfade1.png);
		background-size: 		contain;
		background-repeat:		repeat-y;
	}


#pager_products_perf
	{
		position:				relative;
		left:					0px;
		width:					var(--pagerwidth);
		height:					auto;
		border-bottom:			solid 1px rgba(0,0,0,0.2);

		background-image:		url(images/productfade1.png);
		background-size: 		contain;
		background-repeat:		repeat-y;
	}


#pager_products_eib
	{
		position:				relative;
		left:					0px;
		width:					var(--pagerwidth);
		height:					auto;
		border-bottom:			solid 1px rgba(0,0,0,0.2);

		background-image:		url(images/productfade1.png);
		background-size: 		contain;
		background-repeat:		repeat-y;
	}


#pager_products_weather
	{
		position:				relative;
		left:					0px;
		width:					var(--pagerwidth);
		height:					auto;
		border-bottom:			solid 1px rgba(0,0,0,0.2);

		background-image:		url(images/productfade1.png);
		background-size: 		contain;
		background-repeat:		repeat-y;
	}


#pager_products_something
	{
		position:				relative;
		left:					0px;
		width:					var(--pagerwidth);
		height:					auto;
		border-bottom:			solid 1px rgba(0,0,0,0.2);

		background-image:		url(images/productfade1.png);
		background-size: 		contain;
		background-repeat:		repeat-y;
	}


#pager_products_panel1
	{
		position:				absolute;
		left:					0px;
		top:					0px;
		width:					var(--pagerwidth);
		height:					var(--products_panel1h);

		background-image:		url(images/products_panel1.png);
		background-size:		cover;
		background-repeat:		no-repeat;
	}


#pager_products_pad1
	{
		left:					var(--products_pad1left);
		top:					var(--products_pad1top);

		background-image:		url(images/products_pic1.jpg);
		background-size:		cover;
		background-repeat:		no-repeat;

		animation:				products_pad ease 1;
		animation-fill-mode:	forwards;
		animation-duration:		3s;
		animation-delay: 		0s;
		opacity: 				0;
	}


#pager_products_pad2
	{
		left:					var(--products_pad2left);
		top:					var(--products_pad2top);

		background-image:		url(images/products_pic2.jpg);
		background-size:		cover;
		background-repeat:		no-repeat;

		animation:				products_pad ease 1;
		animation-fill-mode:	forwards;
		animation-duration:		3s;
		animation-delay: 		0.5s;
		opacity: 				0;
	}


#pager_products_pad3
	{
		left:					var(--products_pad3left);
		top:					var(--products_pad3top);

		background-image:		url(images/products_pic3.jpg);
		background-size:		cover;
		background-repeat:		no-repeat;

		animation:				products_pad ease 1;
		animation-fill-mode:	forwards;
		animation-duration:		3s;
		animation-delay: 		1s;
		opacity: 				0;
	}


#pager_products_pad4
	{
		left:					var(--products_pad4left);
		top:					var(--products_pad4top);

		background-image:		url(images/products_pic4.jpg);
		background-size:		cover;
		background-repeat:		no-repeat;

		animation:				products_pad ease 1;
		animation-fill-mode:	forwards;
		animation-duration:		3s;
		animation-delay: 		1.5s;
		opacity: 				0;
	}


#pager_products_pad5
	{
		left:					var(--products_pad5left);
		top:					var(--products_pad5top);

		background-image:		url(images/products_pic5.jpg);
		background-size:		cover;
		background-repeat:		no-repeat;

		animation:				products_pad ease 1;
		animation-fill-mode:	forwards;
		animation-duration:		3s;
		animation-delay: 		2s;
		opacity: 				0;
	}


#pager_products_pad6
	{
		left:					var(--products_pad6left);
		top:					var(--products_pad6top);

		background-image:		url(images/products_pic6.jpg);
		background-size:		cover;
		background-repeat:		no-repeat;

		animation:				products_pad ease 1;
		animation-fill-mode:	forwards;
		animation-duration:		3s;
		animation-delay: 		2.5s;
		opacity: 				0;
	}







/* ----------------   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 */
	}


.borderbot1
	{
		border-bottom:			none 1px #00E6A9; /* The Green that simulates a line fade to transparency*/
	}


.height25
	{
		height:					calc(var(--value50) * 0.5);
	}


.height50
	{
		height:					var(--value50);
	}


.height100
	{
		height:					var(--value100);
	}


.height130
	{
		height:					calc(var(--value100) * 1.3);
	}


.logo_pgia1
	{
		width:					auto;
		height:					calc(var(--value100) * 1.5);
		padding-right:			calc(var(--value50) * 0.5);
	}


.menu_off
	{
		color: 					#FFFFFF;
		cursor:					pointer;
		text-decoration:		none;
		border-bottom:			none;
		display: 				table-cell;
		vertical-align: 		middle;
		position:				relative;
/*		transition:				all linear 1s; - Not working */
	}


.menu_on
	{
		color: 					#FFFFFF;
		cursor:					pointer;
		text-decoration:		underline;
		text-underline-position: under;
		display: 				table-cell;
		vertical-align: 		middle;
		position:				relative;
	}


.pager_products_inner
	{
		position:				relative;
		left:					var(--value100);
		width:					var(--main1width);
		height:					auto;
		padding:				calc(var(--value100) * 1.1) 0px calc(var(--value100) * 1.2) 0px;
		overflow:				visible;
	}


/* Custom Menu CSS to cater to 2 variations of above menu CSS */


#about, #products, #team, #contact
	{
		font-family: 			var(--font1);
		font-size: 				var(--menu1fs);
		font-weight: 			normal;
		letter-spacing:			var(--menu1ls);
		height:					var(--menu1bh);
	}


#about
	{
		width:					calc(var(--value1) * 108);
		text-align:				left;
	}
	
#products
	{
		width:					calc(var(--value1) * 183);
		text-align:				center;
	}
	
#team
	{
		width:					calc(var(--value1) * 176);
		text-align:				center;
	}

#contact
	{
		width:					calc(var(--value1) * 133);
		text-align:				right;
	}


#privacy, #complaints, #practice, #design
	{
		font-family: 			var(--font1);
		font-size: 				var(--menu2fs);
		font-weight: 			normal;
		letter-spacing:			var(--menu2ls);
		text-align:				center;
		vertical-align:			text-top;
		padding-top:			var(--value5);
		height:					var(--menu2bh);
		padding-left:			var(--value20);
		padding-right:			var(--value20);
	}


/* ------------------------------------------------ */


.productspadbox
	{
		position:				absolute;
		width:					var(--products_padwidth);
		height:					var(--products_padheight);

		cursor:					default;
		
		-webkit-filter: 		saturate(100%);
		-moz-filter: 			saturate(100%);
		-o-filter: 				saturate(100%);
		-ms-filter: 			saturate(100%);
		filter: 				saturate(100%);

		border:					solid 1px #00EFA3; /* Green */
		border-radius: 			var(--value10);
		-webkit-border-radius: 	var(--value10);
		box-shadow: 			var(--value5) var(--value10) var(--value10) rgba(0, 0, 0, 0.3);
		-webkit-box-shadow: 	var(--value5) var(--value10) var(--value10) rgba(0, 0, 0, 0.3);
		
		transition:				all linear 1s;
}


.productspadbox:hover
	{
		position:				absolute;
		width:					var(--products_padwidth);
		height:					var(--products_padheight);
		margin-top:				calc(var(--value5) * -0.5);

		cursor: 				pointer;
		
		-webkit-filter: 		saturate(120%) brightness(120%);
		-moz-filter: 			saturate(120%) brightness(120%);
		-o-filter: 				saturate(120%) brightness(120%);
		-ms-filter: 			saturate(120%) brightness(120%);
		filter: 				saturate(120%) brightness(120%);

		border:					solid 1px #000000;
		border-radius: 			var(--value10);
		-webkit-border-radius: 	var(--value10);
		box-shadow: 			var(--value10) var(--value20) var(--value20) rgba(0, 0, 0, 0.3);
		-webkit-box-shadow: 	var(--value10) var(--value20) var(--value20) rgba(0, 0, 0, 0.3);
		
		transition:				all linear 0.1s;
}


.productspadtext
	{
		font-family: 			var(--font1);
		font-size: 				var(--text1fs);
		font-weight: 			normal;
		color: 					#FFFFFF; /* The normal D1D3D4 grey seemed too light */
		padding-top:			calc(var(--value5) * 1.7);
	}


.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
	{
		
	}


.teampic1
	{
		width:					var(--value200);
		height:					auto;
		padding-top:			var(--value5);
		padding-right:			calc(var(--value50) * 0.5);
	}


.text1
	{
		font-family: 			var(--font1);
		font-size: 				var(--text1fs);
		font-weight: 			normal;
		color: 					#231F20; /* Charcoal */
		line-height:			var(--text1lh);
	}


.text1b
	{
		font-family: 			var(--font1);
		font-size: 				var(--text1fs);
		font-weight: 			bold;
		color: 					#231F20; /* Charcoal */
		line-height:			var(--text1lh);
	}


.text1_link
	{
		font-family: 			var(--font1);
		font-size: 				var(--text1fs);
		font-weight: 			normal;
		color: 					#0057FF; /* Blue */
		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(--font1);
		font-size: 				var(--text1fs);
		font-weight: 			normal;
		color: 					#00EFA3; /* Green */
		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(--font1);
		font-size: 				var(--text2fs);
		font-weight: 			normal;
		color: 					#231F20;
		line-height:			var(--text2lh);
	}


.text2b
	{
		font-family: 			var(--font1);
		font-size: 				var(--text2fs);
		font-weight: 			bold;
		color: 					rgb(0,239,163); /* Green */
		line-height:			var(--text2lh);
		text-decoration:		underline;
		text-underline-position: under;
	}


.text2bs
	{
		font-family: 			var(--font1);
		font-size: 				calc(var(--text2fs) * 0.75);
		font-weight: 			bold;
		color: 					rgb(0,239,163); /* Green */
		line-height:			var(--text2lh);
	}