/*! 無障礙AA調整版本：全面調整 font-size 的字型大小設定，由「絕對單位」改為「相對單位」 by Stan */
@media (min-width: 768px) and (max-width: 979px) {

}

@media (max-width: 767px) {

}

@media (min-width: 768px) and (max-width: 979px) {

}

@media (max-width: 767px) {
    .fnybox {
        display: none;
        width: 96%;
        color:#FFF;
        padding: 5px;
    }

    /* normal header in 1 line of wrapped text*/
    .metro .tile .text-header {
        font-weight: 300;
        font-size: 2.5rem;
        line-height: 30px;
        max-height: 30px;
        text-align: left;
        overflow: hidden;
    }
    /* One string of large text wrapped over a maximum of three lines.*/
    .metro .tile .text-header3 {
        width: 160px;
        font-weight: 300;
        font-size: 2.5rem;
        line-height: 30px;
        text-align: left;
        max-height: 110px;
        overflow: hidden;
    }

    /* 1 line of regular text (not wrapped) */
    .metro .tile .text {
        font-size: 1.2rem;
        line-height: 15px;
        height: 15px;
    }

    /* regular text wrapped over a maximum of 2 lines */
    .metro .tile .text2 {
        font-size: 1.2rem;
        font-weight: normal;
        line-height: 15px;
        max-height: 30px;
        overflow: hidden;
        text-align: left;
    }

    /* regular text wrapped over a maximum of 3 lines */
    .metro .tile .text3 {
        font-size: 1.2rem;
        line-height: 15px;
        font-weight: normal;
        text-align: left;
        max-height: 45px;
        overflow: hidden;
    }

    /* regular text wrapped over a maximum of 4 lines */
    .metro .tile .text4 {
        font-size: 1.2rem;
        line-height: 15px;
        font-weight: normal;
        text-align: left;
        max-height: 60px;
        overflow: hidden;
    }
    .metro .tile.wide.text {
        width: 270px;
        height: 110px;
        padding: 20px;
    }
    .metro .tile.wide.image {
        width: 100%;
        height: 150px;
    }
    .metro .tile.wide.image.collection img {
        max-width: 158px;
        max-height: 150px;
        float: left;
    }

    /* template for full image */
    .metro .tile.wide.imagetext.wideimage {
        width: 100%;
        height: 150px;
        padding: 0;
    }
    /* template with normal 80x80 image */
    .metro .tile.wide.imagetext {
        width: 100%;
        /*height: 110px;*/
        height: auto;
        padding: 20px 0;
    }
    .metro .tile.wide.imagetext .textover-wrapper {
        position: absolute;
        bottom: 0;
        width: 270px;
        height: 48px;
        padding: 2px 20px;
        background-color: inherit;
    }
    /* Wide Image Only Tiles
-------------------------------------------------- */
    .metro .tile.wide.image .mini-tiles {
        display: inline-block;
        float: left;
        width: 152px;
        height: 150px;
    }
    .metro .tile.wide.image .mini-tiles img {
        display: inline-block;
        float: left;
        max-width: 75px;
        max-height: 75px;
        border-left: 1px solid #2A2A2A;
    }

    /* Wide Image & Text Tiles
    edit by eason
    -------------------------------------------------- */
    .metro .tile.wide.imagetext .column-text,
    .metro .tile.wide.text .column-text,
    .metro .tile.widepeek.imagetext .column-text {
        display: block;
        float: left;
        width: 180px;
        padding-left: 15px;
    }
    .metro .tile.wide.text .column-text-big {
        display: block;
        float: left;
        width: 80px;
    }

    .metro .tile.wide.imagetext .image-wrapper {
        display: block;
        float: left;
        /*width: 80px;*/
        /*height: 80px;*/
    }
    .metro .tile.wide.imagetext .image-wrapper img {
        /*max-width: 80px;*/
        /*max-height: 80px;*/
    }
}

@media (max-width: 480px) {
    .fnybox {
        display: none;
        width: 96%;
        color:#FFF;
        padding: 5px;
    }

    /* normal header in 1 line of wrapped text*/
    .metro .tile .text-header {
        font-weight: 300;
        font-size: 2.5rem;
        line-height: 30px;
        max-height: 30px;
        text-align: left;
        overflow: hidden;
    }
    /* One string of large text wrapped over a maximum of three lines.*/
    .metro .tile .text-header3 {
        width: 160px;
        font-weight: 300;
        font-size: 2.5rem;
        line-height: 30px;
        text-align: left;
        max-height: 110px;
        overflow: hidden;
    }

    /* 1 line of regular text (not wrapped) */
    .metro .tile .text {
        font-size: 1.2rem;
        line-height: 15px;
        height: 15px;
    }

    /* regular text wrapped over a maximum of 2 lines */
    .metro .tile .text2 {
        font-size: 1.2rem;
        font-weight: normal;
        line-height: 15px;
        max-height: 30px;
        overflow: hidden;
        text-align: left;
    }

    /* regular text wrapped over a maximum of 3 lines */
    .metro .tile .text3 {
        font-size: 1.2rem;
        line-height: 15px;
        font-weight: normal;
        text-align: left;
        max-height: 45px;
        overflow: hidden;
    }

    /* regular text wrapped over a maximum of 4 lines */
    .metro .tile .text4 {
        font-size: 1.2rem;
        line-height: 15px;
        font-weight: normal;
        text-align: left;
        max-height: 60px;
        overflow: hidden;
    }
    .metro .tile.wide.text {
        width: 270px;
        height: 110px;
        padding: 20px;
    }
    .metro .tile.wide.image {
        width: 100%;
        height: 150px;
    }
    .metro .tile.wide.image.collection img {
        max-width: 158px;
        max-height: 150px;
        float: left;
    }

    /* template for full image */
    .metro .tile.wide.imagetext.wideimage {
        width: 100%;
        height: 150px;
        padding: 0;
    }
    /* template with normal 80x80 image */
    .metro .tile.wide.imagetext {
        width: 100%;
        /*height: 110px;*/
        height: auto;
        padding: 20px 0;
    }
    .metro .tile.wide.imagetext .textover-wrapper {
        position: absolute;
        bottom: 0;
        width: 270px;
        height: 48px;
        padding: 2px 20px;
        background-color: inherit;
    }
    /* Wide Image Only Tiles
-------------------------------------------------- */
    .metro .tile.wide.image .mini-tiles {
        display: inline-block;
        float: left;
        width: 152px;
        height: 150px;
    }
    .metro .tile.wide.image .mini-tiles img {
        display: inline-block;
        float: left;
        max-width: 75px;
        max-height: 75px;
        border-left: 1px solid #2A2A2A;
    }

    /* Wide Image & Text Tiles
    edit by eason
    -------------------------------------------------- */
    .metro .tile.wide.imagetext .column-text,
    .metro .tile.wide.text .column-text,
    .metro .tile.widepeek.imagetext .column-text {
        display: block;
        float: left;
        width: 180px;
        padding-left: 15px;
    }
    .metro .tile.wide.text .column-text-big {
        display: block;
        float: left;
        width: 80px;
    }

    .metro .tile.wide.imagetext .image-wrapper {
        display: block;
        float: left;
        width: 80px;
        height: 80px;
    }
    .metro .tile.wide.imagetext .image-wrapper img {
        max-width: 80px;
        max-height: 80px;
    }

}