/**
 * Responsive Page Styles
 * ------------------------------------------

 * breakpoint:
 * xs --- first query
 * sm --- min-width: 576px
 * md --- min-width: 768px
 * lg --- min-width: 992px
 * xl --- min-width: 1200px
 *
 * @author 独特工具箱
 * @url    https://www.dute.org
 */

/** small screen */
@media only screen and (min-width: 576px) {
    .code-snapshot-top-option-container > .top-option-item + .top-option-item {
        margin-left: 3rem;
        margin-top: 0;
    }
}

/** middle screen */
@media only screen and (min-width: 768px) {
    .container.container-fw-xs {
        padding: auto!important;
    }
    .page-header {
        padding-top: 25px;
        padding-bottom: 20px;
    }
    .site-title img {
        width: auto;
    }
    main > section + section {
        margin-top: 40px;
    }
    .hero {
        padding-top: 40px;
        padding-bottom: 0;
        background-position: right -112px center;
        border-bottom: 2px solid #f4f4f4;
    }
    .hero-content h2 {
        font-size: 2.2rem;
        font-weight: 400;
    }
    .lead {
        font-size: 1.4em;
        font-weight: 300;
        letter-spacing: 1px;
        margin-bottom: 15px;
    }
    .alert {
        padding: 1.25rem;
    }
    .alert.alert-sm {
        padding: .8rem 1rem;
        font-size: .9rem;
    }
    .form-group > .row > label.control-label:not(.text-left) {
        text-align: right;
    }

    .button-group {
        justify-content: flex-start;
    }
    .button-group.button-group-center {
        justify-content: center;
    }
    .button-group > .btn {
        width: auto;
        margin-bottom: 0;
    }
    .button-group > .btn + .btn {
        margin-left: 15px;
    }

    .row.row-layout > [class*='col-'] + .col-xs-12 {
        margin-top: 0;
    }
    .row.row-control-group {
        align-items: flex-start;
    }
    .row-control-group:not(.no-margin) > [class*='col-'] + [class*='col-'] {
        padding-left: 0;
        margin-top: 0;
    }
    .row-list > .row > label {
        text-align: right;
    }
    .img-fw-xs {
        width: auto;
    }

    .card-wrap + .card-wrap {
        margin-top: 0;
    }

    .ad-banner-section {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    .ad-banner-section a,
    .ad-banner-section a:visited {
        display: inline-flex;
        border-radius: 4px;
    }
    .ad-banner-section a.with-ad-text::after {
        position: absolute;
        content: '广告';
        bottom: 0;
        right: 0;
        background-color: rgba(248,248,248,.7);
        color: rgba(255,255,255,.9);
        font-size: 12px;
        line-height: 1.2;
        padding: 3px 3px 2px 4px;
        border-top-left-radius: 2px;
    }

    .uploader-wrap {
        padding-top: 90px;
        padding-bottom: 90px;
    }
    .uploader-content {
        flex-direction: row;
    }
    .uploader-content .text-or {
        margin: 0 1rem;
    }
    .uploader-desc {
        font-size: 1.1rem;
    }

    .tabs::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        border-bottom: 1px solid #e4e4e4;
        z-index: 1;
    }
    .tabs > li {
        margin-right: 0;
        margin-bottom: 0;
        border-bottom: 0;
    }
    .tabs > li:first-child {
        margin-left: 10px;
    }
    .tabs > li.active {
        border-top: 1px solid #e4e4e4;
        border-left: 1px solid #e4e4e4;
        border-right: 1px solid #e4e4e4;
        border-bottom: 0;
        background-color: #fff;
        z-index: 2;
    }
    .tabs > li.active::before {
        content: '';
        position: absolute;
        left: -1px;
        right: -1px;
        top: -1px;
        border-top: 3px solid #f29587;
    }
    .tabs > li > a {
        padding: 9px 12px;
    }

    .content-header {
        padding: 40px 0;
    }

    .post-section {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .post-section .aside-box {
        font-size: .9em;
    }
    .post-header > h1 {
        font-size: 2.5em;
    }
    .post-header > .post-subtitle {
        font-size: 1.15em;
    }
    .post-header,
    .post-entry {
        padding-left: 0;
        padding-right: 0;
    }
    .post-entry h2 {
        font-size: 1.5em;
    }
    .post-entry h3 {
        font-size: 1.15em;
    }
    .post-item + .post-item {
        border-top: 1px solid #eee;
        margin-top: 0;
    }
    .post-item .post-title {
        font-size: 1.3em;
    }
    .post-excerpt {
        font-size: .95em;
    }
    .related-posts {
        margin-top: 1rem;
    }
    .related-posts .post-title {
        font-size: 1.2em;
    }
    .related-posts .post-excerpt {
        line-height: inherit;
    }
    .post-section-title {
        font-size: 1em;
    }
    .post-section-description {
        font-size: .9em;
    }
    .post-single {
        padding: 2em;
    }
    .post-single .post-title {
        font-size: 1.75em;
    }
    .post-neighbour {
        flex-direction: row;
        padding: 0;
    }
    .post-neighbour * + * {
        margin-top: 0;
    }
    .post-neighbour > div,
    .post-neighbour > a,
    .post-neighbour > a:visited {
        width: 50%;
        padding: 1.2em;
    }
    .post-neighbour > div:last-child,
    .post-neighbour > a:last-child {
        text-align: right;
    }
    .post-neighbour strong {
        display: block;
        margin-right: 0;
    }
    .tag-list-header h1 {
        font-size: 1.75rem;
    }
    .hz-list > li,
    .hz-list.three-col-xs > li {
        width: 16.6666667%;
    }

    .hot-tool-section {
        padding-top: 40px;
    }
    .hot-tool-section .tool-item-body {
        height: 85px;
    }
    .hot-tool-section .tool-item-header h3 {
        font-size: 1.2em;
        letter-spacing: -.5px
    }
    .hot-category-wrap {
        width: 65%;
    }
    .hot-tool-wrap {
        padding: 25px 20px 20px 20px;
    }

    .tool-grid > li + li {
        margin-top: 0;
        margin-bottom: 20px;
    }
    .hot-tool-section .tool-grid > li {
        margin-top: 16px;
        margin-bottom: 0;
    }
    .tool-grid .tool-item-header {
        padding: 10px 16px;
    }
    .hot-tool-section .tool-grid .tool-item-header {
        padding: 0;
    }
    .category-info-header {
        padding: 1.5em;
    }
    .category-icon-box {
        width: 56px;
        height: 56px;
        font-size: 2em;
        border-width: 3px;
    }
    .category-info-title h1 {
        font-size: 1.8em;
    }
    .tool-grid .tool-item-body {
        height: 125px;
        overflow: hidden;
    }

    .tool-item-footer {
        margin-top: 1.25em;
    }

    .tool-title {
        font-size: 2.2rem;
    }
    .tool-meta {
        font-size: 1rem;
    }
    .tool-summary {
        font-size: 1.125rem;
    }
    .tool-desc-entry {
        padding: 2.5em 3em;
    }
    .tool-desc-entry h2 {
        font-size: 1.85em;
    }
    .tool-desc-entry h3 {
        font-size: 1.2em;
    }
    .tool-desc-entry ul,
    .tool-desc-entry ol {
        margin-left: 3em;
    }
    .tool-desc-footer {
        padding-left: 2.2em;
        padding-right: 2.2em;
    }
    .alexa-rank > li > div {
        width: auto;
    }
    .alexa-rank > li > div:first-child {
        font-weight: normal;
    }
    .alexa-rank > li > div:last-child {
        margin-top: 0;
    }

    .pornhub-logo-options {
        width: 60%;
        margin: 0 auto;
    }

    .feature-section {
        padding: 60px 0;
    }
    .feature-header h3 {
        font-size: 1.8rem;
        font-weight: 400;
    }
    .feature-header h4 {
        font-size: 1.4rem;
        line-height: inherit;
        padding: 0;
    }
    .feature-header h4::after {
        width: 12%;
    }
    .feature-list li > h4 {
        font-size: 1.25rem;
        font-weight: 400;
    }
    .feature-list li > p {
        padding-left: 25px;
        padding-right: 15px;
    }

    .content-container {
        padding: 30px 0;
    }
    .content-container aside {
        margin-top: 0;
    }
    aside > .aside-box + .aside-box:not(.is_stuck) {
        margin-top: 1rem;
    }
    .aside-about {
        font-size: .9rem;
        padding-left: 1.5rem;
    }

    .track-info-header {
        padding: 1rem 1.5rem 0 1.5rem;
    }
    .track-title {
        font-size: 2rem;
    }
    .track-meta {
        font-size: .9rem;
    }
    .track-info-body {
        padding: 0 1rem 1rem 1.5rem;
    }
    .track-list {
        font-size: 1rem;
        margin-left: .8rem;
        margin-right: .8rem;
        margin-top: 2rem;
    }
    .track-list > li:not(:last-child) > div:last-child {
        padding-bottom: 1rem;
    }
    .track-list > li::before {
        top: -1px;
    }
    .track-list > li::after {
        top: 4px;
    }
    .track-list > li:first-child::before {
        width: 22px;
        height: 22px;
        left: -12px;
        top: -4px;
    }
    .track-list > li:first-child::after {
        width: 10px;
        height: 10px;
        left: -6px;
        top: 2px;
    }
    .track-list.signed-in > li:first-child::after {
        font-size: 1em;
        left: -9px;
        top: -5px;
    }

    .device-viewport {
        padding: 5rem 2rem;
    }
    .viewport-info {
        font-size: 4rem;
    }
    .device-feature-wrap {
        width: 80%;
    }
    .device-feature-title {
        font-size: 2rem;
    }
    .device-user-agent {
        margin-top: 3rem;
        padding: 3rem 0;
    }
    .device-user-agent-text {
        font-size: 1.35rem;
    }

    .search-header {
        padding: 30px 0;
        margin-bottom: 20px;
    }
    .search-header h1 {
        font-size: 1.8rem;
        margin-bottom: 0;
    }
    .search-result {
        border: 1px solid #e8e8e8;
        border-radius: 2px;
        padding: 30px;
        background:#fafafa;
    }
    .search-result-item + .search-result-item {
        margin-top: 25px;
    }
    .search-result-title {
        font-size: 1.2rem
    }
    .search-result-summary {
        font-size: .9rem;
    }
    .tool-content-wrap,
    .tool-content-body {
        padding: 30px;
    }
    .tool-content-body > .table-responsive {
        margin-left: -31px;
        margin-right: -31px;
    }
    .tool-content-wrap + .tool-content-wrap {
        margin-top: 1rem;
    }
    .tool-content-wrap > .tool-content-header {
        padding: 0 30px;
    }
    .tool-content-header > h2,
    .tool-content-header > h3,
    .tool-content-header > h4 {
        font-size: 1.05rem;
    }
    .tool-content-wrap .nit-title {
        font-size: 1.35rem;
        margin-left: -30px;
        padding-left: 26px;
    }

    .http-status-code-group + .http-status-code-group {
        margin-top: 3rem;
    }

    .domain-more-info {
        font-size: 1rem;
        padding-left: 48px;
    }
    .domain-content-wrap {
        padding: 40px;
    }
    .domain-content-wrap h3 {
        font-size: 1.5rem;
    }
    .domain-whois > p > label {
        width: 66px;
        margin-right: 15px;
    }
    .domain-whois > p > span {
        width: auto;
    }

    .chinese-amount-words {
        font-size: 2rem;
    }
    .chinese-amount-words > li {
        margin-right: 2.2rem;
    }
    .form-control-group-matches {
        margin-top: 0;
        height: 100%;
    }

    .logo-icon-list {
        margin-top: -10px;
    }
    .link-icon,
    .link-icon:visited {
        padding: 11px;
    }

    .link-icon > img {
        width: 36px;
    }

    .random-numbers > b {
        width: 15%;
    }
    .barcode-buttons {
        display: flex;
        justify-content: space-between;
    }
    .barcode-buttons > .btn + .btn {
        margin-left: 15px;
        margin-top: 0;
    }

    .pm25-title {
        font-size: 1.5rem;
    }
    .weather-subtitle {
        font-size: 1.6rem;
    }
    .weather-7-days > li,
    .weather-7-days > li:first-child {
        width: 12.428265%;
        margin-bottom: 0;
    }
    .weather-24-hours-chart {
        padding: 40px 30px 20px 30px;
    }
    .btn.btn-exchange {
        font-size: 1.2rem;
    }
    .rate-result {
        font-size: 2rem;
    }

    .timestamp-convert-wrap > fieldset {
        padding: .8rem 1.2rem 1.2rem 1.2rem;
    }
    .timestamp-convert-wrap > fieldset > legend {
        font-size: 1.4rem;
    }
    .time-convert-result-wrap {
        font-size: 1.5rem;
    }
    .date-input-row [class^=col-xs]:nth-child(-n + 3) {
        margin-bottom: 0;
    }
    .source-code-wrap {
        padding: 2.25rem;
    }
    .source-code-watermark {
        bottom: 5px;
        right: 12px;
        width: 146px;
    }

    .district-wrap > .row > div {
        margin-bottom: 1rem;
    }
    .district-wrap > .row > div + div {
        margin-top: 0;
    }

    .image-info-list > li > label {
        width: 25%;
    }
    .info-list > li > span {
        width: 75%;
    }
    .base64-convert-result-item {
        padding: 1.5rem;
    }
    .modal-wechat-qrcode .tingle-modal-box {
        width: 28%;
    }
    .modal-icon .tingle-modal-box {
        width: 40%;
    }
    .tingle-modal-box__content {
        padding: 2rem;
    }
    .tingle-modal-box__footer {
        padding: 1rem 1.5rem;
    }
    .feedback-param {
        padding-left: 3.5rem;
    }
}

/** large screen */
@media only screen and (min-width: 992px) {
    .random-numbers > b {
        width: 10%;
        font-size: 1.2rem;
    }
}

/** extra large screen */
@media only screen and (min-width: 1200px) {

}

/** --------------------------------------- */

@media only screen and (max-width: 575px) {
  .btn-block-xs {
    display: block;
    width: 100%;
  }
  .btn-block-xs + .btn-block-xs {
      margin-top: .7rem;
  }
  .button-group > .btn.btn-block-xs {
      width: 100%;
      margin-bottom: 0;
  }
  hr {
    margin-top: 15px;
    margin-bottom: 15px;
  }
}