@media only screen and (min-width:774px) {
  #wrapper {
    width:694px;
    padding:20px;
  }
  body {
    padding:20px;
  }
  .row.spaced {
    margin-bottom:10px;
  }
  .main-left {
    margin-top:20px;
  }
  #info-box {
    padding: 0 20px 10px 20px;
  }
    #info-box h3 {
      line-height: 17px;
      font-size: 14px;
      margin-top: 20px;
      margin-bottom: 8px;
    }
  #info-button {
    bottom: -39px;
  }
  .row.spaced.main-content {
    margin-bottom: 20px;
  }
  .row.footer .content {
      padding-bottom: 15px;
  }
}

@media only screen and (min-width:480px) and (max-width:773px) {
  #wrapper {
    width:auto;
    max-width:688px;
    padding:17px;
  }
  body {
    padding:17px;
  }
  .row.spaced {
    margin-bottom:7px;
  }
  .main-left {
    margin-top:17px;
  }
  #info-box {
    padding: 0 17px 7px 17px;
  }
    #info-box h3 {
      line-height: 17px;
      font-size: 14px;
      margin-top: 17px;
      margin-bottom: 8px;
    }
  #info-button {
    bottom: -36px;
  }
  .row.spaced.main-content {
    margin-bottom: 17px;
  }
  .row.footer .content {
      padding-bottom: 12px;
  }
}

@media only screen and (min-width:400px) and (max-width: 479px) {
  #wrapper
  {
    width:auto;
    max-width:400px;
    padding:13px;
  }
  body {
    padding:13px;
  }
  .row.spaced {
    margin-bottom:3px;
  }
  .main-left {
    margin-top:13px;
  }
  #info-box {
    padding: 0 13px 3px 13px;
  }
    #info-box h3 {
      line-height: 17px;
      font-size: 14px;
      margin-top: 13px;
      margin-bottom: 8px;
    }
  #info-button {
    bottom: -27px;
    background-size: 75%;
  }
  .row.spaced.main-content {
    margin-bottom: 13px;
  }
  .row.footer .content {
      padding-bottom: 3px;
  }
}

@media only screen and (max-width: 400px) {
  #wrapper {
    width:auto;
    max-width:400px;
    padding:10px;
  }
  body {
    padding:10px;
  }
  .row.spaced {
    margin-bottom:0px;
  }
  .main-left {
    margin-top:10px;
  }
  #info-box {
    padding: 0 10px 1px 10px;
  }
    #info-box h3 {
      line-height: 17px;
      font-size: 14px;
      margin-top: 10px;
      margin-bottom: 8px;
    }
  #info-button {
    bottom: -24px;
    background-size: 75%;
  }
  .row.spaced.main-content {
    margin-bottom: 10px;
  }
  .row.footer .content {
      padding-bottom: 0px;
  }
}

@media only screen and (min-width:774px) {
  .col {
    float: left;
    display:inline;
  }
  .trustbroker-logo.desktop {
    display:block;
  }
}

@media only screen and (min-width:480px) and (max-width:773px) {
  .col-desktop {
    display:none;
  }
  .main-content {
    width:auto;
  }
  .row.spaced.footer {
    display:none;
  }
  .col-desktop {
    display:none;
  }
  .col-login .login-row {
    width:100%;
    float:none;
  }
  .col-login .login-row-form {
    width:100%;
    float:none;
  }
  .sap-title {
    font-size:12px;
  }
  .sap-title span {
    font-size:10px;
  }
  .trustbroker-logo.mobile {
    display:block;
  }
  .trustbroker-logo img {
  }
}

@media only screen and (max-width: 479px) {
  .col.left, td.first {
    display:none;
  }
  .col-desktop {
    display:none;
  }
  .main-content {
    width:auto;
  }
  .row.spaced.main-content .col.right {
    position:relative;
    left:0;
  }
  .col.login-logo, .col.login-label {
    float:left;
    display:inline;
    clear:none;
  }
  .col.login-logo {
    max-width:64px;
  }
  .col.login-label {
    width:auto;
    margin:0 0 0 10px;
  }
  .col.col-login {
    width:100%;
  }
  .trustbroker-logo img {
    width:158px;
    height:17px;
  }
  .sap-title {
    font-size:12px;
  }
  .sap-title span {
    font-size:9px;
  }
  .trustbroker-logo.mobile {
    display:block;
  }
  .copy p {
    font-size:8px;
  }
  .message.failure {
    margin-left: 0px;
  }
}

@media screen and (max-width: 400px) {
  @-ms-viewport {
    width: 320px;
  }
}