@font-face {
  font-family: 'brandon_grotesquebold';
  src: url('../fonts/brandon_bld-webfont.woff2') format('woff2'), url('../fonts/brandon_bld-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'brandon_grotesquebold_italic';
  src: url('../fonts/brandon_bld_it-webfont.woff2') format('woff2'), url('../fonts/brandon_bld_it-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'brandon_grotesqueblack';
  src: url('../fonts/brandon_blk-webfont.woff2') format('woff2'), url('../fonts/brandon_blk-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'brandon_grotesqueblack_italic';
  src: url('../fonts/brandon_blk_it-webfont.woff2') format('woff2'), url('../fonts/brandon_blk_it-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'brandon_grotesquelight';
  src: url('../fonts/brandon_light-webfont.woff2') format('woff2'), url('../fonts/brandon_light-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'brandon_grotesquelight_italic';
  src: url('../fonts/brandon_light_it-webfont.woff2') format('woff2'), url('../fonts/brandon_light_it-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'brandon_grotesquemedium';
  src: url('../fonts/brandon_med-webfont.woff2') format('woff2'), url('../fonts/brandon_med-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'brandon_grotesqueMdIt';
  src: url('../fonts/brandon_med_it-webfont.woff2') format('woff2'), url('../fonts/brandon_med_it-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'brandon_grotesqueregular';
  src: url('../fonts/brandon_reg-webfont.woff2') format('woff2'), url('../fonts/brandon_reg-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'brandon_grotesqueRgIt';
  src: url('../fonts/brandon_reg_it-webfont.woff2') format('woff2'), url('../fonts/brandon_reg_it-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'brandon_grotesquethin';
  src: url('../fonts/brandon_thin-webfont.woff2') format('woff2'), url('../fonts/brandon_thin-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'brandon_grotesquethin_italic';
  src: url('../fonts/brandon_thin_it-webfont.woff2') format('woff2'), url('../fonts/brandon_thin_it-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: brandon_grotesquemedium;
  font-size: 20px;
  line-height: 30px;
  color: #575756;
  font-weight: 200;
}

.common--content {
  padding-bottom: 155px;
}

  .common--content .container {
    max-width: 704px !important;
  }

.download--link {
  width: 640px;
  color: #fff !important;
  font-family: brandon_grotesquemedium;
  font-size: 24px;
  line-height: 34px;
  display: block;
  text-align: left;
  padding: 13px 0;
  padding-left: 35px;
  cursor: pointer;
  text-decoration: none;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 55px;
  margin-top: 55px;
  font-weight: 200;
  border: solid 1px #fff;
  background: rgba(0, 0, 0, 0.3) url('../Content/Images/round-keyboard_tab-24px.svg') no-repeat right 36px top 15px !important;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  transition: opacity .25s ease-in-out;
}

.purple--link {
  width: 350px;
  color: #fff !important;
  font-family: brandon_grotesquemedium;
  font-size: 24px;
  line-height: 34px;
  display: block;
  text-align: center;
  /*border-radius: 4px;*/
  padding: 13px 0;
  cursor: pointer;
  text-decoration: none;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 74px;
  margin-top: 33px;
  font-weight: 200;
  border: solid 1px #fff;
  background: rgba(0, 0, 0, 0.3) !important;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  transition: opacity .25s ease-in-out;
}

  .purple--link:hover, .download--link:hover {
    text-decoration: none !important;
    opacity: 0.75!important;
  }

  #common__top__content {
    display: flex;
    flex-direction: row;
  }

  #common__top__content .common--top--left--content {
    width: 50%;
    background: #707070;
    color: #fff;
  }


  #common__top__content .common--top--right--content {
    width: 50%;
  }

    #common__top__content .common--top--right--content img {
      width: 100%;
      height: 100%;
    }

  #common__top__content .common--top--left--content h1 {
    font-family: brandon_grotesquemedium;
    font-size: 60px;
    line-height: 70px;
    margin-left: 26%;
    color: #fff;
    margin-block-start: 0;
    margin-bottom: 24px;
    margin-top: 13.35%;
    font-weight: 200;
    text-transform:uppercase;
  }

  #common__top__content .common--top--left--content #common__sub__text {
    font-family: brandon_grotesqueregular;
    font-size: 24px;
    line-height: 30px;
    margin-left: 26%;
    color: #fff;
    margin-block-start: 0;
    max-width: 60.5%;
  }

    #common__top__content .common--top--left--content #common__sub__text p{
      color:#fff!important;
    }

    .breadcrumbs {
      font-family: brandon_grotesquelight;
      font-size: 16px;
      margin-top: 48px;
      text-align: center;
      margin-bottom: 105px;
    }

.common--content h2 {
  font-family: brandon_grotesquemedium;
  font-size: 40px;
  line-height: 50px;
  color: #000;
  text-transform: none;
  margin-top: 33px;
  margin-bottom: 10px;
  font-weight: 200;
  text-transform: uppercase;
}

.common--content p{
  margin-top: 0;
  margin-bottom: 30px;
  font-family: brandon_grotesqueregular;
  color: #000;
}

.common--content div {
  font-family: brandon_grotesqueregular;
  color: #000;
}

.common--content ul, .common--content ul li {
  font-family: brandon_grotesqueregular;
  color: #000;
}

  .common--content ul li{
    padding-bottom:10px;
  }

  .common--content ul {
    padding-left: 25px;
    margin-bottom: 0;
  }

.tracking--list, .tracking--list td {
  border: none !important;
}

  .tracking--list, .tracking--list tr td:first-child {
    width: 52px !important;
    padding-bottom: 16px;
  }

    .tracking--list, .tracking--list tr td:first-child img {
      margin-right: 24px;
      cursor:pointer;
    }

      .tracking--list, .tracking--list tr td:last-child {
        white-space: nowrap;
        vertical-align: top;
        cursor: text;
      }

@media(max-width: 1300px){
  #common__top__content {
    flex-direction: column;
  }

    #common__top__content .common--top--left--content {
      width: 100%;
      text-align: center;
      padding-bottom: 33px;
    }


    #common__top__content .common--top--right--content {
      width: 100%;
    }

      #common__top__content .common--top--right--content img {
        width: 100%;
        height: auto;
      }

    #common__top__content .common--top--left--content h1 {
      font-family: brandon_grotesqueblack;
      font-size: 40px;
      line-height: 40px;
      margin-left: 0;
      color: #fff;
      margin-block-start: 0;
      margin-bottom: 24px;
      margin-top: 38px;
      max-width: 70%;
      margin-left: auto;
      margin-right: auto;
      font-weight: 500;
    }

    #common__top__content .common--top--left--content #common__sub__text {
      font-family: brandon_grotesquemedium;
      font-size: 24px;
      line-height: 30px;
      margin-left: 0;
      color: #fff;
      margin-block-start: 0;
      max-width: 100%;
      text-align: center;
      max-width: 65%;
      margin-left: auto;
      margin-right: auto;
    }
}

@media(max-width: 768px) {
  
  .breadcrumbs {
    margin-top: 28px;
    margin-bottom: 49px;
  }

  .common--content .container {
    max-width: 78.39% !important;
  }

  .download--link {
    margin-top: 55px;
    margin-bottom: 80px;
  }

  .common--content {
    padding-bottom: 123px;
  }
}

@media (max-width: 480px) {
  #common__top__content .common--top--left--content {
    padding-bottom: 30px;
    padding-top: 19px;
  }


  #common__top__content .common--top--right--content {
    width: 100%;
  }

    #common__top__content .common--top--right--content img {
      width: 100%;
      height: auto;
    }

  #common__top__content .common--top--left--content h1 {
    font-family: brandon_grotesqueblack;
    font-size: 25px;
    line-height: 30px;
    margin-left: 0;
    color: #fff;
    margin-block-start: 0;
    margin-bottom: 6px;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-weight: 500;
  }

  #common__top__content .common--top--left--content #common__sub__text {
    font-family: brandon_grotesquemedium;
    font-size: 20px;
    line-height: 25px;
    margin-left: 0;
    color: #fff;
    margin-block-start: 0;
    max-width: 100%;
    text-align: center;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
  }

  .breadcrumbs {
    margin-top: 20px;
    margin-bottom: 42px;
  }

  .common--content .container {
    max-width: 78.39% !important;
  }

  .download--link {
    margin-top: 15px;
    margin-bottom: 35px;
    width: 100%;
    background-position-y: 45px !important;
    font-size:16px;
  }

  .purple--link {
    width: 100%;
    margin-top: 12px;
    margin-bottom: 32px;
  }

  .common--content {
    padding-bottom: 123px;
  }

    .common--content h2 {
      font-family: brandon_grotesqueblack;
      font-size: 24px;
      line-height: 30px;
      margin-top: 13px;
      margin-bottom: 10px;
      font-weight: 500;
    }

    .common--content p {
      margin-top: 0;
      margin-bottom: 25px;
      font-size: 20px;
      line-height: 25px;
    }
}