* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'montserrat', sans-serif;
}

p {
  margin-block-start: 16px;
  margin-block-end: 16px;
}

ul, ol {
  padding-left: 40px;
}

/* For header/navigation */

.logo-img {
  height: 50px;
}
.menu-wrap {
  background-color: lightgrey;
}
nav {
  background-color: lightgrey;
  padding: 0 15px;
}
nav a {
  text-decoration: none;
  color: #284735;
}
.menu,
.submenu {
  list-style-type: none;
  padding-left: 0px;
}
.item {
  padding: 10px;
}
.item.button {
  padding: 9px 5px;
}
.item:not(.button) a:hover,
.item a:hover::after {
  /*font-weight: bold;*/
  text-shadow: 0px 1px 1px black;
}

/* Mobile menu */
.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.menu li a {
  display: block;
  padding: 5px 5px;
/*  font-size: 20px;*/
  font-weight: bold;
}

.menu li.subitem a {
  padding: 15px;
}

.toggle {
  order: 1;
  font-size: 20px;
}

.item.button {
  order: 2;
}

.item {
  order: 3;
  width: 100%;
  text-align: center;
  display: none;
}

.active .item {
  display: block;
}

.button.secondary { /*divider between buttons and menu links */
  border-bottom: 1px #444 solid;
}

/* Submenu up from mobile screens */
.submenu {
  display: none;
}

.submenu-active .submenu {
  display: block;
}

.has-submenu i {
  font-size: 12px;
}

.has-submenu > a::after {
  font-family: "Font Awesome 5 Free";
  font-size: 12px;
  line-height: 16px;
  font-weight: 900;
  content: "\f078";
  color: white;
  padding-left: 5px;
}
.has-submenu > a:hover::after {
  text-shadow: none;
}



.subitem a {
  padding: 10px 15px;
}

.submenu-active {
  color: white;
  background-color: #284735;
  border-radius: 3px;
}

.submenu-active a {
  color: white;
}
/* Tablet menu */
@media all and (min-width: 500px) {
  .menu {
    justify-content: center;
  }
  .logo {
    flex: 1;
  }
  .item.button {
    width: auto;
    order: 1;
    display: block;
  }
  .toggle {
    flex: 1;
    text-align: right;
    order: 2;
  }
  /* Button up from tablet screen */
  .menu li.button a {
    padding: 10px 15px;
    margin: 5px 0;
  }
  .button a {
    background: #284735;
    border: 1px #d0b67f solid;
    color: white;
  }
  .button.secondary {
    border: 0;
  }
  .button.secondary a {
    background: transparent;
    border: 1px #284735 solid;
    color: #284735;
  }
  .button a:hover {
    text-decoration: none;
  }
  .button:not(.secondary) a:hover {
    background: royalblue;
    border-color: darkblue;
  }
}
/* Desktop menu */
@media (min-width: 900px) {
  .menu {
    flex-wrap: nowrap;
    background: none;
  }
  .item {
    order: 1;
    position: relative;
    display: block;
    width: auto;
  }
  .subitem {
    border: 1px solid black;
  }
  .button {
    order: 2;
  }
  .submenu-active .submenu {
    display: block;
    width: 200px;
    position: absolute;
    left: 0;
    top: 50px;
    background: #284735;
    z-index: 100;
  }
  .submenu-active a {
    color: white;
  }
  
  .toggle {
    display: none;
  }
  
  .submenu-active {
    border-radius: 0;
  }
}

.main-content {
/*  height: 60vh;*/
  padding: 20px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 60px;
}
footer {
  position: fixed;
  width: 100%;
  bottom: 0;
  background-color: #284735;
  padding: 10px;
  color: white;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border-top: solid white 2px;
}
footer a {
  color: white;
}

#copyright {
  flex-grow: 1;
  text-align: right;
  padding-left: 20px;
}
#serviceContact {
  flex-grow: 1;
  text-align: left;
}


.internetTable {
  width: 100%;
  border: 1px solid black;
  border-collapse: collapse;
}

.internetTable td, .internetTable th {
  border: 1px solid black;
}

.internetTable th {
/*  background-color: #E0C492;*/
  background-color: #CCC;
}

.zebra-striped tr:nth-child(odd) {
  background-color: #EEE;
}
.zebra-striped th {
  background-color: #AAA;
}

table#ratesTable {
  border: 1px solid black;
  border-collapse: collapse;
}
table#ratesTable td, table#ratesTable th {
  border: 1px solid black;
  padding: 0px 15px;
}
#article-links {
    width: 200px;
    float: left;
    font-family: 'Open Sans', sans-serif;
  }
  #article-content {
    width: 750px;
    float: left;
      font-family: 'Open Sans', sans-serif;
      letter-spacing: 1px;

  }
  .article-image-left {
    width: 200px;
    margin-left: -200px;
    padding-right: 20px;
    float: left;
  }
  @media (max-width: 800px) {
  #article-links {
    width: 100%;
  }
  #article-content {
    width: 100%;

  }
  .article-image-left {
    display: none;


  }

  }


table#compareTable {
  border: 1px solid black;
  border-collapse: collapse;
}

table#compareTable td, table#compareTable th {
  width: 175px;
  border: 1px solid black;
  padding: 0px 5px;
}

table#compareTable th {
  background-color: #CCC;
}
div .mobileWrapper {
  width: 100%;
  overflow-x: auto;
}

.bannerButton {
   border: 1px solid #214332;
   background: darkgrey;
/*   background: -webkit-gradient(linear, left top, left bottom, from(#214332), to(#214332));
   background: -webkit-linear-gradient(top, #214332, #214332);
   background: -moz-linear-gradient(top, #214332, #214332);
   background: -ms-linear-gradient(top, #214332, #214332);
   background: -o-linear-gradient(top, #214332, #214332);*/
   padding: 14px 28px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   /*-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;*/
   /*box-shadow: rgba(0,0,0,1) 0 1px 0;*/
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #214322;
   font-size: 20px;
   text-decoration: none;
   vertical-align: middle;
   margin-bottom: 5px;
   font-weight: bold;
   }

.buttonLink {
   border: 1px solid #214332;
   background: #214332;
   background: -webkit-gradient(linear, left top, left bottom, from(#214332), to(#214332));
   background: -webkit-linear-gradient(top, #214332, #214332);
   background: -moz-linear-gradient(top, #214332, #214332);
   background: -ms-linear-gradient(top, #214332, #214332);
   background: -o-linear-gradient(top, #214332, #214332);
   padding: 14px 28px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 17px;
   text-decoration: none;
   vertical-align: middle;
   margin-bottom: 5px;
   font-weight: bold;
   }
.buttonLink:hover {
   border-top-color: #214332;
   background: #214332;
   color: lightgrey;
   }
.buttonLink:active {
   border-top-color: #214332;
   background: #214332;
   }
   
div.videoWrapper {
  max-width: 640px;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
div.videoWrapper * {
  display: none;
}

div.videoWrapper iframe {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#sidebar {
  padding-left: 10px;
  width: 225px;
  flex-shrink: 1;
}

.highlightSection {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.highlight {
   width: 350px;
   flex-grow: 1;
   flex-shrink: 1;
   background-color: #284735;
   color: white;
   margin: 10px;
   border-radius: 10px;
   padding: 10px;
   box-shadow: 5px 5px 5px grey;
}
.highlight2 {
   width: 300px;
   flex-grow: 0;
   flex-shrink: 1;
   background-color: lightgrey;
   color: #284735;
   margin: 10px;
   border: 1px #284735 solid;
   border-radius: 10px;
   padding: 10px;
   box-shadow: 5px 5px 5px #284735;
}

.highlight3 {
   width: 300px;
   flex-grow: 0;
   flex-shrink: 1;
   background-color: lightgrey;
   color: #284735;
   margin: 10px;
   border: 1px #284735 solid;
   /*border-radius: 10px;*/
   padding: 10px;
   box-shadow: 5px 5px 5px #284735;
}

.highlight4 {
   width: 300px;
   flex-grow: 0;
   flex-shrink: 1;
   background-color: #284735;
   color: white;
   margin: 10px;
   border: 1px solid white;
   border-radius: 10px;
   padding: 10px;
   box-shadow: 5px 5px 5px grey;
}



.highlightTitle {
  font-size: larger;
  font-weight: bold;
  margin-bottom: 10px;
  /*padding: 10px;*/
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.highlight a {
  color: white;
  font-weight: bold;
}

.highlight a:hover {
  color: lightgrey;
}

.highlightIcon {
  width: 50px;
  margin-right: 10px;
}

.highlightText {
  padding-left: 10px;
  padding-right: 10px;
}

.pageBanner {
  height: 550px;
  background-position: center center;
  background-size: cover;
}
.mainPageBanner {
  height: 300px;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mainPageBanner2 {
  height: 300px;
  background-position: center center;
  background-size: cover;
/*  background-image: linear-gradient(to right, #284735, lightgrey, lightgrey,
  #284735);*/
  background-image: radial-gradient(#eeeeee, #dddddd, #cccccc, #bbbbbb,
  #284735);
  display: flex;
  justify-content: center;
  border: solid 4px #284735;
}
.mainPageBannerLeft {
  width: 25%;
/*  border: solid 1px black; */
  display: flex;
  align-items: center;
  justify-content: center;
}
.mainPageBannerCenter {
  width: 50%;
/*  border: solid 1px black; */
  color: #5C5E65;
  font-size: 38px;
  text-align: center;
}
.mainPageBannerRight {
  width: 25%;
/*  border: solid 1px black; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.deviceTable {
  width: 100%;
  margin-bottom: 20px;
/*  border-left: 2px solid black;  
  border-right: 2px solid black;*/
  border-collapse: collapse;
  
}

.deviceTable td, .deviceTable th {
  padding: 5px;
  text-align: left;
  width: 50%;
}

.deviceTable th {
  padding-left: 10px;
  color: lightgrey;
}

.deviceTable tr {
  border-bottom: 1px solid black;
}

.deviceTable thead {
  background-color: #284735;
  height: 40px;
  border-radius: 10px;
/*  border: 1px solid black;*/
}

.deviceTable tbody {
  background-color: #EEEEEE;
}

.deviceTable th:first-child {
  border-radius: 10px 0 0 0;
}
.deviceTable th:last-child {
  border-radius: 0 10px 0 0;
}

.appLinksDiv {
  display: flex;
}

.appLinksDiv div {
  flex-shrink: 1;
}
.appLinksDiv img {
  width: 100%;
}

.imagesRight {
  max-width: 30%;
}
.imagesRight img {
  width: 100%;
}

#channelLineupDiv {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.channelDiv {
  width: 300px;
  border: solid black 1px;
  display: flex;
}
.channelNum {
  width: 40px;
}
.channelName {
  flex-grow: 1;
}

.basicTier {
  color: green;
  border-color: green;
}
.expandedTier {
  color: yellow;
  border-color: yellow;
}

.servicesContainer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
}
.servicesDiv {
  width: 300px;
  border: solid 2px #dddddd;
  text-align: center;
  border-radius: 10px 10px 0px 0px;
  background-color: #eeeeee;
  margin-bottom: 10px;
  
}
.servicesHeadImage {
  background-color: #284735;
  border-radius: 10px 10px 0px 0px;
  
}
.servicesBodyImage {
  width: 100%;  
}
.servicesBodyImage img {
  width: 100%;  
}


.servicesHeadImage img {
  width: 30%;
}
.servicesButton {
  border: 1px solid black;
  background: #284735;
  color: white;
  text-decoration: none;
  margin-bottom: 5px;
  padding: 5px;
  font-size: larger;
  font-weight: bold;
}

.socialRight {
  width: 50px;
/*  height: 200px; */
  border: 1px solid #284735;
  position: fixed;
  right: 0px;
  top: 50%;
  background-color: #EEEEEE;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  text-align: center;
  border-radius: 10px 0px 0px 10px;
}

.socialRight img {
  width: 60%;
  margin: 10px;
}
@media (max-width: 1200px) {
  .mainPageBannerCenter {
    font-size: 35px;
  }
}

@media (max-width: 1100px) {
  .pageBanner {
    height: 400px;
  }
  .mainPageBanner {
    height: 200px;
  }
  .mainPageBanner2 {
    height: 200px;
  }
  .mainPageBannerCenter {
    width: 75%;
    font-size: 29px;
  }
  .mainPageBannerRight {
    display: none;
  }
}
@media (max-width: 800px) {
  .pageBanner {
    height: 300px;
  }
  .mainPageBanner {
    height: 150px;
  }
  .mainPageBanner2 {
    height: auto;
    flex-wrap: wrap;
  }
  .mainPageBannerLeft {
    height: 200px;
  }
  .mainPageBannerCenter {
    width: 100%;
  }
  .highlight {
    width: 300px;
    margin: 5px;
  }
  .imagesRight {
    display: none;
  }
  .bannerButton {
    padding: 10px 20px;
    font-size: 16px;
  }
}

@media (max-width: 600px) {
  #copyright, #serviceContact {
    text-align: center;
  }
  .main-content {
    margin-bottom: 100px;
  }
.pageBanner {
    height: 200px;
  }
  .mainPageBanner {
    height: 100px;
  }
  .bannerButton {
    padding: 5px 10px;
    font-size: 10px;
  }
  

}
@media (max-width: 500px) {
  #sidebar {
    display: none;
  }
}
@media (max-width: 400px) {
  .pageBanner {
    height: 150px;
  }
  .mainPageBanner {
    height: 70px;
  }
}

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 5px;
  margin-bottom: 5px;
  border: 1px solid #ddd;
  background-color: #eee;
  width: 375px;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.card-container {
  padding: 2px 4px;
}
/*Nutrition Label Styles*/
.bbl {
  font-size:small;
  line-height:1.4;
  border:1px solid #000;
  float:left;padding:.5rem;
  margin-bottom:.5rem;
  background-color:#fff;
  min-width:250px;
  max-width:380px
}
.bbl a,.bbl a:active,.bbl a:hover,.bbl a:visited{
  color:#007bff
}
.bbl p{margin:0}
.bbl section{border-bottom:2px solid #000;padding:0 0 .25rem;margin:0 0 .5rem}
.bbl section h4{font-weight:700;font-size:.9rem;margin:0 0 .1rem}
.bbl section h4 span,.bbl section h5 span,.bbl section ul li span:last-of-type,.bbl section p span:last-of-type,.bbl section p a{
  float:right;font-weight:700
}
.bbl section h5{
  font-weight:400;font-size:.8rem;padding-left:1em;margin:0
}
.bbl section ul{
  padding:0 0 0 1em;margin:0 0 .5rem
}
.bbl section ul li{
  list-style-type:none;padding:0 0 0 .8em
}
.bbl section.header{border-bottom-width:10px}
.bbl section.header h1,h2{font-weight:700}
.bbl section.header h1,h2,h3{margin:0 0 .1rem}
.bbl section.header h1{font-size:2rem;border-bottom:2px solid #000}
.bbl section.header h2{font-size:1.2rem}
.bbl section.header h3{font-size:1rem}
.bbl section.header p{margin:0}
.bbl section.header p span:last-of-type{float:none}
.bbl section.monthly{border-bottom:2px solid #000;padding:0 0 .25rem;margin:0 0 .5rem}
.bbl section.monthly h4{
  font-weight:700;font-size:1rem;border-bottom:5px solid #000;margin:0 0 .1rem
}
.bbl section.monthly p{margin-top:.4em}
.bbl section.monthly p span{float:none;font-weight:700}
.bbl section.monthly p a{float:none}
.bbl section.additional-charges>h5:nth-of-type(0n+3){margin:0 0 .5rem}
.bbl section.discounts p{padding-left:1em;margin-top:.1rem}
.bbl section.discounts p a{float:none}
.bbl section.discounts ul{margin:.4em 0 .2em}
.bbl section.acp p{padding-left:1em}
.bbl section.acp p:last-of-type{padding:.2em 0 0 2em;font-weight:700}
.bbl section.acp p a{float:none}
.bbl section.speeds p{padding-left:1em}
.bbl section.data p{padding-left:1em}
.bbl section.policies p{font-weight:700}
.bbl section.support p{padding-left:1em;margin-top:.2em}
.bbl section.support p a{float:none}
.bbl section.footer{border-bottom:none;margin-bottom:0;padding-bottom:0}
.bbl section.footer p:nth-of-type(0n+2){margin:.2em 0}
.bbl section.footer p:nth-of-type(0n+2)a{float:right}
/*End Nutrition Label Styles*/