section {
	display: flex;
	position: relative;
	z-index: 10;
}

section .content {
	margin: 0 auto;
	display: block;
	max-width: 1080px;
	padding: 160px 0;
	min-height: 600px;
	position: relative;
	align-self: center;
	flex-grow: 1;
}

section .content .text-block{
	max-width: 640px;
	position: relative;
}

section .content::before{
	top: 10%;
	bottom: 10%;
	background-repeat: no-repeat;
	background-size: contain;
	position:absolute; 
	content:'';
	display:block;
}


#section-banner { padding-top: 122px; background-position:center; min-height: 100vh;}
#section-banner .content {padding: 0 16px; max-width: 1080px;}
#section-banner .text-block { position:static; color: #211546;}

#section-meter .content::before { background-image:url('../img/products/patients-meter-gm700sb.png'); background-position:50%; }
#section-meter .text-block { color: #211546;}

#section-mobile {background-color: #211546;}
#section-mobile .content::before { background-image:url('../img/products/patients-mobile.png'); background-position:50%; }
#section-mobile .text-block { position:relative; color: #fff;}

#section-console { background-position:50% 100%; }
#section-console .text-block { color: #211546; text-align:left;}



	

/******************************/
/* 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 .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-banner { background-image:url('../img/products/patients-banner-portrait.jpg'); 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 {  }

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

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

/* 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) 
{ 

}
@media only screen and (min-width:40.063em) and (orientation:portrait) 
{ 
	#section-banner .content { padding:64px 16px 120vw; max-width:unset; }
	#section-banner .text-block { padding:32px 16px; }

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

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


/******************************/
/* PHONE TO TABLET            */
/******************************/
@media screen and (max-width: 768px) {
	section .text-block h1 {font-size: 1.5em;}
	section .text-block {
		padding: 0 1.25em;
	}
	#section-banner { padding-top: 80px; }
	section .content::before {
		display: block;
		
	}
	
	#section-meter .content {display: grid;}
	#section-meter .text-block { position:relative; left:0px; width:90%; max-width:480px; padding-top:200px;}
	#section-meter .text-block h1 {  font-size: 1em; }
	#section-meter .content::before { position:absolute; height: 300px; content:''; display:grid; width:100%; background-image:url('../img/products/patients-meter-gm700sb.png'); }

	#section-mobile .content {display: grid;}
	#section-mobile .text-block { position:relative; left:0px; width:90%; max-width:480px; padding-top:200px;}
	#section-mobile .content::before { position:absolute; height: 300px; content:''; display:grid; width:100%; background-image:url('../img/products/patients-mobile.png'); }

}
/******************************/
/* 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-position:center; }
	#section-banner .text-block { position:relative; }

	#section-banner .content { padding:0 16px; max-width:1080px; }
	#section-banner .text-block { text-align:inherit; width:auto; max-width:640px; margin:0; padding:0; border-radius:unset; background:none; }

	#section-meter .text-block { left:35%; }
	#section-meter .content::before {content:''; display:block; left:15px; width:30%; background-image:url('../img/products/patients-meter-gm700sb.png'); background-position:0 50%; }

	#section-mobile .content::before {content:''; display:block; width:40%; left:60%; background-image:url('../img/products/patients-mobile.png'); background-position:50% 50%; }
	#section-mobile .text-block { position:relative; left:0; width:60%; max-width:none; }

	#section-console { background-image:url('../img/products/patients-console.jpg'); background-position:50% 100%; min-height:100vh; }
	#section-console .content { align-self:flex-start; padding-top:120px; }
}
@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) { }