@font-face {
  font-family: 'AleckSansReg';
  src: url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/EOT/ATTAleckSans_W_Rg.eot'); /* IE9 Compat Modes */
  src: url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/EOT/ATTAleckSans_W_Rg.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/WOFF2/ATTAleckSans_W_Rg.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/WOFF/ATTAleckSans_W_Rg.woff') format('woff'), /* Pretty Modern Browsers */
       url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/TTF/ATTAleckSans_W_Rg.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/SVG/ATTAleckSans_W_Rg.svg') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'AleckSansMed';
  src: url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/EOT/ATTAleckSans_W_Md.eot'); /* IE9 Compat Modes */
  src: url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/EOT/ATTAleckSans_W_Md.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/WOFF2/ATTAleckSans_W_Md.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/WOFF/ATTAleckSans_W_Md.woff') format('woff'), /* Pretty Modern Browsers */
       url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/TTF/ATTAleckSans_W_Md.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/SVG/ATTAleckSans_W_Md.svg') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'AleckSansLt';
  src: url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/EOT/ATTAleckSans_W_Lt.eot');
  src: url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/EOT/ATTAleckSans_W_Lt.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/WOFF2/ATTAleckSans_W_Lt.woff2') format('woff2'),
       url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/WOFF/ATTAleckSans_W_Lt.woff') format('woff'),
       url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/TTF/ATTAleckSans_W_Lt.ttf')  format('truetype'),
       url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/SVG/ATTAleckSans_W_Lt.svg') format('svg');
}
@font-face {
  font-family: 'AleckSansLtIt';
  src: url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/EOT/ATTAleckSans_W_Lt.eot');
  src: url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/EOT/ATTAleckSans_W_LtIt.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/WOFF2/ATTAleckSans_W_LtIt.woff2') format('woff2'),
       url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/WOFF/ATTAleckSans_W_LtIt.woff') format('woff'),
       url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/TTF/ATTAleckSans_W_LtIt.ttf')  format('truetype'),
       url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/SVG/ATTAleckSans_W_LtIt.svg') format('svg');
}
@font-face {
  font-family: 'AleckSansBold';
  src: url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/EOT/ATTAleckSans_W_Bd.eot');
  src: url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/EOT/ATTAleckSans_W_Bd.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/WOFF2/ATTAleckSans_W_Bd.woff2') format('woff2'),
       url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/WOFF/ATTAleckSans_W_Bd.woff') format('woff'),
       url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/TTF/ATTAleckSans_W_Bd.ttf')  format('truetype'),
       url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/SVG/ATTAleckSans_W_Bd.svg') format('svg');
}
@font-face {
  font-family: 'AleckSansBoldItalic';
  src: url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/EOT/ATTAleckSans_W_BdIt.eot');
  src: url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/EOT/ATTAleckSans_W_BdIt.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/WOFF2/ATTAleckSans_W_BdIt.woff2') format('woff2'),
       url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/WOFF/ATTAleckSans_W_BdIt.woff') format('woff'),
       url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/TTF/ATTAleckSans_W_BdIt.ttf')  format('truetype'),
       url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/SVG/ATTAleckSans_W_BdIt.svg') format('svg');
}
@font-face {
  font-family: 'AleckSansBlack';
  src: url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/EOT/ATTAleckSans_W_Blk.eot');
  src: url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/EOT/ATTAleckSans_W_Blk.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/WOFF2/ATTAleckSans_W_Blk.woff2') format('woff2'),
       url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/WOFF/ATTAleckSans_W_Blk.woff') format('woff'),
       url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/TTF/ATTAleckSans_W_Blk.ttf')  format('truetype'),
       url('https://cdn.directv.com/content/dam/dtv/gmott/fonts/ATTAleckSans_Web/SVG/ATTAleckSans_W_Blk.svg') format('svg');
}
.nowrap {
  white-space: nowrap;
}
#devices,
#compare-packages {
    background-color: #000;
    -webkit-font-smoothing: antialiased;
}
#devices .row,
#compare-packages .row {
  margin: 0;
}
#devices div,
#compare-packages div {
  padding: 0;
}
#compare-packages .container-fluid {
  padding: 0 6.5vw;
  max-width: 1600px;
  margin: 0 auto;
}
#compare-packages .col-custom {
  width: 20%;
}
#compare-packages .legal {
  font-family: 'AleckSansLt';
  color: #fff;
  margin-top: 20px;
}
#compare-packages a {
  color: #008cf6;
  text-decoration: none;
}
#devices .desktop-xxl {
  display: none;
}
#devices li.tablet-up,
#compare-packages .title.tablet-up {
  display: none;
}
#compare-packages .title.desktop {
  display: none;
}
#compare-packages .channel.row > div {
    border-right: 1px solid #222;
}
#compare-packages .channel.row .ch--title,
#compare-packages .channel.row .ch--title div,
#compare-packages .container-fluid .row div:last-child {
    border-right: none;
}
#compare-packages .header {
    text-align: center;
    padding-bottom: 30px;
    border: solid #222;
    border-width: 0 0 1px;
    margin-bottom: 20px;
    -webkit-font-smoothing: antialiased;
    position:-webkit-sticky;
    position: sticky;
    padding-top: 50px;
    top: 0;
    background-color: #000;
    z-index: 1;
}
#compare-packages .title {
    font: bold 12px/13px 'AleckSansBold';
    color: #008cf6;
    text-transform: uppercase;
    display: block;
    margin: 0 auto;
    max-width: 60px;
}
#compare-packages .count {
    font: 13px AleckSansLt;
    color: #ccc;
    margin: 9px 0 4px;
    display: block;
}
#compare-packages .price {
    font: 17px AleckSansBold;
    color: #fff;
}
#compare-packages .price::before {
    content: '$';
}
#compare-packages .price::after {
    content: '/mo';
    font-size: 50%;
    vertical-align: super;
    font-family: AleckSansLt;
    color: #ccc;
}
#compare-packages .ch--title {
    font: 16px AleckSansLt;
    color: #fff;
    margin: 20px 0;
    -webkit-font-smoothing: antialiased;
}
#compare-packages .channel span {
    width: 15px;
    min-height: 11px;
    display: block;
    margin: 0 auto;
}
#compare-packages span.dash {
  display: flex;
  align-items: center;
}
#compare-packages .channel span.checked {
    background: url(https://cdn.directv.com/content/dam/dtv/prod/website_directvnow/modals/checkmark@2x.png) center no-repeat;
    background-size: contain;
}
#devices .container-fluid {
  padding: 0 6.5vw 100px;
  -webkit-font-smoothing: antialiased;
  max-width: 1600px;
}
#devices .row {
  /* border-bottom: 1px solid #444; */
  padding-top: 60px;
}
#devices .devices--divider {
  border-bottom: 1px solid #444;
  padding-bottom: 60px;
}
#devices h1 {
  font: 46px/42px 'AleckSansBold';
  letter-spacing: -1.8px;
  color: #008cf6;
  max-width: 200px;
}
#devices .on-the-web {

}
#devices h2 {
  font: 30px/30px 'AleckSansBold';
  letter-spacing: -1.1px;
  color: #fff;
  margin: 20px 0;
}
#devices p {
  margin: 0;
}
#devices .promo {
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 25px;
  /* max-width: 320px; */
}
#devices .promo.firetv {
  background: #fff url(https://cdn.directv.com/content/dam/dtv/prod/website_directvnow/modals/fire-tv-device@2x.jpg) no-repeat;
  /* background-position: 90% 82%; */
  background-position: 94% 70%;
  background-size: 152px 98px;
}
#devices .promo.roku {
    background: #fff url(https://cdn.directv.com/content/dam/dtv/prod/website_directvnow/modals/roku-tv-device@2x.png) no-repeat;
    /* background-position: 90% 82%; */
    background-position: 94% 70%;
    background-size: 107px 49px;
}
#devices .promo.apple {
  background: #fff url(https://cdn.directv.com/content/dam/dtv/prod/website_directvnow/modals/apple-tv-device@2x.jpg) no-repeat;
  background-position: 94% 70%;
  background-size: 152px 98px;
}
#devices .promo a {
  text-decoration: none;
  font: 12px 'AleckSansMed';
  letter-spacing: 0.4px;
  color: #008cf6;
}
#devices .promo--heading {
  font: 18px/18px 'AleckSansBold';
  color: #008cf6;
  margin-bottom: 5px;
  max-width: 225px;
}
#devices .promo--content {
  font: 12px/15px 'AleckSansLt';
  color: #333;
  max-width: 157px;
}
#devices ul {
  padding: 0;
  margin: 0;
  list-style: none;
  font: 16px/18px 'AleckSansLt';
  color: #fff;
}
#devices ul li {
  padding-bottom: 20px;
}
#devices ul em {
  font: 12px/14px 'AleckSansLtIt';
  color: #ccc;
}
#devices section .row:last-of-type {
  border: none;
}
#devices .on-the-go,
#devices .on-the-web {
  margin-top: 95px;
}
#devices svg {
  width: 72px;
  height: 46px;
}
#devices .legal--bottom {
  margin-top: 150px;
}

@media (min-width: 768px) {
  .pad-10 {
    padding-left: 10px!important;
  }
  #compare-packages .container-fluid {
    padding: 0 46px;
  }
  #compare-packages .col-custom {
    width: 13%;
  }
  #compare-packages .header {
    margin-bottom: 0;
    padding-bottom: 45px;
  }
  #compare-packages .row.channel > div {
      border-right: 1px solid #222;
  }
  #compare-packages .row.channel:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05);
  }
  #compare-packages .row.channel div:nth-child(2) {
    border-left: 1px solid #222;
  }
  #devices li.mobile {
    display: none;
  }
  #devices li.tablet-up,
  #compare-packages .title.tablet-up {
    display: block;
  }
  /* #compare-packages .header {
    border: none;
  } */
  #compare-packages .title {
      font-size: 18px;
      line-height: 18px;
      max-width: 75px;
  }
  #compare-packages .price {
      font-size: 26px;
  }
  #compare-packages .ch--title {
    line-height: 24px;
    padding-left: 5px;
  }
  #compare-packages .channel span {
      width: 20px;
      min-height: 64px;
  }
  #devices h1 {
    font-size: 48px;
    line-height: 48px;
    letter-spacing: -1px;
    margin-top: 12px;
  }
  #devices h2 {
    margin-top: 0;
  }
  #devices .promo {
    max-width: 326px;
  }
  #devices .promo {
    background-position: 96% 91%;
  }
  #devices .promo--content {
    max-width: 191px;
    margin-bottom: 10px;
  }
  #devices .on-the-go,
  #devices .on-the-web {
    margin-top: 220px;
  }
}
@media (min-width: 1024px) {
  #compare-packages .container-fluid {
    padding: 40px;
  }
  #compare-packages .header {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  #compare-packages .header > div {
    border-right: 1px solid #222;
  }
  #compare-packages .count {
    font-size: 18px;
  }
  #compare-packages .price {
    padding-bottom: 30px;
  }
  #compare-packages .ch--title {
    font-size: 18px;
  }
  #devices h1 {
    font-size: 64px;
    line-height: 55px;
  }
  #devices h2 {
    font-size: 32px;
    line-height: 32px;
  }
  #devices .promo {
    max-width: 444px;
  }
  #devices .promo.roku {
    background-position: 90% 60%;
    background-size: 130px 57px;
  }
  #devices .promo--content {
    font-size: 13px;
    max-width: 219px;
  }
}
@media (min-width: 1220px) {
  #compare-packages .container-fluid {
    padding: 40px 74px;
  }
  #compare-packages .col-custom {
    width: 15%;
  }
  #compare-packages .header .first {
    border-left: 1px solid #222;
  }
  #compare-packages .title.mobile {
    display: none;
  }
  #compare-packages .title.desktop {
    display: block;
  }
  #compare-packages .title {
    max-width: none;
  }
  #compare-packages .count {
    font-size: 20px;
  }
  #compare-packages .price {
      font-size: 36px;
  }
  #compare-packages .channel span {
      width: 25px;
  }
  #devices h2 {
    font-size: 36px;
    line-height: 36px;
    margin-bottom: 33px;
  }
  #devices .promo {
    max-width: 518px;
    padding: 15px;
  }
  #devices .promo--heading {
    font-size: 26px;
    line-height: 22px;
    max-width: 326px;
  }
  #devices .promo--content {
    font-size: 16px;
    line-height: 18px;
    max-width: 270px;
  }
  #devices .promo a {
    font-size: 16px;
  }
  #devices ul {
    font-size: 18px;
  }
  #devices ul li {
    padding-bottom: 30px;
  }
  #devices ul em {
    line-height: 24px;
  }
}
@media (min-width: 1600px) {
  #devices .desktop-xl-down {
    display: none;
  }
  #devices .desktop-xxl {
    display: block;
  }
  #compare-packages .container-fluid {
    padding: 50px 175px;
  }
  #compare-packages .price {
    padding-bottom: 45px;
  }
  #compare-packages .ch--title {
    font-size: 20px;
  }
  #devices .row {
    padding-top: 100px;
  }
  #devices h1 {
    font-size: 74px;
    line-height: 60px;
  }
  #devices h2 {
    font-size: 40px;
    line-height: 40px;
  }
  #devices .promo {
    padding: 12px 20px;
    max-width: 588px;
  }
  #devices .promo--heading {
    margin-bottom: 10px;
  }
  #devices .promo.apple {
    background-size: 114px 97px;
    background-position-y: 50%;
  }
  #devices ul {
    font-size: 20px;
    line-height: 22px;
  }
  #devices .devices--divider {
    padding-bottom: 100px;
  }
  #devices svg {
    width: 98px;
    height: 63px;
  }
}