body, html {
  height: 100%;
  overflow-x: hidden;
}

body {
	padding: 0;
	margin: 0;
	font-family: Verdana, Arial, Tahoma, Serif;
}

a {
	color: inherit;
	cursor: pointer;
}

a:link {
	color: inherit;
	text-decoration: none;
}

a:clicked {
	color: inherit !important;
	text-decoration: none;
}

ol {
	padding: 0;
	margin: 0;
}

hr {
	border: 0;
	border-bottom: 1px solid #d4d4d4;
}

#header {	
	position: relative;
	border-bottom: 1px solid #d4d4d4;
	padding: 5px;
	background: #0080ef;
	height: 60px;
}

#header ul {
	margin: 0 auto;
	text-align: center;
	display: table;
	padding: 15px;
}

#header ul li {
	display: inline-block;
	margin-right: 20px;
	list-style: none;
	font-size: 16px;
 	color: #fff !important;
}
 
#logo {
	position: absolute;
	left: 10px;
	top: 20px;
 	font-weight: bold;
	font-size: 26px;
	color: white !important;
	font-family: 'Lobster', cursive;
	font-family: 'Roboto', sans-serif;
}

#logo img {
 	height: 40px;
 	vertical-align: middle;
}

.logo-text {
 	font-weight: bold;
	font-size: 30px;
	color: black;
	font-family: 'Lobster', cursive;
	font-family: 'Roboto', sans-serif;
}

#mobile-menu-icon {
	display: none;
}

#mobile-menu{
	display: none;
}


#footer {
	border-top: 1px solid #d4d4d4;
	padding:1% 2% 1% 2%;
	background: #fff;
	color: black;
	min-width: 96%;
}


#footer li {
	list-style: none;
	display: inline-block;
	margin-right: 10px;
}

.footer-container-brochure {
	text-align: center;
}

.footer-container-dashboard {
	background: #d4d4d4;
	color: #000;
	padding: 20px;
 }

.footer-container-dashboard li {
	list-style: none;
}


img.loading-small  {
	min-height: 50px;
	max-height: 50px;
}

 

.green-button {
	font-weight: bold;
	font-size: 20px;
	color: white;
	background: #2E8B57;
	border-radius: 10px;
	border: 0;
	padding:15px;
	cursor: pointer;
}


.blue-button {
	font-weight: bold;
	font-size: 20px;
	color: white !important; 
	background: #0080ef;
	border-radius: 10px;
	border: 0;
	padding:15px;
	cursor: pointer;
}


.black-button {
	font-weight: bold;
	font-size: 20px;
	color: white;
	background: #000;
	border-radius: 10px;
	border: 0;
	padding:15px;
	cursor: pointer;
}

.small-text {
	font-size: 12px;
}

.lowercase-only {
	text-transform: lowercase;
}


#brochure-container {
	display: inline-block;
	min-width:100%;
	max-width: 100%;
	vertical-align: text-top;
	min-height: 100%;
	padding: 0%; 
	border-left: 1px  solid #d4d4d4;
	margin: 0 auto;
}


/*--------------BROCHURE----------------*/

#brochure {
	padding: 10px;
	background: #fff;
}

#brochure h1 {
	text-align: center;
	font-size: 30px;	
	font-family: 'Roboto', sans-serif;
	color: midnightblue;
}

#brochure h3 {
	text-align: center;
	font-size: 24px;	
	font-family: 'Roboto', sans-serif;
}

.clear {
	clear: both;
}
 

.error {
	color: red;
}

.success {
	color: dodgerblue;
}

.highlight-green {
	color: green;
}


img.brochure-logo  {
	min-height: 50px;
	max-height: 50px;
}

.brochure-container {
	padding: 10px;
}
 

/*--------------HOME ---------------*/


#home-splash {
	min-width: 80%;
	min-height: 80%;
	padding: 0 10% 0 10%;
 	vertical-align: text-top;
}

#home-splash .left {
	min-width: 46%;
	max-width: 46%;
	margin: 0 0 0 2%;
	padding: 0;
	display: inline-block;
	vertical-align: text-top;
}

#home-splash .right {
	min-width: 46;
	max-width: 46%;
	margin: 0;
	padding: 0;
	display: inline-block;
	vertical-align: text-top;
}

#home-splash .heading {
	font-size: 40px;
	padding: 20px;
}

#home-splash .caption {
	font-size: 20px;
	padding: 20px;
}

#home-splash .main-image img {
	min-width: 90%;
	max-width: 90%;
}

#home-splash .button-container {
	font-size: 20px;
	padding: 20px;
}

#more-splash {
	min-width: 100%;
	min-height: 100%;
	margin-top: 20px;
	padding: 10px;
	border-bottom: 1px solid #d4d4d4;
	vertical-align: text-top;
}

#more-splash .left {
	min-width: 46%;
	max-width: 46%;
	margin: 0 0 0 2%;
	padding: 0;
	display: inline-block;
	vertical-align: text-top;
	text-align: right;
}

#more-splash .right {
	min-width: 46%;
	max-width: 46%;
	margin: 0 0 0 2%;
	padding: 0;
	display: inline-block;
	vertical-align: text-top;
}

#more-splash .person-image img {
	min-width: 60%;
	max-width: 60%;
	background: #bbf3fd;
}

#more-splash .heading {
	font-size: 30px;
	padding: 20px;
}

#more-splash .caption {
	font-size: 15px;
	padding: 20px;
}

#more-splash .button-container {
	font-size: 20px;
	padding: 20px;
}

#home-features {
	margin: 0 auto;
	min-width: 90%;
	max-width: 90%;
}

#home-features .heading {
	font-size: 30px;
	padding: 20px 10px 20px 10px;
	text-align: center;
	margin-bottom: 0;
	font-family: Verdana, Arial, Tahoma, Serif;
}


#home-features li {
	display: inline-block;
	font-weight: 12px;
	display: inline-block;
	min-width: 30%;
	max-width: 30%;
	margin: 0 0.5% 0 0;
	text-align: left !important;
	vertical-align: text-top;
	border: 1px solid #d4d4d4;
	padding: 1%;
	border-radius: 5px;
}

#home-features li h3 {
	font-family: 'Roboto', sans-serif;
 	font-size: 25px;
	text-align: left;
	margin-bottom: 0;
}

#home-features li .caption {
 	font-size: 16px;
	text-align: left;
	padding:0;
	font-family: Verdana, Arial, Tahoma, Serif;
	font-weight: bold;
}

#home-features li lt {
	display: block;
	margin-bottom: 5px !important;
}


#home-banner {
	background: #0080ef;
	padding: 10px;
	font-size: 20px;
	font-weight: bold;
	color: #fff;
}

.blue-box {
	border: 3px solid #0080ef;
}

/*--------------TESTER----------------*/


.tester-start-box {
	text-align: center;
	padding: 20px;
	border: 2px solid black;
	border-radius: 20px;
	min-width: 40%;
	max-width: 40%;
	margin: 0 auto;
}

.tester-loading-box {
	display: block;
	position: relative;
	text-align: center;
	padding: 2%;
	min-width: 25%;
	max-width: 25%;
	margin: 0 auto;
}


.tester-loading-image-box {
	position: relative;
}

.tester-loading-image-box h3 {
	position: absolute;
	top: 40%;
	min-width: 100%;
	max-width: 100%;
}

.tester-loading-image-box img {
	min-width: 100%;
	max-width: 100%;
}

.tester-loading-box h2 {
	font-size: 20px;
	margin-top: 0;
}


img.tester-loading-box-finished-logo {
	min-width: auto;
	max-width: auto;
	min-height: 60px;
	max-height: 60px;
}


.tester-loading-center .final {
	font-size: 30px;
}

.tester-loading-image-box {
	position: relative;
}

 

.tester-loading-center {
	text-align: center;
	min-width: 100%;
	max-width: 100%;
}







/*--------------COMPARE----------------*/

#broadband-list {
	margin: 0 auto;
	min-width: 70%;
	max-width: 70%;
}


#navigation-bar {
	padding: 30px 10px 30px 10px;
	font-size: 20px;
	border-top: 1px solid #0080ef;
	border-bottom: 1px solid #0080ef;
	margin-bottom: 10px;
}

#navigation-bar select {
	padding: 10px;
	border: 0px;
	border-radius: 10px;
	background: #0080ef;
	font-size: 14px;
	color: white;
}

#navigation-bar li {
	display: inline-block;
	margin-right: 20px;
}

#navigation-more {
	margin: 40px 0 20px 0;
	text-align: center;
}


/*--------------DEAL----------------*/


deal {

	display: block;
	border: 2px solid #0080ef;
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 20px;

}

deal .left {
	vertical-align: text-top;
	display: inline-block;
	min-width: 20%;
	max-width: 20%;
}

deal .left img {
	min-width: 100%;
	max-width: 100%;
}

deal img.speed-logo {
	min-width: 20px;
	max-width: 20px;
}

deal .right {
	vertical-align: text-top;
	display: inline-block;
	min-width: 73%;
	max-width: 73%;
	padding: 2%;
}

deal .right h2 {
	margin-top: 0;
	margin-bottom: 10px;
}

deal .right .provider-name {
	padding-bottom: 10px;
	margin-top: 0;
	margin-bottom: 20px;
	border-bottom: 2px dotted #d4d4d4;
}

deal .right lt {
	display: inline-block;
}

deal .right .monthly-price {
	font-size: 24px;
	font-weight: bold;
}

deal .right .cta-block {
	margin: 50px 0 20px 0;
	text-align: right;
}

deal .right .monthly-price {
	display: inline-block;
	margin: 30px 10px 0 0;
}

deal .right .cta {
	display: inline-block;
	margin: 30px 0 0 0;
}


/*--------------PROVIDER----------------*/


.provider-container {

	margin: 0 auto;
	display: block;
	text-align: center;

}

.provider-row {
	display: inline-block;
	min-width: 100px;
	max-width: 100px;
	margin-right: 5px;
	margin-right: 5px;
	padding: 0;
	border: 1px #f4f4f4 solid;

}

provider img {
	min-width: 100px;
	max-width: 100px;
	min-height: 100px;
	max-height: 100px;
}


 

/*****************************MOBILE *******************************/
@media only screen and (max-width: 800px) {

	.hide-on-mobile {
		display: none !important;
	}

	.hide-on-desktop {
		display: block !important;
	}

	#header {
		height: 60px;
		position: relative;
	}

	#logo {
    
    font-size: 26px !important;
    
  }

	#brochure-header {
		display: none;
	} 
	#account-menu {
		display: none;
	} 

	#mobile-menu {
		position: absolute;
		display: none;
		z-index: 100;
		min-width: 94%;
 		background: #fff;
		padding: 3%;
	}

	#mobile-menu li {
		display: block;
		min-width: 100%;
		max-width: 100%;
		font-size: 25px;
		text-align: left;
		padding: 10px;
		border-bottom: 1px dotted #d4d4d4;
	 	color: #000;
  }

	#mobile-menu .smaller{
		font-size: 18px;
		padding-left: 30px;
  }


	.container {
		min-width: 100%;
		min-height: 100%;
	}

	.top-heading {
		font-size: 30px;
		padding: 10px;
		text-align: center;
	}

	#mobile-menu-icon {
		display: block;
		position: absolute;
		text-align: right;
		right: 10px;
		padding: 10px;
	}

	#mobile-menu-icon img {
		min-height: 30px;
		max-height: 30px;
	}


	#footer .footer-container-brochure {
			font-size: 12px;
	}

  
  /****** Home Splash ******/
  #home-splash  {
  	background: #voiddeebf7;
  }
	#home-splash .left {
		min-width: 100%;
		max-width: 100%;
		margin: 0 0 0 0%; 
		text-align: center;
	}
	#home-splash .left .caption {
		font-size: 16px;
	}

	#home-splash .right {
		min-width: 100%;
		max-width: 100%;
		margin: 0 0 0 0%; 
		text-align: center;
	}

	#home-splash .right img {
		padding: 20px 0 0 0 ;
		min-width: 70%;
		max-width: 70%;
		margin: 0 0 0 0%; 
	}


	#home-splash .heading {
		font-size: 30px;
		padding: 20px 10px 10 10px;
		font-weight: bold;
	}

	#home-splash .caption {
		font-size: 10px;
		padding: 10px;
	}

	#home-splash .caption-small{
		display: none;
	}

	#home-splash .button-container {
		padding:10px;
	}

  /****** More Splash ******/
	#more-splash .left {
		min-width: 48%;
		max-width: 48%;
		margin: 0 0 0 0%; 
		display: inline-block;
	}

	#more-splash .right {
		min-width: 48%;
		max-width: 48%;
		margin: 0 0 0 0%; 
		display: inline-block;
	}

	#more-splash .heading {
		font-size: 20px;
		padding: 10px;
	}

	#more-splash .caption {
		font-size: 10px;
		padding: 10px;
	}

	#more-splash h2 {
		 margin: 0 0 20px 0;
		 padding: 0 10px 0 10px;
	}



	#more-splash .person-image img {
		min-width: 100%;
		max-width: 100%;
	}


	/****** Home Features ******/
  #home-features  {
  	min-width: 90%;
  	max-width: 90%;
  }

  #home-features .heading  {
 		font-size: 30px !important;
 	}

 	#home-features h3 {
 		font-size: 14px !important;
 	}

	#home-features hr  {
		max-width: 80%;
		border: 0;
		border-bottom: 1px solid #c4c4c4; 
	}

	#home-features li  {
		text-align: center;
		display: block;
		min-width: 96%;
		max-width: 96%;
		padding: 2%;
		margin: 0 0 30px 0;
		border-radius: 5px;
	}

	#home-features li img {
		max-height: 100px;
	}


	/****** Bottom Splash *****/
	#bottom-splash .right h2 {
		 margin: 0 0 20px 0;
	}
 
	/** Accordion **/
	button.accordion-button {
		font-size: 20px;
		padding: 20px;
	}
	img.icon-accordion {
		height: 20px;
		position: absolute;
		right: 10%;
		top: 20%;
	}
	.accordion-panel {
	  padding: 0 10px 0 10px;
	}


	/****** About-Splash ******/
	.about-content {
		font-size: 18px;
		width: 90% !important;
		max-width: 90% !important;
		margin: 0 auto;
	}

	#about-splash {
		min-width: 90%;
		max-width: 90%;
		padding: 2%;
		vertical-align: text-top;
		margin: 0 auto;
	}


	#about-splash .left {
		min-width: 46%;
		max-width: 46%;
		margin: 0 0 0 0;
		padding: 0;
		display: inline-block;
		vertical-align: text-top;
		text-align: left;
	}

	#about-splash p {
		margin: 30px 0 30px 0;
		font-size: 16px;
	}

	#about-splash .heading {
		font-size: 30px;
		padding: 0px;
	}

	#about-splash .right {
		min-width: 46%;
		max-width: 46%;
		margin: 0 0 0 2%;
		padding: 0;
		display: inline-block;
		vertical-align: text-top;
		font-size: 12px;
	}

	#about-splash .person-image img {
		min-width: 100%;
		max-width: 100%;
		background: #bbf3fd;
	}

	#about-splash .caption {
		font-size: 15px;
		padding: 10px;
	}

	#about-splash .button-container {
		font-size: 20px;
		padding: 20px 10px 10px 10px;
	}

	/****** Contact Splash ******/
	#contact-splash .left {
		min-width: 100%;
		max-width: 100%;
		margin: 0 0 0 0;
		padding: 0;
		display: inline-block;
		vertical-align: text-top;
		text-align: left;
	} 

	#contact-splash .right {
		min-width: 100%;
		max-width: 100%;
		margin: 0 0 0 0%;
		padding: 0;
		display: inline-block;
		vertical-align: text-top;
	}

	/****** Contact Splash ******/
	.about-cooperate-logos img {
		min-width: 100%;
		max-width: 100%;
	}



	/*--------------COMPARE----------------*/

	#broadband-list {
		margin: 0 auto;
		min-width: 100%;
		max-width: 100%;
	}

	deal .left {
		min-width: 20%;
		max-width: 20%;
	}

	deal .right {
		min-width: 70%;
		max-width: 70%;
	}


	deal .right .cta-box {
		margin-top: 20px;
		text-align: left;
	}

	deal .right .monthly-price {
		display: block;
	}

	deal .right .cta {
		display: block;
		margin-bottom: 20px;
	}


	/*****************************TESTER*******************************/
 
  .tester-start-box {
		text-align: center;
		padding: 2%;
		border: 2px solid black;
		border-radius: 20px;
		min-width: 94%;
		max-width: 94%;
		margin: 0 auto;
	}

	.tester-loading-box {
		display: block;
		position: relative;
		text-align: center;
		padding: 3%;
		min-width: 94%;
		max-width: 94%;
		margin: 0 auto;
	}


	.tester-loading-image-box {
		position: relative;
	}

	.tester-loading-image-box h3 {
		position: absolute;
		top: 40%;
		min-width: 100%;
		max-width: 100%;
	}

	.tester-loading-image-box img {
		min-width: 100%;
		max-width: 100%;
	}


}


/*****************************MOBILE *******************************/
@media only screen and (max-width: 600px) {

	#logo {
    
    font-size: 18px !important;
    
  }

  #home-splash {
  	padding: 0 5% 0 5%;
  	max-width: 90%;
  }

  .provider-row {
		display: inline-block;
		min-width: 20%;
		max-width: 20%;
		margin-right: 2%;
		margin-right: 2%;
		padding: 0;

	}

	provider img {
		min-width: 100%;
		max-width: 100%;
		min-height: 100%;
		max-height: 100%;
	}

}