body
{
	background: transparent url("../../media/images/process/main.section.top.bg.jpg") 0 50% / cover fixed no-repeat;
}

/* Main Content */
	main[data-scope="local"]
	{
		padding-top: 0;
		padding-bottom: 0;
	}

	/* All Sections */
		main[data-scope="local"] section[id]
		{
			background: transparent url("") 50% 0 / cover no-repeat fixed;

			font: 500 21px/24px "Brandon Grotesque", "Arial", "Helvetica", sans-serif;
			text-align: center;
			
			box-sizing: border-box;
			clear: both;
			display: block;

			min-height: 830px;
			height: 100vh;
		}

		main[data-scope="local"] section[id] .position
		{
			-webkit-transform: translate(-50%,-50%);
			transform: translate(-50%,-50%);
			
			position: absolute;
			 top: 50%;
			 left: 50%;

			width: 100%;
		}

		@supports (zoom: 1)
		{
			main[data-scope="local"] section .position
			{
				transform: translate(-50%,-50%) scale(2) !important;
				zoom: .5;
			}
			
			@media screen and (max-width: 1023px)
			{
				main[data-scope="local"] section .position
				{
					transform: scale(1) !important;
					zoom: 1;
				}
			}
		}

		main[data-scope="local"] section[id] h1,
		main[data-scope="local"] section[id] h2
		{
			font: italic 700 42px/42px "Arvo", "Arial", "Helvetica", sans-serif;
			text-transform: uppercase;
			
			margin: 0 0 20px;
		}

		main[data-scope="local"] section[id] p
		{
			font: 500 21px/24px "Brandon Grotesque", "Arial", "Helvetica", sans-serif;
			
			margin: 0 0 20px;
		}

		main[data-scope="local"] section[id] figure
		{
			backdrop-filter: blur(5px);
			background: rgba(0,0,0,.3);
			
			text-align: center;

			box-sizing: border-box;
			clear: both;
			display: block;
		}

		main[data-scope="local"] section[id] figure:before,
		main[data-scope="local"] section[id] figure:after
		{
			clear: both;
			display: block;
			
			content: "";
		}

		main[data-scope="local"] section[id] .ui[href^="#/goto/"]
		{
			-webkit-transform: translateX(-50%);
			-ms-transform: translateX(-50%);
			transform: translateX(-50%);
			-webkit-transition: all .25s;
			-ms-transition: all .25s;
			transition: all .25s;

			color: #fff;
			font: 700 15px/15px "Brandon Grotesque", "Arial", "Helvetica", sans-serif;
			text-decoration: none;
			text-transform: uppercase;

			box-sizing: border-box;
			display: inline-block;
			padding: 5px 5px 30px;
			position: absolute;
			 bottom: 60px;
			 left: 50%;
		}

	/* Specific Sections */
		/* Section 1: Top (Landing) */
			main[data-scope="local"] #top
			{
				text-align: left;

				min-height: 560px;
				height: calc(80vh - 134px);
			}
		
		/* Section 2: Step 1 */
			main[data-scope="local"] #step-1
			{
				background-image: url("../../media/images/process/main.section.step-1.bg.jpg");
			}
		
		/* Section 3: Step 2 */
			main[data-scope="local"] #step-2
			{
				background-image: url("../../media/images/process/main.section.step-2.bg.jpg");
			}
		
		/* Section 4: Step 3 */
			main[data-scope="local"] #step-3
			{
				background-image: url("../../media/images/process/main.section.step-3.bg.jpg");
			}
		
		/* Section 5: Step 4 */
			main[data-scope="local"] #step-4
			{
				background-image: url("../../media/images/process/main.section.step-4.bg.jpg");
			}
	
/* Media Queries */
	/* Large Displays */
		@media (min-width: 1024px) 
		{
			/* Header */
				header[data-scope="global"] nav[data-context="primary"] .wrap a[href="process"]
				{
					color: #fff !important;
				}

				header[data-scope="global"] nav[data-context="primary"] .wrap a[href="process"]:after
				{
					background: transparent url("../../media/images/ui/button.clear.bg.link.png") 50% 50% / 100% 100% no-repeat !important;

					width: 100%;
				}

			/* Main Content */
				/* All Sections */
					main[data-scope="local"] section[id].view:after
					{
						opacity: 0;
					}

					main[data-scope="local"] section[id]:last-of-type
					{
						height: calc(100vh + 156px);
					}
					
					main[data-scope="local"] section[id] figure
					{
						opacity: 0;
						-webkit-transition: all .5s;
						-ms-transition: all .5s;
						transition: all .5s;
						-webkit-transform: rotateX(90deg) translateY(40px) scale(.8);
						-ms-transform: rotateX(90deg) translateY(40px) scale(.8);
						transform: rotateX(90deg) translateY(40px) scale(.8);

						margin: 20px auto;
						padding: 55px;
						
						max-width: 876px;
					}

					main[data-scope="local"] section[id].view figure
					{
						opacity: 1;
						-webkit-transform: rotateX(0) translateY(0) scale(1);
						-ms-transform: rotateX(0) translateY(0) scale(1);
						transform: rotateX(0) translateY(0);
					}
				
					main[data-scope="local"] section[id] .ui[href^="#/goto/"]:after
					{
						background: transparent url("../../media/images/ui/caret.png") 50% 50% no-repeat;
						-webkit-transform: translateX(-50%);
						-ms-transform: translateX(-50%);
						transform: translateX(-50%);

						box-sizing: border-box;
						display: inline-block;
						padding: 5px 5px 30px;
						position: absolute;
						 bottom: 0;
						 left: 50%;
						 
						height: 14px;
						width: 24px;
						
						content: "";
					}

					main[data-scope="local"] section[id] .ui.up[href^="#/goto/"]:after
					{
						-webkit-transform: translateX(-50%) scale(-1);
						-ms-transform: translateX(-50%) scale(-1);
						transform: translateX(-50%) scale(-1);
					}
					
					main[data-scope="local"] section[id] .ui[href^="#/goto/"]:active,
					main[data-scope="local"] section[id] .ui[href^="#/goto/"]:hover,
					main[data-scope="local"] section[id] .ui[href^="#/goto/"]:focus
					{
						color: #f7a800;

						bottom: 55px;
					}

					main[data-scope="local"] section[id] .ui.up[href^="#/goto/"]:active,
					main[data-scope="local"] section[id] .ui.up[href^="#/goto/"]:hover,
					main[data-scope="local"] section[id] .ui.up[href^="#/goto/"]:focus
					{
						color: #f7a800;

						bottom: 65px;
					}
		}
	
	/* Small Displays */
		@media (max-width: 1023px) 
		{
			/* Header */
				header[data-scope="global"] nav[data-context="primary"] .wrap a[href="process"]
				{
					color: #f7a800 !important;
				}

			/* Main Content */
				/* All Sections */
					main[data-scope="local"] section[id]
					{
						background-attachment: scroll;

						font: 500 19px/25px "Brandon Grotesque", "Arial", "Helvetica", sans-serif;

						padding: 50px 30px;

						min-height: 0;
						height: auto;
					}

					main[data-scope="local"] section[id]:before
					{
						background-attachment: scroll !important;
					}

					main[data-scope="local"] section[id]:after
					{
						display: none;
						z-index: -2;
					}
					
					main[data-scope="local"] section[id] h1,
					main[data-scope="local"] section[id] h2
					{
						font-size: 35px;
						line-height: 35px;
					}

					main[data-scope="local"] section[id] p
					{
						font-size: 19px;
						line-height: 25px;
					}

					main[data-scope="local"] section[id] .position
					{
						-webkit-transform: none;
						-ms-transform: none;
						transform: none;
						
						margin: 0 -30px;
						position: relative;
						 top: auto;
						 left: auto;

						width: calc(100% + 60px);
					}
					
					main[data-scope="local"] section[id] figure
					{
						background: rgba(0,0,0,.3);
						opacity: 1;

						margin: 20px auto;
						padding: 30px;
						
						max-width: none;
						width: 100%;
					}

					main[data-scope="local"] section[id] .ui[href^="#/goto/"]
					{
						display: none;
						z-index: -2;
					}

				/* Specific Sections */
					/* Section 1: Top (Landing) */
						main[data-scope="local"] #top
						{
							text-align: center;

							padding-top: 100px;
						}
				
						main[data-scope="local"] #top:before
						{
							background-image: url("../../media/images/process/main.section.top.bg.s.jpg");
						}
					
					/* Section 2: Step 1 */
						main[data-scope="local"] #step-1:before
						{
							background-image: url("../../media/images/process/main.section.step-1.bg.s.jpg");
						}
					
					/* Section 3: Step 2 */
						main[data-scope="local"] #step-2:before
						{
							background-image: url("../../media/images/process/main.section.step-2.bg.s.jpg");
						}
					
					/* Section 4: Step 3 */
						main[data-scope="local"] #step-3:before
						{
							background-image: url("../../media/images/process/main.section.step-3.bg.s.jpg");
						}
					
					/* Section 5: Step 4 */
						main[data-scope="local"] #step-4:before
						{
							background-image: url("../../media/images/process/main.section.step-4.bg.s.jpg");
						}
		}