body {
margin:0;
padding: 0;
}

a:hover, a:active, a:focus {
   outline: 0;
}

.art-page {
  background-color:#FFF;
  font-weight: 300;

}
.all-games h1{
  padding-bottom: 10px;

}

.art-page ul li{
  width: auto;
}

.thumbnail {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    display: block;
    line-height: 1.42857;
    margin-bottom: 20px;
    padding: 4px;
    transition: border 0.2s ease-in-out 0s;
}

.thumb {
    margin-bottom: 5px;
}

.col-xs-15{
    width:20%;
}

/* article css */
#art-banner {
    background: rgba(0, 0, 0, 0) url("https://c.cs52.content.force.com/servlet/servlet.ImageServer?id=0155B0000004qGJ&oid=00D5B000000CuVd&lastMod=1474504916000") no-repeat scroll center 30% / cover ;
    height: 350px;
    background-color: #D3D3D3;
}

#art-no-banner {
    height: 350px;
    background-color: #D3D3D3;
}

#art-no-banner .art-header h2, #art-no-banner .art-header h3 {
  text-shadow: none;
  color: #000;
}

#sub-art-banner{
  background: rgba(0, 0, 0, 0) url("https://www.callofduty.com/content/dam/atvi/callofduty/blackops3/dlc/dlc4/BO3_DLC4_Hero.jpg") no-repeat scroll center 30% / cover ;
  height: 350px;
  margin-top: 25px;
  margin-bottom: 25px;
}

.art-header{
  color: #FFF;
  padding:20px 15px 40px 15px;

}

.tint-banner {
   background: rgba(0, 0, 0, 0.4);
   height: 100%;
}

.no-tint-banner {

}

.art-social-nav-bar {
    padding: 28px 0px 15px 0px; /* article followed adjustment*/
    margin-bottom: 25px;
    -webkit-box-shadow: 0px 0px 8px 1px #777;
           -moz-box-shadow: 0px 0px 8px 1px #777;
                box-shadow: 0px 0px 8px 1px #777;
}

/* added 5-10-17 */
.art-social-nav-bar p {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;

}

.art-follow-txt {
  padding-top:2px;
}

.art-social-nav-btns span {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
  /* padding: 0px; */
}

.art-social-nav-bar span{
  font-weight: 600;
}

.art-social-nav-bar span:hover{
  font-weight: 600;
  color: #5e6464;
}

.art-content p{
  margin:10px 0;
}

.art-header h2, .art-header h3 {
  text-shadow: 1px 1px 2px #000;

}

.art-header h2 {
  /*font-size: 36px;*/
  font-size: 40px;
  font-weight: bold;

}

.art-header h3 {
  font-size: 15px;
  font-weight: bold;

}

.art-content h5{
  /*padding:0px;
  margin: 0px;*/
  font-size: 25px;
  font-weight: bold;
  margin-top:10px;
}

.art-content i{
  font-weight:lighter;
  font-size: 11px;
  color: #8b8b8b;

}

.art-content{
   margin-bottom: 25px;
}

.art-content img{
  padding:15px 0px 0px 0px;
}

.art-related {
  border-top: 1px solid #5e6464;
  padding-top: 20px;
  margin-top: 20px;
}

.art-related a:link {
  color:#000;
  underline;
}

.art-related a:visited {
  color:#000;
}

.art-related a:hover {
  color:#000;
  text-decoration:none;
}

.art-related h4{
  font-size: 14px;
  font-weight: bold;
  padding-top: 5px;
  line-height: 18px;

}

.art-related h4:hover {
   text-decoration:underline;
}

.art-related img{
  padding-right: 10px;
}

.art-additional-options {
  border-top:
  1px solid #5e6464;
  padding-top: 40px;
  margin-top: 20px;
}

.pquote {
    font-weight: bold;
    padding: 5px;
    margin: 0 13px 13px 0;
}

.art-caption {
  /*padding-top:5%;*/
}

blockquote {

    font-size: 20px;
    margin: 0;
    border: none;
}

.breadcrumbs {
    color: #FFF;
    display: block;
    font: 900 12px/20px "Open Sans",sans-serif;
    margin: 10px 0px 0px 10px;

}
.breadcrumbs > a:link {
    color: #FFF;
    font: 900 12px/20px "Open Sans",sans-serif;
    text-decoration: none;
    margin: 0px 5px 0px 5px;
}

.breadcrumbs> a:first-of-type:link {
  margin-left:0px;
}

.breadcrumbs > a:hover {
    color: #FFF;
    text-decoration: underline;
}

.breadcrumbs > a:visited {
    color: #FFF;
}

.carousel-indicators {
    bottom: 0px;
}

.carousel-control.right, .carousel-control.left {
    background-image: none;
    height: 350px;
}

#sub-art-banner .carousel-caption {
    color: #fff;
    left: 15%;
    padding-top: 20px;
    position: absolute;
    right: 15%;
    text-align: left;
    top: 0;
    z-index: 0;
}

.art-hero-banner h2{
    font-size: 45px;
}

.art-hero-banner  a:link {
    color: #FFF;
}

.art-hero-banner  a:hover {
    color: #FFF;
}

.art-hero-banner a:visited {
    color: #FFF;
}

#banner-1 {
    background: rgba(0, 0, 0, 0) url("https://support.activision.com/servlet/servlet.ImageServer?id=0150B000005m14M&oid=00DU0000000HMgw&lastMod=1472789554000") no-repeat scroll center 30% / cover ;
    height: 350px !important;
    text-transform: uppercase;
}
#banner-2 {
    background: rgba(0, 0, 0, 0) url("https://support.activision.com/servlet/servlet.ImageServer?id=0150B000005m14W&oid=00DU0000000HMgw&lastMod=1472789606000") no-repeat scroll center 30% / cover ;
    height: 350px !important;
    text-transform: uppercase;
}
#banner-3 {
    background: rgba(0, 0, 0, 0) url("https://support.activision.com/servlet/servlet.ImageServer?id=0150B000005m14R&oid=00DU0000000HMgw&lastMod=1472789587000") no-repeat scroll center 30% / cover ;
    height: 350px !important;
    text-transform: uppercase;
}
#banner-4 {
    background: rgba(0, 0, 0, 0) url("https://support.activision.com/servlet/servlet.ImageServer?id=0150B000005m14b&oid=00DU0000000HMgw&lastMod=1472789632000") no-repeat scroll center 30% / cover ;
    height: 350px !important;
    text-transform: uppercase;
}

#art-bbt-btn a {
    background: rgba(0, 0, 0, 0) url("../../img/social_sprite2x.png") no-repeat scroll 0 0;
    display: block;
    height: 77px;
    width: 80px;
}


#navimg {
    background:url("../../img/social_sprite2x.png") no-repeat;
    /*display:inline-block;
    float: left;
    width:30px;
    height:50px;*/
    /*border:1px solid red;*/
}

.art-print-btn {
  width: 30px;
  height: 50px;
  display: inline-block;
  background-position:0px -81px;
}

.art-follow-btn {
    background-position:0px -50px;
}

.art-share-btn {
    background-position:0px -113px;
}

.art-print-btn {
    background: rgba(0, 0, 0, 0) url("../../img/social_sprite2x.png") no-repeat scroll 0 -81px / 100% auto;
    display: inline-block;
    float: left;
    height: 30px;
    width: 50px;
}

.art-follow-btn {
    background: rgba(0, 0, 0, 0) url("../../img/social_sprite2x.png") no-repeat scroll 0 -50px / 100% auto;
    display: inline-block;
    float: left;
    height: 30px;
    width: 50px;
    margin-bottom: 12px;
}
.art-follow-btn.following{
    opacity: 0.5;
}

.art-share-btn {
    background: rgba(0, 0, 0, 0) url("../../img/social_sprite2x.png") no-repeat scroll 0 -113px / 100% auto;
    display: inline-block;
    float: left;
    height: 30px;
    width: 50px;
}
.art-check-icon {
    background: rgba(0, 0, 0, 0) url("../../img/social_sprite2x.png") no-repeat scroll 0 0px / 100% auto;
    display: inline-block;
    float: left;
    height: 23px;
    margin-right: 5px;
    width: 23px;
    padding:10px 0;
}

.art-check-icon-grn {
    background: rgba(0, 0, 0, 0) url("../../img/social_helpful_sprite.png") no-repeat scroll 0 0px / 100% auto;
    display: none;
    float: left;
    height: 23px;
    margin-right: 5px;
    width: 23px;
    padding:10px 0;
}

.art-fb-icon {
    background: rgba(0, 0, 0, 0) url("../../img/social_sprite2x.png") no-repeat scroll 0 -137px / 100% auto;
    display: inline-block;
    float: left;
    height: 48px;
    margin-left: -15px;
    width: 50px;
    padding:10px 0;
}

.art-tw-icon {
    background: rgba(0, 0, 0, 0) url("../../img/social_sprite2x.png") no-repeat scroll 0 -182px / 100% auto;
    display: inline-block;
    float: left;
    height: 48px;
    margin-left: -15px;
    margin-right: 5px;
    width: 50px;
    padding:10px 0;
}

.art-email-icon {
    background: rgba(0, 0, 0, 0) url("../../img/social_sprite2x.png") no-repeat scroll 0 -226px / 100% auto;
    display: inline-block;
    float: left;
    height: 48px;
    margin-right: 5px;
    margin-left: -15px;
    width: 50px;
    padding:10px 0;
}

.art-editor {
}

.art-editor.profile {
    background-image: url("../../img/article-profile-img-sm.png");
    background-repeat: no-repeat;
    display: inline-block;
    float: left;
    width: 60px;
    height: 60px;
}

.art-editor h2, .art-editor h3, .art-editor p {

    margin: 0px 0px 0px 70px;
}

.art-editor h2{
    padding-top:2px;
    font-size: 11px;
    line-height: 11px;
    color: #000;
    font-weight: bold;

}

.art-editor h3{
    padding-top:5px;
    font-size: 18px;
    line-height: 18px;
    font-weight: bold;
    color: #000;

}
.art-editor p {
    color: #999;
    font-size: 18px;
}

.art-follow-btn link a:hover {
   font-weight: bold;

}

.art-helpful-btns div{
    display: inline-block;
    float: left;
    /*padding-top: 5px;*/
}
.art-helpful-btns span{
    border: 1px solid #d5d5d5;
    border-radius: 1px;
    margin-right: -1px;
}
.art-helpful-btns p{
    margin-right:5px;
}

/* added 5-10-17 */
.helpful-yes, .helpful-no{
    text-transform: uppercase;
}

.helpful-yes a:link, .helpful-no a:link {
padding:0 5px;
}

.helpful-yes a:hover{
    color:#5e6464;
}

.helpful-no a:hover{
    color:#5e6464;
}

.art-social-share-list{
    border:1px solid #555;
    width:52px;
    height:140px;
    position: absolute;
    background-color: #FFF;
    z-index: 1;
    margin-top: 10px;
    /*margin-left: 46px;*/
    display: none;
}

.art-helpful-btns.yes span:link {
}

.panel h4 {
    color:#000;
}

.panel h4:hover {
    color:#000;
}

.glyphicon {
    padding-right:5px;
}

/* added 5-11-17*/
.center-share {
}

#community-support a {
    background: rgba(0, 0, 0, 0) url("../../img/support-icons.png") no-repeat scroll 0 0;
    display: block;
    height: 77px;
    width: 80px;
}
#contact-us-support a {
    background: rgba(0, 0, 0, 0) url("../../img/support-icons.png") no-repeat scroll 0 -85px;
    display: block;
    height: 77px;
    width: 80px;
}
#product-support a {
    background: rgba(0, 0, 0, 0) url("../../img/support-icons.png") no-repeat scroll 0 -170px;
    display: block;
    height: 77px;
    width: 80px;
}
#ambassador-support a {
    background: rgba(0, 0, 0, 0) url("../../img/support-icons.png") no-repeat scroll 0 -258px;
    display: block;
    height: 77px;
    width: 80px;
}
#warranty-support a {
    background: rgba(0, 0, 0, 0) url("../../img/support-icons.png") no-repeat scroll 0 -355px;
    height:77px;
    width:80px;
}
#onlineStatus a {
    background: rgba(0, 0, 0, 0) url("../../img/support-icons.png") no-repeat scroll 0 -435px;
    height:77px;
    width:80px;
}
#community-support a:hover {
    background-position: -83px 0;
}
#contact-us-support a:hover {
    background-position: -83px -85px;
}
#product-support a:hover {
    background-position: -83px -170px;
}
#ambassador-support a:hover {
    background-position: -83px -258px;
}
#warranty-support a:hover {
    background-position: -81px -355px;
}
#onlineStatus a:hover {
    background-position: -81px -435px;
}
.support-options-mod {
    min-height: 160px;
    margin-bottom:25px;
}
.support-options-mod a:link {
    color: #000;
}
.support-options-mod a:visited {
    color: #000;
}
.support-options h3 {
    padding: 0 21px 15px;
    text-align: center;
}
.support-options p {
    color: #000;
    font-size: 14px;
    font-weight: bold;
    padding: 15px 0;
    text-align: center;
}
.support-options .product-support-link p a:hover {
    color: #0ba0de;
    text-decoration: none;
}
.support-options .community-support-link p a:hover {
    color: #74931b;
    text-decoration: none;
}
.support-options .ambassador-support-link p a:hover {
    color: #bf933e;
    text-decoration: none;
}
.support-options .contact-us-support-link p a:hover {
    color: #222;
    text-decoration: none;
}
.support-options .warranty-us-support-link p a:hover {
    color: #222;
    text-decoration: none;
}
.support-options .online-services-link p a:hover {
    color: #74931b;
    text-decoration: none;
}

.art-social-nav-btns a:link, .art-social-nav-btns a:visited {
    color:#000;
    text-decoration: none;
    text-transform: uppercase;/* added 5-10-17 */
    font-weight: 600;/* added 5-10-17 */
}

/* added 5-10-17 */
.art-social-nav-btn-inner {
    padding-top:5px;
}

.art-check-txt {
    padding-top:0px;
}


.art-social-nav-btn-inner:hover {
    cursor: pointer;
    opacity: 0.5;
}
.art-social-nav-btn-inner.following:hover{
    opacity: 1;
}
.art-social-nav-btn-inner.following .art-follow-btn,
.art-social-nav-btn-inner.following .art-follow-btn + div span{
    opacity: 0.5;
}

.helpful-yes-answered span{
    border: none;
    text-transform: uppercase;
}

/* sticky */

.sticky {
    position: fixed;
    width: 100%;
    /*left: 0;*/
    top: 0;
    z-index: 2;
    border-top: 0;
    background: rgba(255,255,255, .9);
    /*margin-right: 0px;
    margin-left: 0px;*/
}

div.article-followed {
  display: none;
    width: 225px;
    position: absolute;
    top: 460px;
    /*display: block;
    left:100px;*/
    -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,.075), 0 0 15px rgba(69,67,64,.6);
    box-shadow: inset 0 2px 2px rgba(0,0,0,.075), 0 0 15px rgba(69,67,64,.6);
}

div.article-followed-sticky {
  display: none;
    width: 225px;
    position: absolute;
    top: 75px;
    /*display: block;
    left:100px;*/
    -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,.075), 0 0 15px rgba(69,67,64,.6);
    box-shadow: inset 0 2px 2px rgba(0,0,0,.075), 0 0 15px rgba(69,67,64,.6);
}

div.article-followed-sticky:before {
    content: '';
    display: block;
    position: absolute;
    top: -8px;
    left: 50%;
    margin-left: -10px;
    width: 15px;
    height: 15px;
    background: #000;
    /*border-right: 1px solid #e7e7e7;
    border-left: 1px solid #1c1b1a;
    border-bottom: 1px solid #1c1b1a;*/
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
}

div.article-followed h4 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    padding: 10px;
    background-color: #0E0B07;
    color: #FFF;
}
div.article-followed div {
    background-color: #E7E7E7;
    border: 1px solid #1c1b1a;
    padding: 10px;
    font-size: 14px;
}
div.article-followed div a {
    text-transform: uppercase;
    text-decoration: underline;
}
div.article-followed:after {
    content: '';
    display: block;
    position: absolute;
    top: 110px;
    left: 50%;
    margin-left: -10px;
    width: 15px;
    height: 15px;
    background: #e7e7e7;
    border-right: 1px solid #e7e7e7;
    border-left: 1px solid #1c1b1a;
    border-bottom: 1px solid #1c1b1a;
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
}

div.article-followed.removePoint:after {
  content: none;
}

/* updated UI */

.sticky-nav ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   float: right;
}

.sticky-nav li {
   float: left;
   margin-left: 35px;
   /*padding:10px 0;*/
}

.sticky-nav li:before {
     position: absolute;
     margin: 0 0 0 -13px;
     min-height: 30px;
     background: url(../../img/social_sprite2x.png) no-repeat;
     width:31px;
     content:"";
     vertical-align: middle;

}

.sticky-nav li.follow:before {
    background-size: 50px;
    background-position: 1px -50px;
}

.sticky-nav li.highlight:before {
    background-size: 50px;
    background-position: -26px -50px;
}

.sticky-nav li.share:before {
    background-size: 50px;
    background-position: -6px -113px;
}

.sticky-nav li.print:before {
    background-size: 50px;
    background-position: -6px -80px;
}


.sticky-nav li a {
   display: block;
   color: #000;
   text-align: center;
   padding: 0px 16px;
   text-decoration: none;

   font-size: 14px;
   text-transform: uppercase;
   font-weight: 600;
}

.sticky-nav li a:hover {
    color: #5e6464;
}

/* updated UI */


@media only screen and (max-width:1200px){
    .art-social-nav-btns span {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0px;
    }
}

@media only screen and (max-width: 991px) {

  .art-social-share-list{
    margin-left: -28px;
    margin-top:30px;
    }

    .sticky-nav li {
       float: left;
       margin-left: 10px;
       padding:1px;
    }

}

@media only screen and (max-width: 990px) {
  .article-followed{
    right: 130px;
  }

}

@media only screen and (max-width: 950px) {
  .article-followed{
    right: 30px;
  }

}

@media only screen and (max-width: 768px) {
  .article-followed{
    right: 10px;
  }

}



@media only screen and (max-width: 767px) {

  .art-social-share-list{
    margin-left: -28px;
    margin-top:30px;
    }

    .art-header h2 {
    font-size: 30px;
    font-weight: bold;

    }

}

@media only screen and (max-width: 450px) {

  .art-social-share-list{
    margin-left: -28px;
    margin-top:30px;
    }

  .art-header h2 {
  font-size: 20px;
  font-weight: bold;
  }

  .sticky-nav li {
     float: left;
     margin-left: 10px;
     padding:10px 0;
  }

  .art-helpful-btns {
    margin-right:0px;
  }

  .help-txt p {
    margin-bottom: 2px;
  }

}

@media only screen and (max-width: 320px){

  .art-social-share-list{
    margin-left: -28px;
    margin-top:30px;
    }

   .art-header {
   padding-top: 0px;
  }
   .art-header h2 {
   font-size: 15px;
   font-weight: normal;

  }
   .art-header h3 {
   margin-top:0px;
   font-weight: normal;
  }

}