.getting-started .title > hgroup:before
{
	content: url('../../images/healthgraph/go-bubble-blue.png');
}

.getting-started .options .cta
{
   text-align: center;
}

[role="main"] > .content
{
   /*width: 80%;*/
   max-width: 48.75em;
}

.getting-started [role="main"] .or:before
{
	content: 'or';
	background: #5bade3;
	color: whiteSmoke;
	text-transform: uppercase;
	padding: .5em;
	/*width: 1em; height: 1em;*/
	text-align: center;
	display: inline-block;
	border-radius: 1.5em;
	position: absolute;
	top: -1.5em;
	left: 50%; /*18em;*/
	margin-left: -1.5em;
}

.getting-started [role="main"] .options > li
{
	margin-top: 0;
}

.getting-started [role="main"] .options > li
, .getting-started .or
{
	margin-bottom: 1.5em;
}

.getting-started [role="main"] .unit
{
	/*width: 58.5em;*/
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.getting-started [role="main"] .or
{
	background: #f6fafd;
	border: 6px solid white;
	box-shadow: 0 0 8px rgba(10, 10, 10, .25);
	border-radius: .3em;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 100%;
	padding-left: 1em;
	padding-right: 1em;
}

.getting-started [role="main"] .unit
{
	position: relative;
}

.getting-started [role="main"] .options
, .options + .or > p
{
	text-align: center;
}

.getting-started .or > p
{
   margin-left: auto;
   margin-right: auto;
}

.getting-started [role="main"] .or > hgroup > h2
{
	text-align: center;
	font-weight: normal;
	position: relative;
	top: .5em;
	background: #f6fafd;
	width: 5em;
	margin-left: auto;
	margin-right: auto;
}

.getting-started [role="main"] .options > li > hgroup
{
	text-align: center;
	white-space: nowrap;
}

.getting-started [role="main"] .options > li > hgroup > h2
{
	color:#1c82c5;
}

.getting-started [role="main"] .options > li > hgroup > h3
{
   color: rgb(10, 10, 10);
	font-size: 19px;
	font-size: 1.9rem;
}
	
.getting-started [role="main"] .or > hgroup:before
{
	content: '';
	display: block;
	border-top: 1px solid #d4dfef;
	width: 100%;
	position: relative;
	top: 1.125em;
}

@media only screen and (max-width: 34em) {
   .builder dl.options
   {
      width: 50%;
   }
   
   .builder dl.options.total3 > dd
   {
      float: none;
      width:100%;
      margin-bottom: .75em;
   }
}
   
@media only screen and (min-width: 39em) {
	[role="main"] .content
	,#content
	{
		text-align: left;
	}
	
	[role="main"] p
   , [role="main"] ul
   , [role="main"] ol
   , [role="main"] dl
   , [role="main"] address
   {
      margin-left: 0;
      margin-right: 0;
   }
	
	[role="main"] ul
	, [role="main"] ol
	{
		max-width: inherit;
		margin-left: 0;
		margin-left: 0;
	}
	
	.healthy-button-plugin .title
   {
      position: relative;
   }
   
   .healthy-button-plugin .title > hgroup + p
   {
      position: absolute;
      right: 0;
      bottom: 0;
   }
   
   .builder dl.options
   {
      width: 100%;
      margin-left: 0;
      margin-right: 0;
   }
   
   /*.builder dl.options.total3 > dd
   {
      width: 30%;
      float: left;
      margin-left:2%;
      margin-right:2%;
   }*/
   
   .builder > section
   {
      padding-left:15px;
      padding-left:1.5rem;
   }
   
   .builder > section details > summary
   {
      margin-bottom: .25em;
   }
   
   .builder > section > hgroup
   , .builder > section details[open] > summary
   , .builder > section details.open > summary
   {
      margin-bottom: 1em;
   }
   
   .builder > section > hgroup
   , .builder > section details > summary
   {
      margin-left:-15px;
      margin-left:-1.5rem;
   }
   
}

@media only screen and (min-width: 50em) {
	.getting-started [role="main"] .options
	{
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		max-width: inherit;
	}
	
	.getting-started [role="main"] .options > *
	{
		width: 19em;
		/*display: table-cell;*/
		vertical-align: top;
		border-spacing: .75em;
		border-collapse: separate;
	}
	
	#api-option
	{
		float: left;
	}
	
	#plugins-option
	{
		float: right;
	}
	
	[id$="-selling-pts"]
	{
		margin-left: auto;
		margin-right: auto;
		margin-top: 14em;
	}
	
	.getting-started [role="main"] .options ul
	, .getting-started [role="main"] .options ol
	{
		max-width: 26em;
	}
	
	.getting-started [role="main"] .or
	{
		position: absolute;
		top: 22em;
	}
}

@media only screen and (min-width: 70em) { /* 65em */
	#selling-pts
	{
		width: 80%;
	}
}