/* Resources page styles.

   @file        resources.css.zh
   @author      marionm, tajudeen
   ========================================================================== */

/* shared
   ========================================================================== */

.section-wrapper .width {
    padding: 1.5625rem 0 3.125rem 0;
    font-family: 'Microsoft YaHei', 'Hiragino Sans GB', Arial, sans-serif;
}

.section-wrapper .container {
    display: flex;
}

#learn .container {
    flex-direction: column;
}

.section-wrapper .resource_row {
    display: flex;
    justify-content: space-between;
}

.section-wrapper .column {
    flex-basis: 25%;
}

.section-wrapper .column.right {
    padding: 0;
}

#learn .resource_row.cf.first {
    margin-bottom: 3.125rem;
}

.section-wrapper h3 {
    margin: 0 0 2.5rem 0;
    color: #434343;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 2rem;
}

.section-wrapper h4 {
    margin: 0 0 0.4375rem 0;
    color: #df5213;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25rem;
}

.section-wrapper img {
    display: block;
    margin: 0 0 0.9375rem 0;
    outline: 1px solid #c4c4c4;
}

.section-wrapper p {
    color: #000;
    font-size: 0.84375rem;
    font-weight: 400;
    line-height: 1.6;
}

.section-wrapper p span {
    color: #c10000;
}

/*shared override*/

.section-wrapper, .section-wrapper .width, .local-wrapper {
    min-width: unset !important;
}

.center_c {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

/* heading
   ========================================================================== */

#heading .width {
    padding: 3.125rem 0 1.5625rem 0;
}

#heading h2 {
    color: #d51100;
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 2.9375rem;
}

/* get help
   ========================================================================== */

#help {
    border: none;
}


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

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

@media all and (max-width: 1200px) {
    /* =========================    common*/
    .section-wrapper .column {
        /*flex-basis: 17.125rem;*/
    }
    .section-wrapper img {
        width: 17.125rem;
        height: auto;
    }
    .section-wrapper {
        padding: 0 2rem;
    }
    .section-wrapper .width {
        border-bottom: 1px solid #b8b8b8;
    }
    .section-wrapper, section#help .width {
        border-bottom: none;
    }
}

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

@media all and (max-width: 900px) {
    .section-wrapper .column {
        flex-basis: 285px
    }
    .section-wrapper img {
        width: 274px;
    }
    .section-wrapper .resource_row {
        flex-direction: column;
    }
    .center_c {
        margin-left: 0;
        margin-right: 0;
    }
    .section-wrapper .column {
        flex-basis: auto;
        margin-bottom: 3rem;
    }
    #learn .resource_row.cf.first {
        margin-bottom: 0rem; 
    }
}

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

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

}

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

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