/*==============================================
Global styles
================================================*/

#cloud_body h1 {
    margin: 1.875rem 0 0;
    line-height: 1.3;
    font-weight: 500;
}

#cloud_body small {
    font-size: .7em;
    display: inline-block;
    margin: 0.313rem 0 0 0;
}

#cloud_body p {
    color: #656565;
    font-size: 0.9375rem;
    line-height: 1.9;
    font-weight: 400;
    margin-top: 0.313rem;
}

.cloud_block {
    position: relative;
    padding-bottom: 0.313rem;
}

.cloud_container {
    max-width: 48.75rem !important;
    width: 100% !important;
}

#cloud_body {
    color: #333;
    font-size: 1rem;
    line-height: 1.5;
    font-family: 'Microsoft YaHei', 'Hiragino Sans GB', Arial, sans-serif;
}

#cloud_body p.intro {
    margin: 0.1rem 0 1.494rem;
    font-size: 1.1655rem;
    line-height: 1.7;
    color: #505050;
}

#cloud_body h2.red {
    margin: 0.957em 0 0.585em 0;
    white-space: nowrap;
    font-weight: 300;
    color: #f71900;
    font-size: 1.9683rem;
}

.container {
    margin: 0 auto;
    width: 1060px;
    position: relative;
}

#cloud_body a {
    text-decoration: none;
    color: #dd1600;
}

.cloud_block {
    position: relative;
    padding-bottom: 2.188rem;
}

.grey_rule {
    border-top: 0.0625rem solid #b7b7b7;
}

#cloud_body h2 {
    font-size: 1.063rem
}

.two_column {
    overflow: visible;
    margin-bottom: 1.875rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.two_column>* {
    flex: 1 1 20rem;
}

.two_column.bottom-zero p {
    min-height: 3.56rem;
}

.bottom-zero {
    margin-bottom: 0 !important;
}

.credits-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 2.813rem 0;
}

.more-credits {
    max-width: 27rem;
}

.credits-table tr.first {
    border: 0;
}

.credits-table tr {
    border: 0.0625rem solid #9a9a9a;
}

.credits-table td {
    padding: 0.625rem 1.25rem;
    color: #737373;
    font-size: 1.032rem;
}

.credits-table .small {
    font-size: .747rem;
}

.cost {
    width: 12.5rem;
}

.credits-table .red {
    font-size: 1.328rem;
    margin-right: 0.1875rem;
}

.clearfloat {
    clear: both;
}

.grey_rule {
    border-top: 0.0625rem solid #b7b7b7;
}

.red {
    color: #dd1600;
}

#cloud_body h4.more-from-wolfram {
    font-weight: 600;
    font-size: 1.25rem;
    margin: 2.5rem 0 0.25rem 0;
}

/*==============================================
Wolfram Cloud Credits Heading
================================================*/

.newcloud_hero {
    border-bottom: none;
    width: 100%;
    background: transparent;
    height: auto !important;
    overflow: visible;
    line-height: 1.3;
}

.newcloud_heading {
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

.newcloud_heading h1 {
    font-size: 2.475rem !important;
    text-transform: none !important;
    float: left;
    clear: both;
    color: #000000 !important;
    letter-spacing: normal !important;
    margin: 1.0625rem 0 0;
    font-weight: 600;
}

.newcloud_heading a {
    float: left;
    padding: 0 0.5625rem 0 0.625rem;
    background: #dd1600;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.313rem 1.25rem 0.313rem 1.25rem;
    color: #fff !important;
    letter-spacing: 0;
}

/*==============================================
What can I do with Cloud Credits
================================================*/

.img-box {
    min-height: 8.25rem;
    position: relative;
}

.img-box img {
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    position: absolute;
}

.img-box+p {
    margin: 0 0 2.5rem 0;
}

/*==============================================
What uses credits
================================================*/

.credits-table th.first-th {
    padding: 0.625rem 0 0.313rem;
}

.credits-table th {
    text-transform: uppercase;
    text-align: left;
    color: #737373;
    font-size: 1.0625rem;
}

.red.bottom-zero+p {
    margin: 0.313rem 0 0.934rem 0px;
}

/*==============================================
What doesn't use credits
================================================*/

#cloud_body .what-doesnt-use-credits {
    width: auto;
    float: none;
    margin: 0 0 2.75rem 0;
    padding: 0;
}

#cloud_body .what-doesnt-use-credits li {
    display: block;
    width: auto;
    padding: 0 0 0.934rem 0.625rem;
    margin: 0 0 0.313rem 0;
    background: url('/cloud-credits/images/bullet.png') no-repeat 0 0.625rem;
    color: #737373;
}

/*==============================================
How do I manage my credits
================================================*/

.wider {
    float: none;
    display: inline-block;
    vertical-align: top;
}

.credit-check-img {
    display: inline-block;
    width: auto;
    float: right;
    margin: 0;
}

.thumbnail {
    /*margin: 2.5rem 0rem 0rem 2.5rem;*/
    float: right;
    margin-top: 2.5rem;
}

/*==============================================
Need more credits
================================================*/

.twocol_one {
    margin-right: 2rem;
}

.credits .credits-table {
    margin: 3.437rem 0 0;
}

.credits .credits-table td {
    padding: 0.625rem 0.7rem 0.625rem 0.934rem;
    color: #313131;
    line-height: 1.3;
}

.intro_button:hover {
    background-color: #f57300;
}

.intro_button {
    padding: 0.125rem 0.875rem 0.125rem 0.875rem;
}

.intro_button {
    height: 1.95rem;
    background-color: #dd1600;
    color: #fff;
    font-size: 0.85rem !important;
    text-align: center;
    float: left;
    margin-left: 0rem;
    border-radius: 0.25rem;
    display: inline-block;
    color: #fff !important;
    text-decoration: none;
}

/*==============================================
For use with - footer
================================================*/

.more-from-wolfram-link {
    overflow: hidden;
    display: inline-block;
    margin: 0.625rem 0 0 0;
}

.more-from-wolfram {
    color: #656565;
}

.more-from-wolfram-link {
    overflow: hidden;
    display: inline-block;
    margin: 0.625rem 0 0 0;
}

.more-left {
    display: inline-block;
    float: left;
    width: 4.062rem;
}

.more-left img {
    max-width: 100%;
    display: inline-block;
}

.more-right {
    float: left;
    margin-bottom: 1.25rem;
    display: inline-block;
}

#cloud_body h5.orange,
#cloud_body h5.orange a {
    font-weight: 700;
    letter-spacing: 0.0625rem;
    text-transform: uppercase;
    color: #f57300 !important;
    font-size: 0.934rem;
    margin: 1.563rem 0 0 0.625rem;
}

/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for medium screens (1200px)
   ========================================================================== */

@media all and (max-width: 1200px) {
    .container {
        padding: 0 2.125rem;
    }
    /*heading 2*/
    #cloud_body h2.red {
        white-space: pre-wrap;
    }
    /*how do I manage my credits*/
    .credit-check-img img {
        float: left;
    }
}

/* styles for medium screens (900px)
   ========================================================================== */

@media all and (max-width: 900px) {
    .two_column>* {
        flex: 1 1 auto;
    }
    .two_column.bottom-zero>* {
        flex: 1 1 17.5rem;
    }
    /*footer links*/
    .two_column .for_use_link a {
        width: 30rem;
    }
}

/* styles for medium screens (600px)
   ========================================================================== */

@media all and (max-width: 600px) {
    /*align left the img*/
    .img-box img {
        margin: auto auto auto 0;
    }
    .two_column.bottom-zero>* {
        flex: 1 1 auto;
    }
    /*minimize credit table padding*/
    .credits-table td {
        padding: 0.5rem;
    }
    .twocol_one {
        margin-right: 0;
    }
    /*footer links*/
    .two_column .for_use_link a {
        width: 100%;
    }
}

/* styles for medium screens (320px)
   ========================================================================== */

@media all and (max-width: 320px) {}