/*Custom colouring for the website*/
.tbaytelBlue {
	color: #00607D;
}

.tbaytelBlue2 {
	color: #007CAD;
}

.tbaytelGreen {
	color: #41621D;
}

/* hash links drop content below header without padding content */
.quickLink::before {
	display: block; 
	content: " "; 
	margin-top: -128px; 
	height: 128px; 
	visibility: hidden; 
	pointer-events: none;
	scroll-behavior: smooth;
}

/*Menu horizontal dividers dont style properly without this*/
@media (max-width: 991px) {
	header .nav-main ul li {
		border-bottom: 1px solid rgba(255,255,255,.15) !important;
	}
}

/*angular apps override default hr styling without this*/
hr {
	background-image: -webkit-linear-gradient(left,transparent,#dbdbdb,transparent);
	background-image: linear-gradient(to right,transparent,#dbdbdb,transparent) !important;
	border: 0 !important;
	height: 1px !important;
	margin: 22px 0 !important;
}

/*some animation form a custom loader*/
.tbaytel-loader {
	border: 12px solid #f3f3f3;
	border-radius: 50%;
	border-top: 12px solid #007698;
	width: 40px;
	height: 40px;
	-webkit-animation: spin 1.5s linear infinite; /* Safari */
	animation: spin 1.5s linear infinite;
}

.tbaytel-loader-blue-section {
	border: 12px solid #007698;
	border-top: 12px solid #f4f4f4;
}

.tv-brochure-loading {
	color: #00607D;
}

.server-info {
    font-size: 0.50em;
    display: none;
}

/* Safari */
@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@font-face {
	font-family: 'FontAwesome';
	src: url('../_default/Skins/Porto/Resources/fonts/fontawesome-webfont.eot');
	src: url('../_default/Skins/Porto/Resources/fonts/fontawesome-webfont.eot') format('embedded-opentype'), url('../_default/Skins/Porto/Resources/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../_default/Skins/Porto/Resources/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../_default/Skins/Porto/Resources/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../_default/Skins/Porto/Resources/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

h2 {
	color: #00607D;
}

/***********************************************************************************/
/********************************Contact Us Tab and Modal***************************/
/***********************************************************************************/
img#contactus-tab-icon {
	width: 48px;
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

img#contactus-modal-icon {
	width: 48px;
	display: inline-block;
	margin-right: 15px;
}

a.contactus-tab {
	display: none;
	position: fixed;
	color: #555555;
	bottom: 150px;
	border-bottom: none;
	right: 0px;
	padding: 10px 15px 10px 15px;
	-webkit-border-top-left-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	-moz-border-radius-topleft: 8px;
	-moz-border-radius-topright: 8px;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	border: 2px solid #e6e6e6;
	background: #ffffff;
	background: url('Images/light-angle-bg.png') repeat scroll 0 0, -moz-linear-gradient(top, #ffffff 0%, #f9f9f9 100%);
	background: url('Images/light-angle-bg.png') repeat scroll 0 0, -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f9f9f9));
	background: url('Images/light-angle-bg.png') repeat scroll 0 0, -webkit-linear-gradient(top, #ffffff 0%, #f9f9f9 100%);
	background: url('Images/light-angle-bg.png') repeat scroll 0 0, -o-linear-gradient(top, #ffffff 0%, #f9f9f9 100%);
	background: url('Images/light-angle-bg.png') repeat scroll 0 0, -ms-linear-gradient(top, #ffffff 0%, #f9f9f9 100%);
	background: url('Images/light-angle-bg.png') repeat scroll 0 0, linear-gradient(to bottom, #ffffff 0%, #f9f9f9 100%);
	-webkit-transition: padding 200ms ease-out;
	-moz-transition: padding 200ms ease-out;
	-ms-transition: padding 200ms ease-out;
	-o-transition: padding 200ms ease-out;
	transition: padding 200ms ease-out;
	z-index: 1000;
}

	a.contactus-tab:hover {
		padding-right: 30px;
		color: #039fda;
		cursor: pointer;
	}

.modalContactTitle {
	font-size: 1.4rem;
}

.modalContactBlock {
	text-align: left;
	margin-top: 1rem;
	padding-left: 2.2rem;
	padding-right: 2.2rem;
}

@media (max-width: 767px) {
	a.contactus-tab {
		max-width: 100%;
		width: 100%;
		height: 50px;
		text-align: center;
		bottom: 0px;
		left: 0px;
		overflow: hidden;
		-webkit-border-top-left-radius: 0px;
		-webkit-border-bottom-left-radius: 0px;
		-moz-border-radius-topleft: 0px;
		-moz-border-radius-topright: 0px;
		border-top-left-radius: 0px;
		border-bottom-left-radius: 0px;
	}


		a.contactus-tab:hover {
			padding-right: 15px;
		}

	div#contactus-tab-label {
		display: inline-block;
	}

	img#contactus-tab-icon {
		width: 32px;
		/* clear: both; */
		display: inline-block;
		margin-left: auto;
		margin-right: auto;
	}
}

.promoCard {
	width: 100%;
	margin: 10px 0;
}

/* fixes sizing and spacing for "contact us, find a store, and support */
.body > #footer .h5 {
	font-size: 1rem;
	margin-bottom: 0.9rem;
}

/* quick custom border */
.addBorder {
	border: solid 0.5px #e6e6e6;
	background-color: #fefefe;
}

/* Feature cards */
.feature {
	padding: 1rem;
}

	.feature > h2 {
		margin-bottom: 1.2rem;
	}

/* Add styling to carosel sliders */
.caroselTbaytel {
	color: #000 !important;
	width: 0px !important;
	font-size: 2rem !important;
}

/***********************************************************************************/
/******************************Product Menus****************************************/
/***********************************************************************************/

.menuSection {
	background-color: #00607D;
}

.menuContainer {
	display: flex;
}

.menuCardContainer {
	text-align: center;
}

	.menuCardContainer a {
		text-transform: uppercase;
		text-decoration: none;
		color: #FFF !important;
		font-weight: 600;
	}

		.menuCardContainer a:hover {
			text-decoration: underline;
		}

.menuContainer {
	color: #FFF;
}

/* Mobile & Tablet */
@media only screen and (max-width: 991px) {
	.menuSection {
		padding: 10px 0 0 12px;
	}

	.menuContainer {
		flex-direction: column;
	}

	.menuCardContainer {
		margin: 0;
		padding: 10px 0 0 13px;
		text-align: left;
	}

		.menuCardContainer:not(:last-child) {
			border-bottom: solid 1px #f2f2f2;
			padding-bottom: 6px;
		}
}

/* PC */
@media only screen and (min-width: 992px) {
	.menuSection {
		padding: 10px 0 8px;
	}

	.menuContainer {
		align-items: left;
		justify-content: center;
	}

	.menuCardContainer:not(:last-child)::after {
		content: " | ";
	}

	.menuCardContainer a {
		padding: 0 20px;
	}
}





/***********************************************************************************/
/********************************Plan Cards*****************************************/
/***********************************************************************************/


/* Adds divider to each plan section */
.plan-title-bar {
	background-color: #00607D;
	color: #FFF;
	padding: 3px 3px 3px 10px;
	width: 100%;
	font-size: 20px;
	font-weight: 600;
	text-transform: uppercase;
	margin: 0;
}

/* Container that holds all details of plans, excluding the header */
.plan-container {
	padding: 10px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: wrap;
	border: solid 1px #00607d2e;
}


/*************Feature Foirmatting************/
.plan-description a:focus {
	color: #00607D;
}

.plan-features-one p, .plan-features-two p, .plan-features-three p {
	font-size: 1.1em;
}

.plan-features-one strong, .plan-features-two strong, .plan-features-three strong {
	font-size: 1.5em;
	font-weight: 500;
}


/***********Price Flex Foirmatting***********/
.price-table {
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	padding-right: 20px;
}

.plan-price-title {
	color: #00607D;
	font-size: 1.4em;
	width: 100%;
}

.plan-pricing-price {
	color: #00607D;
	font-size: 2rem;
	padding-top: 14px;
}

	.plan-pricing-price sup {
		font-size: 0.6em;
	}

	.plan-pricing-price sub {
		font-size: 0.4em;
		margin-left: 20px;
	}

.plan-pricing-bonus {
	text-align: center;
	color: #00607D;
	padding-top: 10px;
}

.plan-pricing-availability {
	width: 100%;
	padding-top: 20px;
}


/*****************Details Styling*******************/
.plan-details > div {
	display: flex;
	flex-wrap: wrap;
	margin: 2rem 0;
}

.plan-details-includes > ul > li,
.plan-details-features > ul > li {
	list-style-type: circle !important;
}


/* Images - no repeat */
.plan-features-one, .plan-features-two, .plan-features-three {
	background-repeat: no-repeat;
}

/********************************************/
/*************Screen Resizing****************/
/********************************************/

/* Mobile display */
@media only screen and (max-width: 767px) {

	/* Stack flex items */
	.plan-container {
		flex-direction: column;
	}

	/* Sizing */
	.plan-description, .plan-features-one, .plan-features-two, .plan-features-three, .plan-pricing, .plan-details {
		width: 100%;
		margin-bottom: 0.5rem;
	}

	/* Reorder */
	.plan-description {
		order: 5;
		padding: 0 10px;
		margin-top: 1.5rem;
	}

	.plan-features-one {
		order: 1;
	}

	.plan-features-two {
		order: 2;
	}

	.plan-features-three {
		order: 3;
	}

	.plan-pricing {
		order: 4;
		margin-top: 1rem;
		padding-left: 20px;
	}

	.plan-details {
		order: 6;
		padding: 1rem;
	}

	/* Set feature positions */
	.plan-features-one, .plan-features-two, .plan-features-three {
		background-size: 80px;
		background-position: 10px center;
		padding: 10px 0 0 100px;
		width: 100%;
	}

	/* Pricing */
	.price-table {
		margin-left: 1rem;
	}

	.plan-details-features {
		padding: 1rem 0 0;
		width: 100%;
	}

	.plan-details-includes {
		width: 100%;
	}

	.plan-details-features {
		width: 100%;
	}

	.plan-details-price {
		width: 100%;
	}
}

/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 991px) {

	.plan-container {
		align-items: center;
		flex-wrap: wrap;
	}

	.plan-description {
		order: 5;
		width: 49%;
		padding-right: 10px;
	}

	.plan-features-one {
		order: 1;
		width: 33%;
	}

	.plan-features-two {
		order: 2;
		width: 33%;
	}

	.plan-features-three {
		order: 3;
		width: 34%;
	}

	.plan-pricing {
		order: 4;
		width: 49%;
		margin-top: 20px;
		padding-left: 20px;
	}

	.plan-details {
		order: 6;
		width: 100%;
		padding: 1rem;
	}

	.plan-features-one, .plan-features-two, .plan-features-three {
		background-size: 70px;
		background-position: center 5px;
		padding: 55px 10px 2px;
		text-align: center;
	}

	.plan-details-includes {
		width: 50%;
		padding-right: 1.5rem;
	}

	.plan-details-features {
		width: 100%;
	}

	.plan-details-price {
		width: 45%
	}
}

/* PC - Small Screen */
@media only screen and (min-width: 992px) and (max-width: 1199px) {

	.plan-container {
		flex-wrap: wrap;
	}

	.plan-description {
		order: 1;
		width: 22%;
		padding: 0 10px;
	}

		.plan-description.features-two {
			width: 38% !important;
		}

	.plan-pricing {
		order: 5;
		width: 30%;
	}

	.plan-details {
		order: 6;
		width: 100%;
		padding: 1rem;
	}

	.plan-features-one {
		order: 2;
	}

	.plan-features-two {
		order: 3;
	}

	.plan-features-three {
		order: 4;
	}

	.plan-features-one, .plan-features-two, .plan-features-three {
		width: 16%;
		background-size: 80px;
		background-position: 5px 12px;
		padding: 80px 0 0 10px;
	}

	.plan-details-includes {
		margin: 0 1.2rem;
		width: 35%;
	}

		.plan-details-includes.features-two {
			width: 15% !important;
		}

	.plan-details-features {
		width: 35%;
	}

		.plan-details-features.features-two {
			width: 50% !important;
		}

	.plan-details-price {
		width: 25%
	}
}

/* PC - Large Screen */
@media only screen and (min-width: 1200px) {

	.plan-container {
		flex-wrap: wrap;
	}

	.plan-description {
		order: 1;
		width: 24%;
		padding: 0px 12px;
	}

		.plan-description.features-two {
			width: 40% !important;
		}

	.plan-features-one {
		order: 2;
	}

	.plan-features-two {
		order: 3;
	}

	.plan-features-three {
		order: 4;
	}

	.plan-pricing {
		order: 5;
		width: 25%;
	}

	.plan-details {
		order: 6;
		width: 100%;
		padding: 1rem;
	}

	.plan-features-one, .plan-features-two, .plan-features-three {
		width: 17%;
		background-size: 80px;
		background-position: 5px 12px;
		padding: 80px 0 0 10px;
	}

	.plan-details-includes {
		margin: 0 1.2rem;
		width: 35%;
	}

	.plan-details-features {
		width: 35%;
	}

	.plan-details-price {
		width: 25%
	}
}


/***********************************************************************************/
/******************************Updated Plan Cards***********************************/
/***********************************************************************************/

/* adds darker shadow effect when hovering mouse over a card */
@keyframes planCardHover {
	0% {box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 8px 0 rgb(0 0 0 / 10%);}
	100% {box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.60);}
}


/* controls navigation on top of page. Currently only used for Mobility*/
.planNavMenu {display: flex;flex-direction: row;justify-content: center;list-style: none;padding-left: 0;margin-bottom: 4px;}
.planNavMenu > li {padding: 0 1.2rem;text-transform: uppercase;font-weight: 600;border-bottom: solid 3px #e1e1e1;}
.planNavMenu > li:hover {border-bottom: solid 3px #00607D;text-decoration: none;cursor: pointer;}
.planNavMenu > li > a:hover {text-decoration: none;}


/* sets up flex container for plans */
.planBoxContainer {display: flex; flex-direction: row;flex-wrap: wrap;justify-content: center;}

/* contaier styling for all plan cards */
.planBoxCardContainer, .planBoxCardContainer-half {border: solid 1px #DDD; margin: 1rem 0.5rem; padding: 1rem 0 0 0; position: relative; box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 8px 0 rgb(0 0 0 / 10%);}
.planBoxCardContainer.moreDetails, .planBoxCardContainer-half.moreDetails {padding: 1rem 0 54px 0!important;}
.planBoxCardContainer:hover, .planBoxCardContainer-half:hover {animation: planCardHover 0.2s;animation-fill-mode: both;}
.planBoxCardContainer.promoOffer, .planBoxCardContainer-half.promoOffer {border: solid 1px #007cad33!important;} /*Changes border during sale to make card pop */
.planBoxCardContainer-half {width: calc(100% - 1rem);}


/* center all text (except for features list) */
.planBoxCardSubtitle, .planBoxCardName, .planBoxCardFee,.planBoxCardPriceOptions,.planBoxCardMonthly,.planBoxCardMonthly > div {text-align: center;}

/* Promotional Flag that sits on top of plan card */
.promoFlag {width: 100%;height: 10px;position: absolute;top: -7px;left: -15px;}
.promoFlag .promoFlagText {background-color: #007CAD;padding: 2px 8px;color: #FFF;width: fit-content;position: absolute;z-index: 5;font-weight: 600;}
.promoFlag .promoFlagStyle {position: absolute;border: solid 1px;border-right: solid 14px #00607D;border-bottom: solid 14px #00000000;border-left: none;border-top: none;height: 28px;width: 20px;top: 12px;left: -6px;z-index: 1;}

/* styling, forces height in case there are 2 lines of text for consistency */
.planBoxCardName {font-size: 1.5rem; margin: 0.8rem 0 0.5rem; padding: 0 0.5rem;}
.planBoxCardSubtitle {margin: 0 0 0.7rem 0;}

/* sets flex box for pricing, will center if there's only 1 monthly fee */
.planBoxCardMonthly {margin: 1rem 0 0.2rem;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;padding: 0 1rem 0;font-size: 0.8rem;}
.planBoxCardMonthly > div {width: 50%; padding-bottom: 0.2em;}
.planBoxCardMonthly > div:nth-child(even) { border-left: solid 1px #DDD;}

/* Price stlying, sets cents above /mo. */
.planBoxCardFee { line-height: 2rem; font-size: 0.8rem;}
.planBoxCardFee > strong {font-size: 2.3rem; font-weight: 500; padding-left: 0.7rem;white-space: nowrap;color:#007CAD;} 
.planBoxCardFee > strong > sup {font-size: 0.4em; top: -1.1em;}
.planBoxCardFee > strong > sub {font-size: 0.4em; top: -0.08em; left: -1em;}
.planBoxCardFee > sup {font-weight: 600;font-size: 0.8em;}

/* Firefox does not add line-through properly when sup and sub children are used within, so we have to set instructions for each element individual */
.planBoxCardFee > strong.strikethrough > span, .planBoxCardFee > strong.strikethrough > sup, .planBoxCardFee > strong.strikethrough > sub {text-decoration: line-through; text-decoration-color: red; text-decoration-thickness: 2px;} 

.includedFeatures > h4 {margin-bottom: 0.4rem;}


/* styling for plan card features */
.planBoxFeatures {padding: 6px 1rem; font-size: 0.9rem;}
.planBoxFeatures em {font-size: 1.5rem;}
.planBoxFeatures p {margin-bottom:10px;}

/* text that sits under the plan pricing & term */
.regularRate {margin-bottom:6px;}
.regularRate > p {font-size:10.5px; font-size: 10.5px; padding: 0 30px; text-align: center; line-height: 17px;}

/* optional promotional offer under features above details button */
.featurePromoOffer {background-color: #fbfbfb;text-align: center;padding: 0.4rem;border-radius: 6px;border: solid 1px #00607D;margin: 1rem 0;}
.featurePromoOffer > p {margin: 0;}
.featurePromoOffer > p > strong {color:#007CAD;}
.featurePromoOffer:hover {text-decoration:none; cursor:pointer; background-color:#f7f7f7;}

/* position details button */
.planBoxDetailsButton {position: absolute; bottom: 16px; width: 100%; text-align: center;}

/* styles to show the timeline for the commitment & non-commitment offers */
ul.timeline {width: 100%;text-align: center;display: flex;justify-content: center;padding-left: 0;}
ul.timeline > li {top: -10px;position: relative;font-size: 0.8rem;list-style: none;}
ul.timeline > .timelineChevron {width: 100%;max-width:70px;padding-top: 10px;color: #00607D;}
ul.timeline > li > strong {line-height: 2rem;font-size: 1.6rem;color: #007CAD;font-weight: 500;}
ul.timeline > li > strong > sup {font-size: 0.4em;top: -1.1em;}
ul.timeline > li > strong > sub {font-size: 0.4em;top: -0.08em;left: -1em;}
sub.timelineTitle {font-weight: 700;}

/* styling for the "features", "content" or "includes" sections within the modal */
.includedFeatures p {line-height: 1.6rem;margin-bottom: 0.4rem;}
.includedFeatures .fas, .includedFeatures .far, .includedFeatures .icons {font-size: 1rem;}
.includedFeatures .tbaytelIcon {width:20px;height:auto;}
.planBoxFeatures .tbaytelIcon {width:24px;height:auto;}

/* adds padding to top of screen for more accurate scroll-to */
.jumpToSection {scroll-margin-top: 68px;} 

/* style for link under plans that returns you to the plan slection menu */
.returnLink {background: #f9f9f9;padding: 5px 10px;border: solid 0.5px #bfd4db;border-radius: 14px;}
.returnLink:hover {background: #e1e6ef;text-decoration: none;}

/* features listed under mobility plans */
.featureList {display: flex;flex-wrap: wrap;}

.detailsText, .detailsText > p {font-size:11px!important;}


/*Screen Size Scaling */

/* Mobile */
@media only screen and (max-width: 767px) {
	.planNavMenu {flex-direction: column;}
	.planNavMenu > li {margin: 4px 0;}
	.planBoxCardContainer{width: calc(100% - 1rem);}
	.planBoxContainer{padding-left: 0;padding-right: 0;}
	.featureList {flex-direction: column;justify-content: flex-start;}
}

/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.planNavMenu {flex-direction: row;align-items: flex-end}
	.planBoxCardContainer{width: calc(50% - 1rem);}
	.featureList {justify-content: center;}
}

/* PC - Small Screen */
@media only screen and (min-width: 992px) {
	.planNavMenu {flex-direction: row;align-items: flex-end}
	.planBoxCardContainer{width: calc(33% - 1rem);}
	.featureList {justify-content: center;}
}



/***********************************************************************************/
/*********************************Promo Cards***************************************/
/***********************************************************************************/

.specialityChannelPrice {
	color: #00607D;
	font-size: 3em;
	margin-left: 10px;
}

	.specialityChannelPrice sup {
		font-size: 0.6em;
		margin-right: -12px;
		margin-left: -10px;
	}

	.specialityChannelPrice sub {
		font-size: 0.4em;
		margin-left: -3px;
	}

/* Adds background shadow to card. Optional, but recommended */
.addShadow {
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 2px 0 rgba(0, 0, 0, 0.1);
}


/*
Promo Cards width is set by HTML col- class name. Card sizing was made for:
	col-md-5 (with col-md-1 in between to space cards)
	col-sm-12

-Cards will change look with screen size change.
-Background image has to have equal width & height.
*/
.promoContainer {
	width: 100%;
	margin-bottom: 30px;
	background-repeat: no-repeat;
}

	.promoContainer .promoDisclaimer {
		font-size: 0.8em;
	}

	.promoContainer .promoPrice {
		color: #00607D;
		font-size: 3em;
		margin-left: 10px;
	}

		.promoContainer .promoPrice sup {
			font-size: 0.6em;
			margin-right: -12px;
			margin-left: -10px;
		}

		.promoContainer .promoPrice sub {
			font-size: 0.4em;
			margin-left: -3px;
		}


/* Mobile */
@media only screen and (max-width: 767px) {
	.promoContainer {
		text-align: center;
		padding: 110px 10px 1px;
		background-size: 80px 80px;
		background-position: center top 10px;
		margin: 1.5rem;
	}
}

/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.promoContainer {
		text-align: center;
		padding: 110px 10px 1px;
		background-size: 80px 80px;
		background-position: center top 10px;
	}
}

/* Laptop */
@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.promoContainer {
		text-align: center;
		padding: 140px 10px 1px;
		background-size: 100px 100px;
		background-position: center top 15px;
	}
}

/* PC */
@media only screen and (min-width: 1200px) {
	.promoContainer {
		text-align: left;
		padding: 15px 20px 1px;
		background-size: 100px 100px;
		background-position: right 40px center;
	}
}
/***********************************************************************************/
/***************************Service Qualification***********************************/
/***********************************************************************************/

.addressCheck {
	text-align: center;
	background-color: #00607D!important;
	padding: 2.5rem 2rem!important;
}

	.addressCheck > h2, .addressCheck > p {
		color: #FFF;
	}

	.addressCheck > input {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		border-radius: 10px;
	}

/* Mobile */
@media only screen and (max-width: 767px) {
	.addressCheck > input {
		width: 90%;
	}

	.addressCheck {
		margin: 4rem 0;
	}
}

/* Tablet + */
@media only screen and (min-width: 768px) {
	.addressCheck > input {
		width: 50%;
	}

	.addressCheck {
		margin: 4rem 0;
	}
}

/*Jamie's custom styling'*/
#address-lookup-loader {
	display: none;
}

.ui-autocomplete {
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	float: left;
	min-width: 160px;
	padding: 5px 0;
	margin: 2px 0 0;
	list-style: none;
	font-size: 14px;
	text-align: left;
	background-color: #ffffff;
	border: 1px solid #cccccc;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
	background-clip: padding-box;
}

	.ui-autocomplete > li > div {
		display: block;
		padding: 3px 20px;
		clear: both;
		font-weight: normal;
		line-height: 1.42857143;
		color: #333333;
		white-space: nowrap;
	}

.ui-state-hover,
.ui-state-active,
.ui-state-focus {
	text-decoration: none;
	color: #262626;
	background-color: #f5f5f5;
	cursor: pointer;
}

.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.addressCheck {
	text-align: center;
	background-color: #007698;
}

	.addressCheck > h2, .addressCheck > p, #serviceCardsContainer > p {
		color: #FFF;
	}

	.addressCheck > input {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		border-radius: 10px;
	}

/* Mobile */
@media only screen and (max-width: 767px) {
	.addressCheck > input,
    #internalUserMessage,
	#businessServiceAddressMessage {
		width: 90%;
	}
	.fibreBanner {
		width: 100%;
        max-width: 40em;
	}
	.addressCheck {
		margin: 8vh 0;
	}
}

/* Tablet + */
@media only screen and (min-width: 768px) {
	.addressCheck > input,
    #internalUserMessage,
	#businessServiceAddressMessage {
		width: 50%;
	}

    .fibreBanner {
        width: 100%; 
        max-width: 85em
    }

	.addressCheck {
		margin: 3rem 0;
	}
}

.serviceBanner {
	display: none;
	color: white;
}

#serviceNoContainer, #serviceYesContainer, #serviceAddressNotFoundContainer
#businessServiceAddressMessage {
	display: none;
}

.serviceImg {
    width: 98px;
}
.serviceImg, .serviceYesImg, .serviceNoImg {
	padding: 6px;
	background-color: white;
	border-radius: 100px;
}

.flex-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.serviceCard {
	display: none;
	padding: 10px;
	padding-right: 19px;
	padding-left: 19px;
	text-align: center;
	border-right-width: 1px;
	border-style: solid;
	-webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(rgba(0, 0, 0, 0))) 1 100%;
	-webkit-border-image: -webkit-linear-gradient(white, rgba(0, 0, 0, 0)) 1 100%;
	-moz-border-image: -moz-linear-gradient(white, rgba(0, 0, 0, 0)) 1 100%;
	-o-border-image: -o-linear-gradient(white, rgba(0, 0, 0, 0)) 1 100%;
	border-image: linear-gradient(to bottom, white, rgba(0, 0, 0, 0)) 1 100%;
}

	.serviceCard:last-child {
		border-right: none;
	}

div#internetDescription,
div#tvDescription,
div#streamTvDescription,
div#phoneDescription,
div#securityDescription {
	padding-top: 6px;
}

small#internetSubDescription {
	line-height: 15px;
	display: inline-block;
	padding-left: 6px;
}

small.businessMessage {
	line-height: 15px;
	display: inline-block;
}

.serviceYesMessage, .serviceNoMessage {
	color: white;
}

div#signupOptions {
	width: 40%;
	/*background-color: white;*/
	margin: auto;
	/*border-radius: 5px;*/
}

a.btn.btn-light.btn-signupoption {
	display: block;
	margin-bottom: 10px;
	white-space: normal;
	color: #007698;
}


a.btn.btn-light.btn-signupoption:last-child {
	margin-bottom: 0px;
}

a.btn.btn-light.btn-signupoption:hover {
	background-color: #e2e6ea;
	border-color: #dae0e5;
}

.prequal-product-link {
	transition: all 50ms ease-in-out;
}

	.prequal-product-link > .prequal-product-img > img:first-child {
		z-index: 500;
	}

.prequal-product-img {
	position: relative;
	height: 8em;
	display: block;
	width: 8em;
	margin: 0 auto 1.1em;
}

	.prequal-product-img img {
		position: absolute;
		bottom: 0px;
		left: 7px;
		-webkit-transition: all 50ms ease-in-out;
		-moz-transition: all 50ms ease-in-out;
		-o-transition: all 50ms ease-in-out;
		transition: all 50ms ease-in-out;
	}

.prequal-product-link:hover > .prequal-product-img > img:first-child {
	opacity: 0;
}

a.prequal-product-link,
a.prequal-product-link:visited,
a.prequal-product-link:hover {
	color: white;
}

@media only screen and (max-width: 767px) {
	div#signupOptions {
		width: 80%;
	}


	.flexcontainer {
		max-width: 576px
	}

	.prequal-product-img {
		float: right;
		margin-top: 1.1em;
	}


	.serviceCard {
		display: none;
		position: relative;
		overflow: hidden;
		border-bottom: 1px dotted white;
		border-right: none;
		border-image: none;
		width: 100%;
	}

		.serviceCard:last-child {
			border-bottom: none;
		}

	div#internetDescription,
	div#tvDescription,
    div#streamTvDescription,
	div#phoneDescription,
	div#securityDescription {
		float: left;
		margin-top: 45px;
		padding-left: 0px;
	}

    .serviceImg {
        width: 110px;
    }

	div#internetDescription {
		margin-top: 35px;
	}

	small#internetSubDescription {
		float: left;
		clear: left;
		padding-left: 0px;
	}
}

.btn-address-lookup-toggle {
	background-color: #00afec !important;
	border: none !important;
    margin-top: -1.8em;
}
a#moreAddressPrequalInfoButton:active,
a#moreAddressPrequalInfoButton:focus {
    background-color: #0597c9 !important;
}

.expandPrequal {
	content: "\f0d7";
    margin-top: -2.5em;
}
	.btn-address-lookup-toggle:hover {
		background-color: #44c9f6 !important;
	}

	.btn-address-lookup-toggle:after {
		font-family: 'FontAwesome';
        content: "\f0d8"; 
        font-size: 2em;
    }

    .expandPrequal:after {
        content: "\f0d7";
    }

.triangle-warning-symbol:after {
	font-family: 'FontAwesome';
    content: "\f071";
}

.triangle-warning-symbol {
    font-size: 2.3em;
    margin-bottom: 0.2em;
}


/***********************************************************************************/
/********************************Custom Form Rules**********************************/
/***********************************************************************************/
.form-postal-code {
	text-transform: uppercase;
}

/*.form-required {
	padding-left: 0.45em !important;
	border-left: 0.40em solid red !important;
}*/

input, select, textarea {
	border-radius: 4px !important;
}


/***********************************************************************************/
/**************Funky controls cuz im tired of basic bootstrao***********************/
/***********************************************************************************/
.funkyradio div {
	clear: both;
	overflow: hidden;
}

.funkyradio label {
	width: 100%;
	border-radius: 4px;
	border: 1px solid #D1D3D4;
	font-weight: normal;
}

.funkyradio input[type="radio"]:empty,
.funkyradio input[type="checkbox"]:empty {
	display: none !important;
}

	.funkyradio input[type="radio"]:empty ~ label,
	.funkyradio input[type="checkbox"]:empty ~ label {
		position: relative;
		padding-top: 0.6em;
		padding-bottom: 0.6em;
		padding-left: 3.25em;
		padding-right: 0.3em;
		margin-top: 2em;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

		.funkyradio input[type="radio"]:empty ~ label:before,
		.funkyradio input[type="checkbox"]:empty ~ label:before {
			position: absolute;
			display: block;
			font-size: 1.8em;
			top: 0;
			bottom: 0;
			left: 0em;
			font-family: FontAwesome;
			content: '\f0c8';
			width: 1.4em;
			background: #999999;
			border-radius: 4px 0 0 4px;
			color: #eee;
			padding-left: 0.28em;
			padding-top: 0.345em;
		}

		.funkyradio input[type="radio"]:empty ~ label:before {
			content: '\f111';
		}

.funkyradio input[type="radio"]:hover:not(:checked) ~ label,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {
	color: #777;
}

	.funkyradio input[type="radio"]:hover:not(:checked) ~ label:before,
	.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {
		font-family: FontAwesome;
		content: '\f14a';
		color: #eee;
	}


.funkyradio input[type="radio"]:checked ~ label,
.funkyradio input[type="checkbox"]:checked ~ label {
	color: #333;
}

	.funkyradio input[type="radio"]:checked ~ label:before,
	.funkyradio input[type="checkbox"]:checked ~ label:before {
		content: '\f14a';
		background-color: #ccc;
		color: #ccc;
		font-style: regular;
	}

	.funkyradio input[type="radio"]:hover:not(:checked) ~ label:before,
	.funkyradio input[type="radio"]:checked ~ label:before {
		content: '\f192';
	}

.funkyradio input[type="radio"]:focus ~ label:before,
.funkyradio input[type="checkbox"]:focus ~ label:before {
	box-shadow: 0 0 0 4px #999;
}

.funkyradio-default input[type="radio"]:checked ~ label:before,
.funkyradio-default input[type="checkbox"]:checked ~ label:before {
	color: #333;
	background-color: #ccc;
}

.funkyradio-primary input[type="radio"]:checked ~ label:before,
.funkyradio-primary input[type="checkbox"]:checked ~ label:before {
	color: #fff;
	background-color: #2AABE2;
}

.funkyradio-success input[type="radio"]:checked ~ label:before,
.funkyradio-success input[type="checkbox"]:checked ~ label:before {
	color: #fff;
	background-color: #5cb85c;
}

.funkyradio-danger input[type="radio"]:checked ~ label:before,
.funkyradio-danger input[type="checkbox"]:checked ~ label:before {
	color: #fff;
	background-color: #d9534f;
}

.funkyradio-warning input[type="radio"]:checked ~ label:before,
.funkyradio-warning input[type="checkbox"]:checked ~ label:before {
	color: #fff;
	background-color: #f0ad4e;
}

.funkyradio-info input[type="radio"]:checked ~ label:before,
.funkyradio-info input[type="checkbox"]:checked ~ label:before {
	color: #fff;
	background-color: #5bc0de;
}


ul.funkyradio input[type="checkbox"] ~ label,
ul.funkyradio input[type="radio"] ~ label {
	margin-top: 0 !important
}

ul.funkyradio {
	list-style: none;
	padding-left: 0;
}

	ul.funkyradio input[type="checkbox"]:checked ~ label:before,
	ul.funkyradio input[type="radio"]:checked ~ label:before {
		color: #fff;
		background-color: #2AABE2;
	}