/********************************************
	RESPONSIVE DESIGN: RESPONSIVE-SITE.CSS

	01 HEADER / MASTHEAD
	02 TOOLTIPS
	03 REGISTRATION PAGE
	04 PROFILE AND PREFERENCES
	05 FOOTER
	06 LOGIN PAGE
	07 MISSING PROFILE INFO PAGE
	08 OPT-OUT PAGE
	09 FORGOT PASSWORD PAGE
	10 REGISTRATION COMPLETE PAGE
	11 EMAIL HELP PAGE

*********************************************/
/********************************************
	01 HEADER / MASTHEAD
*********************************************/
.sso.hybrid header {
    width: 100%;
  }
  @media screen and (max-width: 800px) {
    .SSO-PAGE > header > .masthead {
      float: none;
      text-align: center;
    }
    .SSO-PAGE > header > .masthead .logo {
      margin: auto;
    }
  }
  @media screen and (max-width: 600px) {
    #reset-pw.SSO-PAGE article {
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
    }
    #reset-pw.SSO-PAGE article section {
      width: 100%;
      padding: 10% 0 0px;
      min-height: 0;
    }
    #reset-pw.SSO-PAGE article section h3 {
      text-align: center;
    }
    #reset-pw.SSO-PAGE article form.horz-label .message {
      width: 240px;
      margin: auto;
      top: -25px;
      position: relative;
    }
    #reset-pw.SSO-PAGE article .validationError .icon,
    #reset-pw.SSO-PAGE article .validationPassed .icon {
      float: right;
      top: -30px;
      position: relative;
      margin-right: 5px;
    }
    #reset-pw.SSO-PAGE article form.horz-label input[type=text],
    #reset-pw.SSO-PAGE article form.horz-label input[type=password] {
      width: 100%;
    }
    #reset-pw.SSO-PAGE article .input-container {
      width: 100%;
      display: inline-block;
      float: none;
    }
    #reset-pw.SSO-PAGE article form.horz-label div.data-row {
      text-align: center;
      padding-bottom: 0px;
    }
  }
  @media screen and (max-width: 600px) and (max-width: 420px) {
    #reset-pw.SSO-PAGE article .validationError .icon,
    #reset-pw.SSO-PAGE article .validationPassed .icon {
      margin-right: 10%;
    }
  }
  /********************************************
      02 TOOLTIPS 
  *********************************************/
  @media screen and (min-width: 851px) {
    fieldset #tooltip-passwordrequirements,
    fieldset #tooltip-forumname {
      display: none;
      height: 0px;
      width: 0px;
      overflow: hidden;
      margin: 0px;
    }
    .ingame #tooltip-passwordrequirements,
    .ingame #tooltip-forumname {
      height: initial;
      width: initial;
      overflow: initial;
      margin: initial;
      border: 1px solid #555;
      padding: 20px;
    }
  }
  @media screen and (max-width: 850px) {
    div.ui-cluetip {
      display: none !important;
    }
    fieldset #tooltip-passwordrequirements,
    fieldset #tooltip-forumname {
      background-color: white;
      border: none;
      padding: 10px;
      margin-top: 0px;
      margin-bottom: 20px;
      color: black;
      display: initial;
      height: initial;
      width: initial;
      overflow: initial;
      margin: initial;
    }
    fieldset #tooltip-passwordrequirements.tooltip p,
    fieldset #tooltip-forumname.tooltip p {
      color: black;
      text-align: center;
    }
    fieldset #tooltip-passwordrequirements strong,
    fieldset #tooltip-forumname strong {
      color: black;
      font-weight: bold;
      font-size: 16px;
    }
    fieldset #tooltip-passwordrequirements ul,
    fieldset #tooltip-forumname ul {
      padding: inherit;
      margin-left: 20px;
    }
    fieldset #tooltip-passwordrequirements ul li,
    fieldset #tooltip-forumname ul li {
      list-style: initial;
      text-align: left;
    }
  }
  /********************************************
      03 REGISTRATION PAGE
  *********************************************/
  #register.SSO-PAGE {
    width: 90%;
    max-width: 1000px;
  }
  #register-beachhead.SSO.SSO-PAGE > article {
    padding-bottom: 50px;
  }
  #register-beachhead.SSO.SSO-PAGE > article > section {
    position: relative;
    top: 0;
    border: none;
    width: 49%;
    padding: 50px 8%;
    margin: 0 auto;
  }
  #register-beachhead.SSO.SSO-PAGE > article > section #chooseOtherPlatformRequest #platform-data-row {
    position: relative;
  }
  #register-beachhead.SSO.SSO-PAGE > article > section #chooseOtherPlatformRequest #platform-data-row .icon {
    float: none;
    position: absolute;
    top: 35px;
    left: 15px;
  }
  #register-beachhead.SSO.SSO-PAGE > article > section #chooseOtherPlatformRequest #platform-data-row .customStyleSelectBox .customStyleSelectBoxInner {
    height: 100% !important;
  }
  #register-beachhead.SSO.SSO-PAGE > article > section fieldset#link-accounts div.box,
  #register-beachhead.SSO.SSO-PAGE > article > section fieldset#link-social-accounts div.box {
    background-position: -1223px 0;
  }
  #register-beachhead.SSO.SSO-PAGE > article > section fieldset#link-accounts div.box:hover,
  #register-beachhead.SSO.SSO-PAGE > article > section fieldset#link-social-accounts div.box:hover {
    background-position: -1223px -130px;
  }
  #register-beachhead.SSO.SSO-PAGE > article aside#why-link.side-promo {
    width: 33%;
  }
  @media screen and (max-width: 999px) {
    #register-beachhead.SSO.SSO-PAGE {
      padding: 0;
    }
    #register-beachhead.SSO.SSO-PAGE > article > section {
      float: none;
      margin: 0 auto;
      padding: 50px 0;
      width: 480px;
    }
    #register-beachhead.SSO.SSO-PAGE > article aside#why-link.side-promo {
      width: 480px;
      margin: 0 auto;
      position: relative;
      top: 0;
      padding: 0;
      display: block;
    }
  }
  @media screen and (max-width: 768px) {
    #register.SSO-PAGE > article {
      width: 100%;
    }
    #register.SSO-PAGE > article > section {
      width: auto;
      min-height: 100%;
      margin: 0 auto;
      float: none;
    }
    #register.SSO-PAGE > article > section form.horz-label div.data-row {
      width: 90%;
      margin: 0 auto;
    }
    #register.SSO-PAGE > article > section form.horz-label div.data-row label {
      padding-right: 0px;
      width: 300px;
    }
    #register.SSO-PAGE > article > section .customStyleSelectBox {
      padding-left: 5px;
    }
    #register.SSO-PAGE > article > section #year-data-row .customStyleSelectBoxInner {
      width: 50px !important;
      margin: 0 15px 0 0;
      padding: 0 15px 0 0;
    }
    .SSO-PAGE#register form.horz-label div.data-row label.checkbox-label {
      width: 300px;
    }
    .SSO-PAGE#register form.horz-label div.message {
      margin: 0px;
    }
  }
  @media screen and (max-width: 540px) {
    body {
      overflow-x: hidden;
    }
    #register.SSO-PAGE {
      width: 100%;
    }
    #register.SSO-PAGE > article > section {
      padding: 0;
      max-width: 100%;
    }
    #register.SSO-PAGE > article > section form {
      margin: 0 auto;
    }
    #register.SSO-PAGE > article > section #login-info h6 {
      width: 300px;
      margin: 5px auto 15px;
    }
    #register.SSO-PAGE > article > section input[type="text"],
    #register.SSO-PAGE > article > section input[type="password"] {
      width: 280px;
    }
    #register.SSO-PAGE > article > section #country-data-row select#country {
      width: 300px !important;
    }
    #register.SSO-PAGE > article > section #country-data-row .customStyleSelectBox .customStyleSelectBoxInner {
      width: 242px !important;
    }
    #register.SSO-PAGE > article > section form.horz-label div.data-row {
      width: 90%;
    }
    #register.SSO-PAGE > article > section .customStyleSelectBoxInner {
      margin: 0 20px 0 0;
    }
    #register.SSO-PAGE > article > section #month-data-row .input-container {
      margin-right: 10px;
    }
    #register.SSO-PAGE > article > section #year-data-row .customStyleSelectBoxInner {
      width: 57px !important;
    }
    #register.SSO-PAGE > article > section .g-recaptcha {
      padding: 0;
    }
    #simplemodal-container {
      width: 90% !important;
      left: 50% !important;
      top: 50% !important;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
    }
    #simplemodal-container .account-deletion.account-modal .account-deletion-buttons-container {
      position: relative;
      width: 100%;
    }
    #simplemodal-container .account-deletion.account-modal .account-deletion-buttons-container .button-container {
      width: 100%;
      float: none;
      margin-top: 10px;
      max-width: unset;
      bottom: unset;
    }
    #simplemodal-container .account-deletion.account-modal .account-deletion-buttons-container .button-container button.submit {
      width: 100%;
      display: block;
      padding: 5px 15px;
    }
    #simplemodal-container .account-deletion.account-modal .account-deletion-buttons-container .button-container a.button {
      height: auto;
      display: block;
      margin: auto;
      padding: 5px 15px;
    }
  }
  @media screen and (max-width: 480px) {
    #register-beachhead.SSO.SSO-PAGE > article > section {
      width: 300px;
    }
    #register-beachhead.SSO.SSO-PAGE > article > section #link-accounts div.box ul {
      left: -10px;
    }
    #register-beachhead.SSO.SSO-PAGE > article > section #platform-data-row {
      padding: 0;
    }
    #register-beachhead.SSO.SSO-PAGE > article > section #platform-data-row .input-container {
      width: 292px;
    }
    #register-beachhead.SSO.SSO-PAGE > article > section #platform-data-row .submit {
      margin: 15px 3px 3px 3px;
    }
    #register-beachhead.SSO.SSO-PAGE > article > section #platform-data-row div.input-container .customStyleSelectBox {
      display: block !important;
      width: 253px;
      margin: 0 auto;
      padding: 0 0 10px;
    }
    #register-beachhead.SSO.SSO-PAGE > article > section #platform-data-row div.input-container select#otherPlatform {
      left: 50%;
      transform: translate(-50%, 0);
      display: block;
      -webkit-appearance: menulist-button;
    }
    #register-beachhead.SSO.SSO-PAGE > article aside#why-link.side-promo {
      width: 300px;
    }
  }
  /********************************************
      04 PROFILE AND PREFERENCES
  *********************************************/
  @media screen and (max-width: 1070px) {
    #account-profile.SSO-PAGE.SSO article > aside {
      width: 340px;
    }
    #account-profile.SSO-PAGE.SSO article > aside .promo-elite-signup,
    #account-profile.SSO-PAGE.SSO article > aside .promo-mw3-preorder {
      width: 340px;
    }
  }
  @media screen and (max-width: 1000px) {
    #account-profile.SSO-PAGE.SSO .masthead {
      float: none;
      margin: 0 auto;
      width: 425px;
    }
    #account-profile.SSO-PAGE.SSO menu#accounts-subnav {
      float: none;
      margin: 0 auto;
      width: 420px;
    }
    #account-profile.SSO-PAGE.SSO menu#accounts-subnav li {
      float: none;
      padding: 10px 0 0;
    }
    #account-profile.SSO-PAGE.SSO menu#accounts-subnav li a,
    #account-profile.SSO-PAGE.SSO menu#accounts-subnav li a:hover {
      display: block;
      margin: 0;
    }
    #account-profile.SSO-PAGE.SSO article > aside {
      float: none;
      margin: 0 auto;
      width: 425px;
    }
    #account-profile.SSO-PAGE.SSO article > aside .promo-elite-signup,
    #account-profile.SSO-PAGE.SSO article > aside .promo-mw3-preorder {
      display: none;
    }
    #account-profile.SSO-PAGE.SSO fieldset#link-accounts .unlink-default-account,
    #account-profile.SSO-PAGE.SSO fieldset#link-social-accounts .unlink-default-account {
      width: 100%;
    }
    #account-profile.SSO-PAGE.SSO article .account-column.left,
    #account-profile.SSO-PAGE.SSO article .account-column.right {
      max-width: 425px;
      width: 100%;
      float: none;
      margin: 0 auto;
    }
  }
  @media screen and (max-width: 480px) {
    #account-profile.SSO-PAGE.SSO {
      padding: 0;
    }
    #account-profile.SSO-PAGE.SSO article section fieldset#link-accounts div.box .avatar,
    #account-profile.SSO-PAGE.SSO article section fieldset#link-social-accounts div.box .avatar {
      margin: 25px 0;
    }
    #account-profile.SSO-PAGE.SSO article section fieldset#link-accounts div.box ul,
    #account-profile.SSO-PAGE.SSO article section fieldset#link-social-accounts div.box ul {
      left: 0;
    }
    #account-profile.SSO-PAGE.SSO article section #preferences-form li {
      width: auto;
    }
    #account-profile.SSO-PAGE.SSO article section #preferences-form li input {
      margin-left: 0;
    }
    #account-profile.SSO-PAGE.SSO article section #preferences-form .notification-class-label {
      width: auto;
    }
  }
  @media screen and (max-width: 480px) {
    #simplemodal-container {
      max-height: 90%;
      overflow: scroll;
    }
    #simplemodal-container a.unlink-button {
      bottom: 0px;
      position: relative;
      float: none;
      text-align: center;
      margin: auto;
      display: block;
    }
  }
  /********************************************
      05 FOOTER
  *********************************************/
  @media screen and (min-width: 1020px) {
    footer .footer-content {
      width: 75%;
    }
    footer .footer-content #partners {
      display: inline-block;
      width: auto;
    }
    footer .footer-content #partners li {
      width: auto;
      display: inline-block;
    }
    footer .footer-content #additional-info {
      display: inline-block;
    }
    footer .footer-content #additional-info li {
      float: none;
    }
    footer .footer-content #trademarks {
      text-align: justify;
    }
  }
  @media screen and (max-width: 420px) {
    footer .footer-content #partners li {
      margin: auto;
      display: inline-block;
    }
    footer .footer-content #partners li:first-of-type {
      display: block;
      float: none;
    }
    footer .footer-content #partners li a {
      display: inline-block;
    }
    footer .footer-content #partners {
      margin-top: 0px;
    }
  }
  /********************************************
      06 LOGIN PAGE
  *********************************************/
  #login {
    width: auto;
  }
  @media screen and (max-width: 540px) {
    .SSO-PAGE #frmLogin fieldset#login-info {
      margin-top: 35px;
    }
    #login header {
      min-height: 50px;
    }
    #login > article > section {
      width: auto;
      padding: 20px 30px;
      max-width: 100%;
      min-height: 100%;
    }
    #login > article > section > h3 {
      margin-bottom: 0px;
      font-size: 25px;
    }
    #login > article > section #frmLogin fieldset {
      margin-top: 5px;
    }
    #login > article > section #frmLogin fieldset h6 {
      font-size: 14px;
    }
    #login > article > section #frmLogin fieldset label {
      font-size: 18px;
    }
    #login > article > section #frmLogin fieldset #remember-me-div label {
      font-size: 14px;
      width: auto;
    }
    #login > article > section #frmLogin fieldset #login-button {
      font-size: 20px;
      padding-top: 10px;
    }
  }
  /********************************************
      07 MISSING PROFILE INFO PAGE
  *********************************************/
  @media screen and (max-width: 850px) {
    #register.missingInformation.SSO-PAGE #login-info {
      width: 100%;
    }
    #register.missingInformation.SSO-PAGE .input-container {
      width: 80%;
      position: relative;
    }
    #register.missingInformation.SSO-PAGE > article > section #login-info h6 {
      width: 100%;
    }
    #register.missingInformation.SSO-PAGE > article > section #country-data-row .customStyleSelectBox {
      padding: 7px 5% 10px 5%;
      width: 90%;
    }
    #register.missingInformation.SSO-PAGE > article > section #country-data-row .customStyleSelectBox .customStyleSelectBoxInner {
      width: 100% !important;
      margin-right: 5%;
      padding-right: 0%;
    }
    #register.missingInformation.SSO-PAGE > article > section #country-data-row select#country {
      width: 100% !important;
    }
    #register.missingInformation.SSO-PAGE > article > section form {
      overflow: hidden;
      width: 100%;
    }
    #register.missingInformation.SSO-PAGE > article > section form.horz-label div.data-row {
      width: 100%;
      margin-bottom: 15px;
    }
    #register.missingInformation.SSO-PAGE > article > section input[type="text"],
    #register.missingInformation.SSO-PAGE > article > section input[type="password"] {
      width: 90%;
      padding: 6px 5%;
      display: inline-block;
      margin: 0;
    }
    .missingInformation.SSO-PAGE#register form.horz-label .message {
      margin-left: 10px;
    }
    .missingInformation.SSO-PAGE#register .tooltip-fname {
      margin-top: 10px;
      width: 80%;
      float: left;
    }
    .missingInformation.SSO-PAGE#register > article > section {
      top: 0;
      min-height: 0;
    }
  }
  /********************************************
      08 OPT-OUT PAGE
  *********************************************/
  /** FOR SITES THAT USE ASIDE **/
  @media screen and (max-width: 850px) {
    .SSO-PAGE#opt-out article {
      padding-bottom: 0px;
    }
    .SSO-PAGE#opt-out article section {
      top: 0px;
      border: 0;
      margin: auto;
      width: 100%;
    }
  }
  @media screen and (max-width: 750px) {
    body > div.opt-out.wrapper#opt-out {
      width: 90%;
      margin: 100px auto 50px;
    }
    .SSO-PAGE#opt-out article section {
      width: 100%;
      padding: 0px;
    }
    #account-preferences-section > .comm-prefs #email,
    #account-preferences-section > .comm-prefs #changeEmailLink {
      width: 50%;
    }
    #opt-out #opt-out-image-background {
      width: 100%;
      overflow: hidden;
    }
    #opt-out #opt-out-image-background #opt-out-image {
      width: 100%;
      background-size: contain;
      background-repeat: no-repeat;
      background-color: transparent;
      background-position: center center;
    }
  }
  @media screen and (max-width: 500px) {
    .comm-prefs #preferences-header {
      display: block;
      text-align: center;
    }
    #account-preferences-section > .comm-prefs #email {
      width: 100%;
    }
    #account-preferences-section > .comm-prefs #changeEmailLink {
      width: 100%;
      margin-bottom: 10px;
    }
    .notification-class-checkbox-list {
      width: 45px;
    }
    .notification-class-label {
      width: auto;
    }
    form#preferences-form .notification-class-label {
      float: left;
      line-height: 18px;
    }
    .SSO-PAGE #preferences-form ul {
      float: left;
    }
    .SSO-PAGE #preferences-form ul .notification-class-checkbox-list {
      width: 10%;
    }
    .SSO-PAGE #preferences-form ul .notification-class-checkbox-list li {
      width: 100%;
      float: none;
      height: auto;
    }
    .SSO-PAGE #preferences-form ul .notification-class-checkbox-list li input {
      margin: 0px;
    }
    form#preferences-form .notification-class-label {
      width: 90%;
      float: left;
    }
    form#preferences-form > div > fieldset > ul > li {
      margin-bottom: 5px;
    }
    #account-preferences-section form#preferences-form div.opt-out label {
      width: 90%;
      margin-top: 0px;
    }
  }
  /********************************************
      09 FORGOT PASSWORD PAGE
  *********************************************/
  #forgot-pw.SSO-PAGE {
    max-width: 1000px;
    width: 100%;
  }
  #forgot-pw.SSO-PAGE fieldset div.input-container #email {
    width: 100%;
  }
  @media screen and (max-width: 480px) {
    #forgot-pw > article {
      width: 100%;
    }
    #forgot-pw > article > section {
      width: 280px;
      padding: 50px 0px;
      margin: 0;
    }
    #forgot-pw > article > section #email {
      width: 283px;
    }
  }
  /********************************************
      10 REGISTRATION COMPLETE PAGE
  *********************************************/
  .registrationComplete-modal.modal {
    max-width: 610px;
    width: 80%;
    min-width: 0;
  }
  @media screen and (max-width: 480px) {
    #forgot-pw > article {
      width: 100%;
    }
    #forgot-pw > article > section {
      width: 300px;
      padding: 50px 10px;
    }
    #forgot-pw > article > section #email {
      width: 283px;
    }
  }
  /********************************************
      11 EMAIL HELP PAGE
  *********************************************/
  @media screen and (max-width: 910px) {
    a #update-email > article {
      width: 100%;
    }
    a #update-email > article > section {
      float: none;
      margin: 0 auto;
      min-height: 0;
      padding: 50px 20px;
      width: 440px;
      position: relative;
      top: 0;
      margin: auto;
    }
    a #update-email > article aside#why-link.side-promo {
      width: 480px;
      margin: 0 auto;
      padding: 0;
      position: relative;
      top: 0;
      display: block;
    }
  }
  @media screen and (max-width: 480px) {
    a #update-email > article > section {
      padding: 50px 10px;
      width: 265px;
    }
    a #update-email > article aside#why-link.side-promo {
      width: 289px;
    }
  }