.hsi_module {
    max-width: 1024px;
    margin: 2rem auto;
}
.select_mbps p {
    text-align: center;
    color: #666;
}
.hsi_module_head p {
    font-weight: 500;
}
.hsi_module path {
  fill: #666;
}
.mbps_selection {
	margin-top: 4rem;
	position: relative;
}

.hsi_module .mbps_selection .mbps.row-1 {
    width: calc(49% - 8px);
}

.hsi_module .mbps_selection .mbps.row-2 {
    width: calc(32% - 8px);
}

.hsi_module legend {
    display: block;
    border: 1px solid #666;
    border-bottom: 0px;
    max-width: 50%;
    text-align: center;
    margin: 0 auto;
}

.hsi_module legend p {
			top: -1rem;
			position: relative;
			background: #fff;
			max-width: 100%;
			text-align: center;
			margin: 0 auto;
			width: auto;
			display: inline-block;
			padding: 0 0.5rem;
}

.piper {
	margin: 0 2rem;
	font-weight: 100;
}

/* Prevent font scaling beyond this breakpoint */
@media (min-width: 120rem) {
    .display-5 {
        font-size: 1.25rem;
    }
}
/* Start - HSI Speed Demo */
.hsi_module .hsi_module_head h2,
.hsi_module .mbps_description .title,
.hsi_module .mbps_selection .mbps h3,
.hsi_module .mbps_selection .mbps span,
.hsi_module .meters .meter .meter_type {
	font-family: Arial, sans-serif;
}

.hsi_module {
	width: 100%;
	/*max-width: 959px;*/
	max-width: none;
	margin: 25px 0;
}

.hsi_module .hsi_module_head {
    text-align: left;
    padding: 0 32px;
}

.hsi_module .hsi_module_head h2 {
	display: inline-block;
	color: #000;
/* 	font-size: 26px; */
	margin: 0;
}

.hsi_module .hsi_module_head .select_mbps {
	color: #2fabd2;
	font-size: 16px;
	margin: 0 0 15px;
}

.select_mbps ul li{
	display: inline-block;
}

.hsi_module .mbps_selection {
	display: table;
	width: 95%;
	margin: 1rem auto;
	text-align: center;
}

.hsi_module .mbps_selection .mbps {
	position: relative;
	display: inline-block;
	width: calc(19% - 8px);
	border: 2px solid #666;
	background-color: #fff;
	padding: 15px 0;
	margin: 0 5px;
	color: #757575;
	border-radius: 4px;
	cursor: pointer;
	box-sizing: border-box;
}

.hsi_module .mbps_selection .mbps:first-child {
	margin-left: 0;
}

.hsi_module .mbps_selection .mbps:last-child {
	margin-right: 0;
}

.hsi_module .mbps_selection .mbps.selected {
	box-shadow: 0 0 0 4px #2fabd2;
	background: #2fabd2 !important;
}

.hsi_module .mbps_selection .mbps h3 {
	color: #666;
	font-size: 18px;
	line-height: 18px;
	font-weight: 700;
	margin: 0 0 2px;
}

.hsi_module .mbps_selection .mbps span {
	font-weight: 400;
	font-size: 10px;
	line-height: 10px;
	color: #666;
}

.hsi_module .meters {
	padding: 15px 0 0;
	text-align: center;
	box-sizing: border-box;
	width: 95%;
	margin: 0 auto;
	overflow: hidden;
}

.hsi_module .meters .meter {
	width: 50%;
	padding: 0 35px;
	margin: 0 0 30px;
	float: left;
	color: #757575;
}

.hsi_module .meters .meter:nth-child(odd) {
	padding: 0 17.5px 0 35px;
}

.hsi_module .meters .meter:nth-child(even) {
	padding: 0 35px 0 17.5px;
}

.hsi_module .meters .meter .meter_box {
	position: relative;
	display: block;
	height: auto;
	width: 100%;
	padding-bottom: 100%;
}

.hsi_module .meters .meter .meter_box .end_circle {
	position: absolute;
	opacity: 0;
	height: 20%;
	width: 20%;
	min-width: 25px;
	min-height: 25px;
	right: 16%;
	top: 0;
	color: #fff;
	background-color: #fd9e3d;
	border-radius: 50%;
	z-index: 20;
	pointer-events: none;
}

.hsi_module .meters .meter .meter_box .end_circle .time {
	position: absolute;
	left: 50%;
	top: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	text-align: center;
	font-size: 10px;
	line-height: 10px;
}

@media screen and (min-width:500px) {
	.hsi_module .meters .meter .meter_box .end_circle .time {
		font-size: 13px;
		line-height: 13px;
	}
}

@media screen and (min-width:675px) {
	.hsi_module .meters .meter .meter_box .end_circle .time {
		font-size: 8px;
		line-height: 8px;
	}
}

@media screen and (min-width:902px) {
	.hsi_module .meters .meter .meter_box .end_circle .time {
		font-size: 10px;
		line-height: 10px;
	}
}

.hsi_module .meters .meter .meter_box .og_circle {
	position: absolute;
	opacity: 0;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	pointer-events: none;
}

.hsi_module .meters .meter .meter_box .og_circle .circle {
	position: absolute;
	height: 5%;
	width: 5%;
	background-color: #222;
	border-radius: 50%;
	left: 50%;
	-ms-transform: translateX(2px);
	transform: translateX(2px);
}

.hsi_module .meters .meter img {
	display: none;
}

.hsi_module .meters .meter svg {
	width: 100%;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
}

.hsi_module .meters .meter .meter_type {
	margin: 0 0 15px;
	font-weight: 400;
	font-size: 12px;
	color: #00b3dc;
	text-transform: uppercase;
}

.hsi_module .meters .meter .meter_details {
	margin: 15px 0 0;
}

.hsi_module .meters .meter .meter_time,
.hsi_module .meters .meter .meter_type_description {
	position: relative;
	font-size: 10px;
	color: #666;
	text-transform: uppercase;
	width: 100%;
	clear: both;
	display: block;
}

.hsi_module .meters .svg-path {
	fill: none;
	stroke-width: 4;
	stroke-miterlimit: 10;
	stroke-dasharray: 318px;
	stroke-dashoffset: 0;
	visibility: hidden;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.hsi_module .meters .cls-1 {
	stroke: #2fabd2;
}

.hsi_module .meters .cls-2 {
	stroke: #2fabd2;
}

.hsi_module .meters .cls-3 {
	stroke: #2fabd2;
}

.hsi_module .meters .cls-4 {
	stroke: #2fabd2;
}

.hsi_module .meters .cls-5 {
	fill: #2fabd2;
}

.hsi_module .meters .cls-6 {
	stroke: #666;
	stroke-width: 1.3px;
	fill: none;
	stroke-miterlimit: 10;
}

.hsi_module .meters .cls-7 {
	fill: #666;
}

.hsi_module .meters .cls-8 {
	fill: #666;
	stroke: #F9F9FB;
	stroke-width: 1.8;
	stroke-miterlimit: 10;
}

.hsi_module .meters .cls-9 {
	fill: #FFF;
}

.hsi_module .meters .cls-10 {
	fill: none;
	stroke: grey;
	stroke-width: 2;
	stroke-miterlimit: 10;
}

.hsi_module .meters .cls-11 {
	fill: grey;
}

.hsi_module .meters.mbps_100 .svg-path,
.hsi_module .meters.mbps_500 .svg-path,
.hsi_module .meters.mbps_1000 .svg-path,
.hsi_module .meters.mbps_12 .svg-path,
.hsi_module .meters.mbps_20 .svg-path,
.hsi_module .meters.mbps_40 .svg-path {
	visibility: visible;
}

.hsi_module .meters.mbps_100 .meter .meter_box .og_circle,
.hsi_module .meters.mbps_500 .meter .meter_box .og_circle,
.hsi_module .meters.mbps_1000 .meter .meter_box .og_circle,
.hsi_module .meters.mbps_12 .meter .meter_box .og_circle,
.hsi_module .meters.mbps_20 .meter .meter_box .og_circle,
.hsi_module .meters.mbps_40 .meter .meter_box .og_circle {
	animation-name: og-circ;
	animation-timing-function: linear;
	animation-iteration-count: 1;
}

.hsi_module .meters.mbps_100 .meter .meter_box .end_circle,
.hsi_module .meters.mbps_500 .meter .meter_box .end_circle,
.hsi_module .meters.mbps_1000 .meter .meter_box .end_circle,
.hsi_module .meters.mbps_12 .meter .meter_box .end_circle,
.hsi_module .meters.mbps_20 .meter .meter_box .end_circle,
.hsi_module .meters.mbps_40 .meter .meter_box .end_circle {
	animation-name: end-circ;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}

.hsi_module .meters.mbps_100.ie .meter_box .end_circle,
.hsi_module .meters.mbps_100.ie .meter_box .og_circle,
.hsi_module .meters.mbps_500.ie .meter_box .end_circle,
.hsi_module .meters.mbps_500.ie .meter_box .og_circle,
.hsi_module .meters.mbps_1000.ie .meter_box .end_circle,
.hsi_module .meters.mbps_1000.ie .meter_box .og_circle,
.hsi_module .meters.mbps_12.ie .meter_box .end_circle,
.hsi_module .meters.mbps_12.ie .meter_box .og_circle,
.hsi_module .meters.mbps_20.ie .meter_box .end_circle,
.hsi_module .meters.mbps_20.ie .meter_box .og_circle,
.hsi_module .meters.mbps_40.ie .meter_box .end_circle,
.hsi_module .meters.mbps_40.ie .meter_box .og_circle {
	animation: none!important;
}

.hsi_module .meters.mbps_100.ie .cls-1,
.hsi_module .meters.mbps_100.ie .cls-3,
.hsi_module .meters.mbps_100.ie .cls-4,
.hsi_module .meters.mbps_100.ie cls-2,
.hsi_module .meters.mbps_500.ie .cls-1,
.hsi_module .meters.mbps_500.ie .cls-3,
.hsi_module .meters.mbps_500.ie .cls-4,
.hsi_module .meters.mbps_500.ie cls-2,
.hsi_module .meters.mbps_1000.ie .cls-1,
.hsi_module .meters.mbps_1000.ie .cls-3,
.hsi_module .meters.mbps_1000.ie .cls-4,
.hsi_module .meters.mbps_1000.ie cls-2,
.hsi_module .meters.mbps_12.ie .cls-1,
.hsi_module .meters.mbps_12.ie .cls-3,
.hsi_module .meters.mbps_12.ie .cls-4,
.hsi_module .meters.mbps_12.ie cls-2,
.hsi_module .meters.mbps_20.ie .cls-1,
.hsi_module .meters.mbps_20.ie .cls-3,
.hsi_module .meters.mbps_20.ie .cls-4,
.hsi_module .meters.mbps_20.ie cls-2,
.hsi_module .meters.mbps_40.ie .cls-1,
.hsi_module .meters.mbps_40.ie .cls-3,
.hsi_module .meters.mbps_40.ie .cls-4,
.hsi_module .meters.mbps_40.ie cls-2 {
	animation: none!important;
	stroke: #a5cf68;
}

.hsi_module .meters.mbps_100 .cls-1,
.hsi_module .meters.mbps_500 .cls-1,
.hsi_module .meters.mbps_1000 .cls-1,
.hsi_module .meters.mbps_12 .cls-1,
.hsi_module .meters.mbps_20 .cls-1,
.hsi_module .meters.mbps_40 .cls-1 {
	animation-name: write-1;
}

.hsi_module .meters.mbps_100 .cls-2,
.hsi_module .meters.mbps_500 .cls-2,
.hsi_module .meters.mbps_1000 .cls-2,
.hsi_module .meters.mbps_12 .cls-2,
.hsi_module .meters.mbps_20 .cls-2,
.hsi_module .meters.mbps_40 .cls-2 {
	animation-name: write-2;
}

.hsi_module .meters.mbps_100 .cls-3,
.hsi_module .meters.mbps_500 .cls-3,
.hsi_module .meters.mbps_1000 .cls-3,
.hsi_module .meters.mbps_12 .cls-3,
.hsi_module .meters.mbps_20 .cls-3,
.hsi_module .meters.mbps_40 .cls-3 {
	animation-name: write-3;
}

.hsi_module .meters.mbps_100 .cls-4,
.hsi_module .meters.mbps_500 .cls-4,
.hsi_module .meters.mbps_1000 .cls-4,
.hsi_module .meters.mbps_12 .cls-4,
.hsi_module .meters.mbps_20 .cls-4,
.hsi_module .meters.mbps_40 .cls-4 {
	animation-name: write-4;
}

/* Animation Speeds */
.hsi_module .meters.mbps_1000 .pictures .end_circle,
.hsi_module .meters.mbps_1000 .pictures .og_circle,
.hsi_module .meters.mbps_1000 .pictures .svg-path {
	animation-duration: 40ms;
}

.hsi_module .meters.mbps_1000 .music .end_circle,
.hsi_module .meters.mbps_1000 .music .og_circle,
.hsi_module .meters.mbps_1000 .music .svg-path {
	animation-duration: 70ms;
}

.hsi_module .meters.mbps_1000 .movies .end_circle,
.hsi_module .meters.mbps_1000 .movies .og_circle,
.hsi_module .meters.mbps_1000 .movies .svg-path {
	animation-duration: 40ms;
}

.hsi_module .meters.mbps_1000 .games .end_circle,
.hsi_module .meters.mbps_1000 .games .og_circle,
.hsi_module .meters.mbps_1000 .games .svg-path {
	animation-duration: .5s;
}

.hsi_module .meters.mbps_500 .pictures .end_circle,
.hsi_module .meters.mbps_500 .pictures .og_circle,
.hsi_module .meters.mbps_500 .pictures .svg-path {
	animation-duration: 160ms;
}

.hsi_module .meters.mbps_500 .music .end_circle,
.hsi_module .meters.mbps_500 .music .og_circle,
.hsi_module .meters.mbps_500 .music .svg-path {
	animation-duration: 280ms;
}

.hsi_module .meters.mbps_500 .movies .end_circle,
.hsi_module .meters.mbps_500 .movies .og_circle,
.hsi_module .meters.mbps_500 .movies .svg-path {
	animation-duration: 160ms;
}

.hsi_module .meters.mbps_500 .games .end_circle,
.hsi_module .meters.mbps_500 .games .og_circle,
.hsi_module .meters.mbps_500 .games .svg-path {
	animation-duration: 2s;
}

.hsi_module .meters.mbps_100 .pictures .end_circle,
.hsi_module .meters.mbps_100 .pictures .og_circle,
.hsi_module .meters.mbps_100 .pictures .svg-path {
	animation-duration: .8s;
}

.hsi_module .meters.mbps_100 .music .end_circle,
.hsi_module .meters.mbps_100 .music .og_circle,
.hsi_module .meters.mbps_100 .music .svg-path {
	animation-duration: .4s;
}

.hsi_module .meters.mbps_100 .movies .end_circle,
.hsi_module .meters.mbps_100 .movies .og_circle,
.hsi_module .meters.mbps_100 .movies .svg-path {
	animation-duration: .2s;
}

.hsi_module .meters.mbps_100 .games .end_circle,
.hsi_module .meters.mbps_100 .games .og_circle,
.hsi_module .meters.mbps_100 .games .svg-path {
	animation-duration: 5s;
}

.hsi_module .meters.mbps_40 .pictures .end_circle,
.hsi_module .meters.mbps_40 .pictures .og_circle,
.hsi_module .meters.mbps_40 .pictures .svg-path {
	animation-duration: 8s;
}

.hsi_module .meters.mbps_40 .music .end_circle,
.hsi_module .meters.mbps_40 .music .og_circle,
.hsi_module .meters.mbps_40 .music .svg-path {
	animation-duration: 6s;
}

.hsi_module .meters.mbps_40 .movies .end_circle,
.hsi_module .meters.mbps_40 .movies .og_circle,
.hsi_module .meters.mbps_40 .movies .svg-path {
	animation-duration: 3.5s;
}

.hsi_module .meters.mbps_40 .games .end_circle,
.hsi_module .meters.mbps_40 .games .og_circle,
.hsi_module .meters.mbps_40 .games .svg-path {
	animation-duration: 30s;
}

.hsi_module .meters.mbps_20 .pictures .end_circle,
.hsi_module .meters.mbps_20 .pictures .og_circle,
.hsi_module .meters.mbps_20 .pictures .svg-path {
	animation-duration: 18s;
}

.hsi_module .meters.mbps_20 .music .end_circle,
.hsi_module .meters.mbps_20 .music .og_circle,
.hsi_module .meters.mbps_20 .music .svg-path {
	animation-duration: 14s;
}

.hsi_module .meters.mbps_20 .movies .end_circle,
.hsi_module .meters.mbps_20 .movies .og_circle,
.hsi_module .meters.mbps_20 .movies .svg-path {
	animation-duration: 7s;
}

.hsi_module .meters.mbps_20 .games .end_circle,
.hsi_module .meters.mbps_20 .games .og_circle,
.hsi_module .meters.mbps_20 .games .svg-path {
	animation-duration: 60s;
}

.hsi_module .meters.mbps_12 .pictures .end_circle,
.hsi_module .meters.mbps_12 .pictures .og_circle,
.hsi_module .meters.mbps_12 .pictures .svg-path {
	animation-duration: 36s;
}

.hsi_module .meters.mbps_12 .music .end_circle,
.hsi_module .meters.mbps_12 .music .og_circle,
.hsi_module .meters.mbps_12 .music .svg-path {
	animation-duration: 24s;
}

.hsi_module .meters.mbps_12 .movies .end_circle,
.hsi_module .meters.mbps_12 .movies .og_circle,
.hsi_module .meters.mbps_12 .movies .svg-path {
	animation-duration: 12s;
}

.hsi_module .meters.mbps_12 .games .end_circle,
.hsi_module .meters.mbps_12 .games .og_circle,
.hsi_module .meters.mbps_12 .games .svg-path {
	animation-duration: 90s;
}

@keyframes write-1 {
	0% {
		stroke-dashoffset: 318px;
	}
	25% {
		stroke-dashoffset: 238.5px;
	}
	97% {
		stroke: #018543;
	}
	100% {
		stroke-dashoffset: 238.5px;
		stroke: #a5cf68;
	}
}

@keyframes write-2 {
	0% {
		stroke-dashoffset: 318px;
	}
	50% {
		stroke-dashoffset: 159px;
	}
	96% {
		stroke: #5b8e3f;
	}
	100% {
		stroke-dashoffset: 159px;
		stroke: #a5cf68;
	}
}

@keyframes write-3 {
	0% {
		stroke-dashoffset: 318px;
	}
	75% {
		stroke-dashoffset: 79.5px;
	}
	95% {
		stroke: #38b14a;
	}
	100% {
		stroke-dashoffset: 79.5px;
		stroke: #a5cf68;
	}
}

@keyframes write-4 {
	0% {
		stroke-dashoffset: 318px;
	}
	100% {
		stroke-dashoffset: 0;
	}
}

@keyframes og-circ {
	0%,
	95% {
		opacity: 1;
	}
	100% {
		transform: rotate(360deg);
		opacity: 0;
	}
}

@keyframes end-circ {
	0%,
	99.9999% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.hsi_module .mbps_description {
	width: 100%;
	padding: 15px;
	background-color: #edeef2;
	color: #6f7071;
	text-align: center;
	display: none;
}

.hsi_module .mbps_description .title {
	font-size: 18px;
	margin: 0 0 12px;
}

.hsi_module .mbps_description .title div {
	font-size: 14px;
}

.hsi_module .mbps_description .content {
	font-size: 12px;
}

.hsi_module .mbps_description .content li {
	margin: 4px 0;
}

.hsi_module .clear:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

@media screen and (min-width:675px) {
	.hsi_module {
		padding: 0;
	}
	.mpbs_selection__legend {
    margin-top: 3rem;
	}
	.hsi_module .hsi_module_head {
		text-align: left;
	}
	.hsi_module .hsi_module_head h2 {
		font-size: 40px;
		text-align: center;
		line-height: 40px;
		margin: 0 0 10px;
		width: 100%;
		color: #000;
		font-weight: 400;
	}
	.hsi_module .hsi_module_head .select_mbps {
		color: #666;
		font-size: 2.5rem;
		text-align: left;
		width: 90%;
		margin: 0 auto;
		line-height: 33px;
	}
	.hsi_module .mbps_selection {
		margin-bottom: 20px;
	}
	.hsi_module .mbps_selection .mbps {
		padding: 20px 0;
		transition: all .2s ease-in-out;
	}
	.hsi_module .mbps_selection .mbps h3 {
		font-family: Arial, sans-serif;
		font-weight: 700;
		font-size: 38px;
		line-height: 38px;
		margin: 0;
	}
	.hsi_module .mbps_selection .mbps span {
		font-size: 16px;
	}
	.hsi_module .mbps_selection .mbps:hover, .hsi_module .mbps_selection .mbps:active, .hsi_module .mbps_selection .mbps:focus {
		background-color: #ddd;
		color: #fff;
	}
	.hsi_module .mbps_selection .mbps.selected h3 {
	  color: #fff;
	}
	
	.hsi_module .mbps_selection .mbps	span {
			color: #666;
	}
	.hsi_module .mbps_selection .mbps.selected span {
    color: #eee;
  }
	.hsi_module .meters {
		width: 100%;
	}
	.hsi_module .meters .meter {
		width: 25%;
	}
	.hsi_module .meters .meter:nth-child(even),
	.hsi_module .meters .meter:nth-child(odd) {
		padding: 0 35px;
	}
	.hsi_module .meters .meter .meter_type {
		margin: 0 0 15px;
		font-size: 18px;
	}
	.hsi_module .meters .meter .meter_details {
		margin: 15px 0 0;
	}
	.hsi_module .meters .meter .meter_time,
	.hsi_module .meters .meter .meter_type_description {
		display: block;
		padding: 0;
		margin: 0;
		font-size: 16px;
	}
	.hsi_module .meters .meter .meter_time:after {
		display: none;
	}
	.hsi_module .mbps_description {
		padding: 0;
		text-align: left;
		display: none;
	}
	.hsi_module .mbps_description .title {
		display: table-cell;
		border-right: 1px solid #fff;
		width: 34%;
		max-width: 320px;
		vertical-align: middle;
		padding: 10px 45px;
		font-size: 22px;
	}
	.hsi_module .mbps_description .title div {
		font-size: 14px;
	}
	.hsi_module .mbps_description .content {
		display: table-cell;
		border-left: 1px solid #fff;
		vertical-align: middle;
		padding: 10px 45px;
		font-size: 16px;
	}
	.hsi_module .mbps_description .content .details {
		margin: 5px 0;
	}
}

@media (max-width: 675px) {
  .mpbs_selection__legend.col-md-4 {
    margin: 0 0 3rem 0;
  }
  .hsi_module .mbps_selection {
    margin: 1.5rem auto;
  }
  .mpbs_selection__legend.col-md-7 {
    margin-top: 1.5rem;
  }
  .hsi_module legend {
    border: 0;
    border-bottom: 0px;
    max-width: 100%;
  }
  .hsi_module .mbps_selection .mbps {
    padding: 5px 0;
  }
  .hsi_module .meters .meter {
    width: 33%;
  }
  .hsi_module .meters .meter:nth-child(2n+1),
  .hsi_module .meters .meter:nth-child(2n) {
    padding: 5px;
  }
  .hsi_module .meters {
    padding: 0;
  }
  .meter.music {
    display: none;
  }
  .block--fiber-internet---focal-area .paragraph > .paragraph__column {
    padding-bottom: 0px;
  }
}