#section-banner { background-color:#acc0c8; }
#section-banner .content { position:static; }

#section-console { background-position:50% 100%; }
#section-console .content { align-self:flex-start; padding-top:120px; padding-bottom:400px; }

#section-predictive { }
#section-predictive .content::before { display:block; background-image:url('/img/products/clinicians-predictive.png'); background-position:50%; }

#section-ida { }
#section-ida .content::before { display:block; background-image:url('/img/products/clinicians-ida.png'); background-position:50%; }



/******************************/
/* 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 { background:#acc0c8 url('/img/products/clinicians-banner.jpg') no-repeat 50% 100%; background-size:contain; }
	#section-banner .content { padding:0 16px; max-width:400px; }
	#section-banner .text-block { position:relative; padding:32px 16px; background:rgba(255,255,255, 0.6); border-radius:8px; }

	#section-console { min-height:0; min-height:unset; }
}
@media only screen and (orientation:portrait) 
{ 
	section .content::before { height:30vh; }

	#section-banner { background-position:50% 100%; background-size:100% auto; min-height:unset; }
	#section-banner .content { padding:64px 16px 120vw;  max-width:400px; align-self:flex-start; }
	#section-banner .text-block { padding:32px 16px; background:rgba(255,255,255, 0.6); border-radius:8px; }

	#section-console { background-image:url('/img/products/clinicians-console-portrait.jpg'); background-position:50% 100%; background-size:100% auto; min-height:unset; }
	#section-console .content { padding-top:40px; padding-bottom:65vw; }
}
@media only screen and (orientation:landscape) 
{
	#section-banner { background-size:320px auto; }
	#section-banner .content { padding:64px 16px 400px; max-width:unset; align-self:flex-start; }

	#section-console { background-image:url('/img/products/clinicians-console.jpg'); }
	#section-console .content { padding-top:40px; padding-bottom:40vw; }
}

/* 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) 
{ 
	#zsection-console { background-image:url('/img/products/clinicians-console.jpg'); 
}
@media only screen and (min-width:40.063em) and (orientation:portrait) 
{
	#section-banner { background-size:480px auto; }
	#section-banner .content { padding:64px 16px 600px; max-width:unset; }
	#section-banner .text-block { padding:32px 16px; }

	#section-console .content { padding-bottom:60vw; }
}
@media only screen and (min-width:40.063em) and (orientation:landscape) 
{
	#section-console .content { padding-bottom:38vw; }
}

/* 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:#acc0c8; }
	#section-banner .content { position:static; padding:160px 0; margin:0; max-width:1080px; }
	#section-banner .content::before { display:block; left:50%; top:220px; top:25vh; bottom:0; width:50%; height:auto; background-image:url('/img/products/clinicians-banner.jpg'); background-position:50% 100%; }
	#section-banner .text-block { position:relative; padding:0; background:none; border:none; }

	#section-console { background-image:url('/img/products/clinicians-console.jpg'); background-position:50% 50%; min-height:100vh; }
	#section-console .content { align-self:flex-start; padding-top:120px; padding-bottom:600px; }
	#section-console .text-block { max-width:900px; }

	#section-predictive { }
	#section-predictive .content::before { display:block; margin-left:-40px; left:0; width:40%; background-image:url('/img/products/clinicians-predictive.png'); background-position:50%; }
	#section-predictive .text-block { left:40%; width:60%; }

	#section-ida { }
	#section-ida .content::before { display:block; left:60%; width:40%; background-image:url('/img/products/clinicians-ida.png'); background-position:0 50%; }
	#section-ida .text-block { left:0; width:60%; }
}
@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) { }