#section-banner { background-image:url('/img/start/banner.jpg'); background-attachment:fixed; }

#section-compliance .content { }
#section-compliance .text-block { position:relative; }
#section-compliance .content::before { display:block; background-image:url('/img/start/compliance.png'); }

#section-team .content::before { display:block; background-image:url('/img/start/team.png'); }
#section-team .text-block { position:relative; }

#section-demo { position:relative; }
#section-demo form { margin:0 auto; max-width:400px; padding:16px; }
#section-demo form .buttons { text-align:center; }
#section-demo form * { width:100%; }
#section-demo form label { text-transform:uppercase; }

#section-demo > .content { display:none; }

#section-demo.view-index #demo-request-index,
#section-demo.view-progress #demo-request-progress,
#section-demo.view-success #demo-request-success,
#section-demo.view-fail #demo-request-fail { display:block; }

#section-demo #demo-request-progress::before { display:block; background-image:url('/img/message-progress.gif'); background-position:center; }

#request-demo { position:absolute; font-size:0; }

/******************************/
/* SMALL SCREENS              */
/******************************/

/* Define mobile styles */
@media only screen 
{ 
	section .content .text-block { text-align:center; margin:0 auto; max-width:480px; }
	section .content .buttons { margin-top:24px; }

	#section-banner { }

	#section-compliance .content { }
	#section-compliance .content::before { background-position:50%; }
	#section-compliance .text-block { text-align:center; }
	
	#section-team .content::before { background-position:50%; }
	#section-team .text-block { position:relative; }

	#section-demo form { margin:0 auto; max-width:400px; padding:16px; }
	#section-demo form .buttons { text-align:center; }
	#section-demo form * { width:100%; }
	#section-demo form label { text-transform:uppercase; }

	#section-demo #demo-request-progress::before { height:140px; }

	#request-demo { margin-top:-48px; }

}
@media only screen and (orientation:portrait) 
{ 
	#section-compliance .content::before { height:200px; }

	#section-team .content::before { height:180px; }
}
@media only screen and (orientation:landscape) 
{
	#section-compliance .content::before { height:200px; }

	#section-team .content::before { height:180px; }
}

/* max-width 640px, mobile-only styles, use when QAing mobile issues */
@media only screen and (max-width:40em) { }


/******************************/
/* MEDIUM SCREENS             */
/******************************/

/* min-width 641px, medium screens */
@media only screen and (min-width:40.063em) 
{ 
	#section-demo #demo-request-progress::before { height:180px; }
}
@media only screen and (min-width:40.063em) and (orientation:portrait) 
{
	#section-compliance .content::before { height:200px; }

	#section-team .content::before { height:180px; }
}
@media only screen and (min-width:40.063em) and (orientation:landscape) 
{ 
	#section-compliance .content::before { height:200px; }

	#section-team .content::before { height:180px; }
}

/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
@media only screen and (min-width:40.063em) and (max-width:64em) { }



/******************************/
/* LARGE SCREENS              */
/******************************/

/* min-width 1025px, large screens */
@media only screen and (min-width:64.063em) 
{ 
	section .content::before { height:auto; }
	section .content .text-block { text-align:inherit; max-width:640px; margin:0; padding:0; }
	
	#section-banner { background-image:url('/img/start/banner.jpg'); background-attachment:fixed; }

	#section-compliance .content { }
	#section-compliance .content::before { display:block; left:0; width:25%; height:auto; background-position:0 50%; }
	#section-compliance .text-block { position:relative; left:30%; width:70%; text-align:left; }

	#section-team .content { }
	#section-team .content::before { display:block; width:35%; height:auto; left:60%; background-position:50% 50%; }
	#section-team .text-block { position:relative; left:0; width:60%; max-width:none; }

	#section-demo form { margin:0 auto; max-width:400px; padding:20px; border:solid 1px #ccc; border-radius:3px; box-shadow:0 3px 3px 1px rgba(0,0,0,0.3); }
	#section-demo form .buttons { text-align:center; }
	#section-demo form * { width:100%; }
	#section-demo form label { text-transform:uppercase; }

	#section-demo #demo-request-progress::before { display:block; position:relative; margin:0 auto; height:220px; }
	#section-demo #demo-request-progress .text-block { display:block; position:relative; margin:0 auto; max-width:640px; }

	#request-demo { margin-top:0; }
}
@media only screen and (min-width:64.063em) and (orientation:portrait) { }
@media only screen and (min-width:64.063em) and (orientation:landscape) { }

/* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
@media only screen and (min-width:64.063em) and (max-width:90em) { }



/******************************/
/* XLARGE SCREENS             */
/******************************/

/* min-width 1441px, xlarge screens */
@media only screen and (min-width:90.063em) { }
@media only screen and (min-width:90.063em) and (orientation:portrait) { }
@media only screen and (min-width:90.063em) and (orientation:landscape) { }

/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
@media only screen and (min-width:90.063em) and (max-width:120em) { }



/******************************/
/* XXLARGE SCREENS            */
/******************************/

/* min-width 1921px, xxlarge screens */
@media only screen and (min-width:120.063em) { }