/* WANE resources page styles.

   developer:   rmiske
   requires:    /common/framework/css/framework.zh.css
   ========================================================================== */



/* ==========================================================================
   setup the environment
   ========================================================================== */
.page-wrapper {
    font-family: 'Microsoft YaHei', 'Hiragino Sans GB', Arial, sans-serif;
}

.page-wrapper header,
.page-wrapper section {
    padding: 3.125rem 0;
}

.page-wrapper h1 {
    color: #dd1100;
    font-size: 2.8rem;
    padding-bottom: 1.5rem;
}
.page-wrapper h2 {
    color: #df5213;
    font-size: 1.125rem;
    line-height: 1.375rem;
    padding-bottom: 0.375rem;
}
.page-wrapper p {
    color: #222;
    font-size: 0.9375rem;
    line-height: 1.5625rem;
}



/* ==========================================================================
   header
   ========================================================================== */
#hero .mini-m {
    border-top: 1px solid #b8b8b8;
    padding-top: 3.125rem;
}

#hero .mini-m .vid { width: 533px; }
.embed-container { 
    height: 0; height: auto; 
    max-width: 100%; 
    overflow: hidden; 
    padding-bottom: 56.25%; 
    position: relative; 
} 
.embed-container iframe, 
.embed-container object, 
.embed-container embed { 
    height: 100%; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
}

#hero .mini-m .txt { padding-left: 3.25rem; }



/* ==========================================================================
   tiles
   ========================================================================== */
#tiles { 
    border-top: 1px solid #b8b8b8;
    overflow: hidden;
    padding-bottom: 0;
}
#tiles h2 { padding-top: 0.625rem; }

#tiles a:hover h2,
#tiles a:hover .chevron-after:after {
    color: #dd1100 !important;
}

#tiles .grid { margin: 0 -1.375rem; }

#tiles img {
    height: auto;
    max-width: 100%;
    width: 22.5rem;
}

#tiles .cf { padding-bottom: 3rem; }

#tiles .cf > * {
    display: block; 
    max-width: 25.25rem;
    width: 100%;
    padding: 0 1.375rem;
}
#tiles .cf:nth-child(2) > *,
#tiles .cf:nth-child(5) > * {
    margin: 0 auto;
}
#tiles .cf:nth-child(3) > *,
#tiles .cf:nth-child(6) > * {
    float: right;
}



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

/* styles for large screens (1200px)
   ========================================================================== */
@media all and (max-width: 1200px) {}


/* styles for medium screens (900px)
   ========================================================================== */
@media all and (max-width: 900px) {
    #hero .mini-m > * { display: block; }
    #hero .mini-m .txt { padding: 1.5rem 0 0; }

    #tiles .cf > * {
        float: none !important;
        margin: 0 auto;
    }
}


/* styles for small screens (600px)
   ========================================================================== */
@media all and (max-width: 600px) {
    #hero .mini-m .vid { width: 100%; }
}


/* styles for minimum supported screen width (320px)
   ========================================================================== */
@media all and (max-width: 320px) {}


/* printer styles
   ========================================================================== */
@media print {}