/*==============================================
Common 
================================================*/

#cloud_body {
    color: #333;
    font-size: 1rem;
    line-height: 1.5;
    font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', Arial, sans-serif;
    line-break: strict;
}

#cloud_body {
    width: 100%;
    background: #fff;
}

#cloud_body h1 {
    margin: 0;
    margin-top: 1.575rem;
    padding-top: 1.125rem;
    font-size: 1.4rem !important;
    font-weight: 500;
    line-height: 1.3;
}

#cloud_body h5.orange,
#cloud_body h5.orange a {
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #f57300 !important;
    font-size: 0.87rem;
    margin: 2.1875rem 0 0 0
}

#cloud_body h5.orange a:hover {
    color: #f71900 !important;
}

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

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

#cloud_body a:hover {
    color: #f57300;
}

.bigger-list {
    text-transform: uppercase;
}

#cloud_body .first {
    background: transparent;
    margin-left: 0;
    margin-right: 0;
    margin: 0 0.3125rem 0 0;
    padding: 0;
}

#cloud_body .bigger-list .first {
    margin-left: 0;
}

.container {
    margin: 0 auto;
    width: 66.25rem;
    max-width: 100%;
    position: relative;
}

.cloud_container {
    width: 48.75rem !important;
    overflow: hidden;
}

.small_larger {
    font-size: 1rem !important;
}

.grey_rule {
    border-top: 1px solid #b7b7b7;
}

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

.cloud_block.orange {
    background: #ef6000;
    overflow: hidden;
    margin: 0 0 3.125rem 0;
    padding-top: 2.1875rem;
}

.cloud_block.orange h2 {
    color: #fff;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 1.0625rem;
    margin: 0 !important;
    letter-spacing: 0.0625rem;
    display: block;
    padding: 0;
}

/*==============================================
Heading
================================================*/

.newcloud_heading p {
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 0.0625rem;
    font-size: 0.75rem;
    line-height: 1.6;
}

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

.newcloud_heading a:hover {
    background: #1284a9;
}

.newcloud_heading h1 {
    text-transform: none !important;
    float: left;
    clear: both;
    color: #000000 !important;
    letter-spacing: normal !important;
}

.newcloud_hero {
    border-bottom: none;
    width: 100%;
    background: #FFFFFF;
    background: -moz-linear-gradient(top, #FFFFFF 0%, #ececec 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFFFFF), color-stop(100%, #ececec));
    background: -webkit-linear-gradient(top, #FFFFFF 0%, #ececec 100%);
    background: -o-linear-gradient(top, #FFFFFF 0%, #ececec 100%);
    background: -ms-linear-gradient(top, #FFFFFF 0%, #ececec 100%);
    background: linear-gradient(to bottom, #FFFFFF 0%, #ececec 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#ececec', GradientType=0);
    overflow: visible;
    height: 11.8125rem;
}

.newcloud_heading .tagline {
    font-size: 1rem !important;
    color: #656565 !important;
    margin-top: 0;
    line-height: 1.5rem;
    font-weight: 300 !important;
    letter-spacing: normal !important;
    clear: both;
}

#cloud_body p.tagline {
    color: #3c3b3b;
    font-size: 1.3125rem;
    font-weight: 200;
    margin: 0.125rem auto 4.6875rem;
}

.tagline {
    color: #e3e3e3 !important;
    font-size: 1.25rem !important;
}

#cloud_body .cloud_heading a {
    color: #f57300;
}

#cloud_body .cloud_heading a:hover {
    color: #f71900;
}

.trade {
    font-size: 1.0625rem;
    vertical-align: top;
    margin: 0.3125rem 0 0 0 !important;
    display: inline-block;
    font-weight: 300;
    color: #b4b4b4 !important;
}

/*==============================================
Introduction
================================================*/

#cloud_body p.blue_smaller {
    font-weight: 300;
    color: #1d96bd;
    font-size: 1.3rem;
    line-height: 2.8125rem;
    margin: 1.1875rem 0 0.5rem;
}

/*==============================================
Two Columns
================================================*/

.two_column {
    display: flex;
    width: 105%;
    margin-left: -4%;
    overflow: hidden;
    margin-bottom: 1.875rem;
}

.twocol_one,
.twocol_two {
    flex: 1 1 23.125rem;
    margin-left: 4%;
}

/*==============================================
Sections
================================================*/

#cloud_body h2.blue {
    font-weight: 300;
    color: #1d96bd;
    font-size: 1.75rem;
    margin: 1.1875rem 0 0.25rem 0;
}

/*==============================================
Related
================================================*/

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

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

.more-left {
    display: inline-block;
    float: left;
    margin: 1.875rem 0.625rem 0 0;
    width: 65px;
/*    flex: 0 0 !important;*/
}

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

.more-right {
/*    width: 18.125rem;*/
    height: 6.5625rem;
    float: left;
    margin-bottom: 1.25rem;
    display: inline-block;
    flex: 1 1 !important;
}

#cloud_body .more-from-wolfram-link:hover h5 {
    color: #f71900 !important;
}

#cloud_body .twocol_one.related a,
#cloud_body .twocol_two.related a {
    display: flex;
}

.twocol_one.related, 
.twocol_two.related {
    width: 17.875rem;
}

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

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

@media all and (max-width: 1200px) {
    .cloud_container {
        padding-left: 3.125rem;
        padding-right: 3.125rem;
    }
}

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

@media all and (max-width: 900px) {
    /*    ====================================== Columns*/
    .newcloud_hero {
        height: auto !important;
    }
    #cloud_body p.tagline {
        margin: 0.125rem auto 3rem;
    }
    .two_column {
        overflow: unset;
    }
    .more-right {
        height: 8rem;
    }
}

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

@media all and (max-width: 600px) {
    html { min-width: 18.75rem; }
    /*    ====================================== Heading*/
    .cloud_container {
        padding-left: 1.875rem;
        padding-right: 1.875rem;
    }
    .newcloud_heading .tagline {
        line-height: 1.3 !important;
    }
    #cloud_body h1 {
        line-height: 1.1;
        margin-bottom: 0.5rem;
    }
    /*    ====================================== Columns*/
    .two_column {
        flex-direction: column;
    }
    .twocol_one,
    .twocol_two {
        flex: 1 1 100%;
    }
    .twocol_one.related, 
    .twocol_two.related {
        width: 100%;
    }
    /*    ====================================== Related*/
    .more-right {
        height: auto;
    }
}

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

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