/*
	###########################		START - FILE INFORMATION	###############################################################################
	###			VERSION: 5.0.0;
	###			LEGAL: USE OF THIS FILE CONSTITUTES YOUR ACCEPTANCE OF THE "PWP_LEGAL.TXT";
	###			NOTES: ;
	###########################		END - FILE INFORMATION		###############################################################################
*/

@media screen and ( max-width: 900px )
	{

/* #SECTION: HTML -------------------------------------------------------------------------------------------------------------------------- */

		/* NOTE: NO ALTERATIONS */

/* #SECTION: PAGE -------------------------------------------------------------------------------------------------------------------------- */

		/* #-------------------- SECTION: HEADER; -- */
		header
			{
				/* NOTE: PROPERTIES FOR LAYOUT */
				height:						102px;
				text-align:					center;
			}
			
		header #Logo
			{
				margin-top:					15px;
			}
		header #Logo img
			{
				width: 						300px;
				height:						auto;
			}

		header #ContactNumber
			{
				display:					block;
			}

		/* #-------------------- SECTION: NAVIGATION - MAIN NAVIGATION; -- */
		nav#NavigationMain
			{
				/* NOTE: PROPERTIES FOR LAYOUT */
				height:						80px;
				top:						102px;
			}
			
		nav#NavigationMain label
			{
				/* NOTE: PROPERTIES FOR LAYOUT */
				cursor:						pointer;
				line-height:				150%;
			}
		
		nav#NavigationMain input#chkbxNavigationMain + label:before
			{
				/* NOTE: PROPERTIES FOR STYLING */
				font-size:					150%;

				/* NOTE: PROPERTIES FOR LAYOUT */
				content:					"\2261";
				display:					block;
			}
		nav#NavigationMain input#chkbxNavigationMain + label
			{
				/* NOTE: PROPERTIES FOR STYLING */
				background-image:			none;
				color:						#fff;
				font-size:					150%;
				
				/* NOTE: PROPERTIES FOR LAYOUT */
				left:						0;
				padding-left:				20px;
				padding-top:				20px;
				position:					absolute;
				top:						0;
				width:						88px;
				z-index:					2000000; /* #-- NOTE: NEEDED TO STOP GOOGLE MAPS FOR DISPLAYING OVER; -- */
				
			}
		nav#NavigationMain input#chkbxNavigationMain:checked + label
			{
				/* NOTE: PROPERTIES FOR STYLING */
				background-image:			none;
				border-bottom:				1px solid #fff;
				border-right:				1px solid #fff;
				background:					linear-gradient( 135deg, rgba( 0,0,0,1 ) 30%, rgba( 14,15,20,0.75 ) 80%, rgba( 14,15,20,0.75 ) 100% );
				color:						#00ff00;

				/* NOTE: PROPERTIES FOR LAYOUT */
				height:						260px;
				padding-left:				20px;
				padding-top:				20px;
				position:					absolute;
				width:						98.8%;
				/* #-- NOTE: 98% BECAUSE OF SCROLL BAR CREATION BASED ON PADDING; -- */
			}

		nav#NavigationMain input#chkbxNavigationMain ~ div#ColumnContainer
			{
				display:					none;
			}
		nav#NavigationMain input#chkbxNavigationMain:checked ~ div#ColumnContainer
			{
				/* NOTE: PROPERTIES FOR STYLING */
				background-color:			transparent;

				/* NOTE: PROPERTIES FOR LAYOUT */
				display:					block;
				left:						60px;
				padding-bottom:				1%;
				position:					absolute;
				width: 						80%;
				z-index:					2000001; /* #-- NOTE: NEEDED TO STOP GOOGLE MAPS FOR DISPLAYING OVER; -- */
			}

		nav#NavigationMain ul
			{
				/*NOTE: PROPERTIES FOR LAYOUT */
				display:					block;
				width:						auto;
			}

		nav#NavigationMain ul li
			{
				display:					block;
			}

		nav#NavigationMain ul li::after
			{		
				 content:					none;
			}
	
		/* #-------------------- SECTION: NAVIGATION - MAIN NAVIGATION; -- */

		nav#NavigationMain label
			{
				display:					block;
			}
		nav#NavigationMain input#chkbxNavigationMain
			{
				display:					none;
			}
			
		/* #-------------------- SECTION: VIDEO; -- */
		
		#VideoHero
			{
				/* NOTE: DO NOT PLACE HEIGHT AND WIDTH OF VIDEO IN CSS. REASONS: HAND HELD DEVICE ISSUES WITH PLAYBACK */

				/* NOTE: PROPERTIES FOR LAYOUT */
				margin-top:					180px;
			}
			
			
		/* #-------------------- SECTION: FOOTER; -- */

		footer ul
			{
				/* NOTE: PROPERTIES FOR LAYOUT */
				margin:						0;
				margin-right:				40px;
			}

		footer ul li
			{
				/* NOTE: PROPERTIES FOR LAYOUT */
				display:					block;
				border-bottom: 				1px solid #fff;
			}
			
		footer ul:last-of-type li:last-child
			{
				border-bottom: 				0;
			}

		footer ul li:after
			{
				/* NOTE: PROPERTIES FOR STYLING */
				 content:					none;
			}

		footer ul li:last-child:after
			{
				 content:					none;
			}
			
/* #SECTION: HOME PAGE --------------------------------------------------------------------------------------------------------------------- */
	
		/* #-------------------- SECTION: TILES; -- */
		div.ListTiles ul li 
			{
				width:						100%;
			}

		div.ListTiles ul li a.Tile
			{
				
				margin-left:				auto;
				margin-right:				auto;
				width:						90%;
				max-width:					427px;
			}
		div.ListTiles ul li a h2
			{
				padding-top: 				20px;
				height:						72px;
			}
			
		/* #-------------------- SECTION: IMAGE HERO; -- */
		
		div.ImageHero:first-of-type
			{
				/* NOTE: PROPERTIES FOR LAYOUT */
				margin-top:					182px;
			}
			
		div.CntBody
			{
				padding-left:				2%;
				padding-right:				2%;
			}

	}