/*
 * responsive.custom.css is for custom media queries that are not set via the
 * theme settings, such as cascading media queries.
 *
 * By default all the other responsive stylesheets used in Adaptivetheme use a
 * "stacking method", however cascading media queries use a waterfall method so
 * you can leverage the cascade and inheritance for all browsers that support
 * media queries.
 *
 * @SEE http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/#mq-overlap-stack
 *
 * NOTE: this file loads by default, to disable go to your theme settings and
 * look under the "CSS" settings tab.
 */

@media only screen and (min-width: 961px) {
    .two-66-33 > .region-two-66-33-first {
        width: 73.666666%;
        /*width:100%;*/
        max-width: 910px;
        margin-right: 10px;
    }

    .two-66-33 > .region-two-66-33-second {
        width: 25.333333%;
        padding: 0 0px 0 0px;
        box-sizing: border-box;
        min-width: 300px;
    }

}

@media only screen and (max-width: 1024px){
    #block-block-10 .block-content{
        /*-webkit-align-items: flex-start;*/
        /*align-items: flex-start;*/
    }
    .front .owl-theme .owl-controls .owl-next,.front .owl-theme .owl-controls .owl-prev{display: none;}

    #mini-panel-front_mini .region-two-33-66-first{}
    #mini-panel-front_mini .region-two-33-66-first{}
    .f-col{min-width:initial;}
    .f-col-2,.f-col-3{
        /*padding-left: 0;*/
    }
    .f-col-2{
        padding-left: 25px;
    }
    .f-col-3{
        padding-left: 0;
    }
    .f-col-4{

    }

    /*空間介紹*/
    .field-name-field-room-photo .owl-controls .owl-buttons .owl-next{
        right:0;
    }
    .field-name-field-room-photo .owl-controls .owl-buttons .owl-prev{
        left:0;
    }
}

@media only screen and (max-width: 960px) {
    /*#main-content, .block-inner, .pane-inner, .menu-wrapper, .branding-elements, .breadcrumb-wrapper, .attribution, .at-panel .rounded-corner, .block-panels-mini > .block-title, .rendered-by-ds .panel-display .region-inner, div.messages*/
    #main-content,.block-inner,#block-views-related-corp-block-related-corp .block-inner{margin-left:20px;margin-right: 20px;}
    .node-type-visit #main-content{
        margin-left: 20px;margin-right: 20px;
        padding-right: 0;
    }
    #block-menu-menu-leader-menu{
        margin-left: 15px;
        margin-right: 15px;
    }

    #block-search-form, #block-views-friend-site-block-friend-site {
        display: none;
    }

    #header {
        position: absolute;
        top: 0;
        left:0;
        right: 0;
        text-align: center;
        padding-top: 10px;

    }

    .mean-container .mean-bar {
        position: relative;
        top: 65px;
        margin-bottom: 45px;
        background: none;
    }
    .mean-container .mean-nav ul li {

    }

    .mean-container .mean-nav ul li span {
        display: block;
        color: #000;
        padding: 1em 5%;
        border-top: 1px solid rgba(255, 255, 255, 0.5);
    }

    .mean-container .mean-nav ul li a.mean-expand {
        margin-top: 1px;
        width: 26px;
        height: 24px;
        padding: 12px !important;
        text-align: center;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 2;
        font-weight: 700;
        /*background: #EEECED;*/
        background-color: transparent;
        border: 0 !important;
        /*border-bottom: 1px solid rgba(255, 255, 255, .2) !important;*/
        border-bottom: 0 !important;
    }

    .mean-container .mean-bar:before {
        content: '';
        display: block;
        height: 0;
        border-top: 1px solid #282828;
        position: absolute;
        width: 100%;
        top: 23px;
        z-index: -1;
    }

    .mean-container a.meanmenu-reveal {
        background-color: #390;
        border-radius: 50% 50%;
        padding: 13px;
        z-index: 2;
    }

    .mean-container a.meanmenu-reveal span {
        /*display: none;*/
    }

    .mean-container .mean-nav {
        background-color: #390;
        margin-top: 20px;
    }

    .mean-container .mean-nav ul li a, .mean-container .mean-nav ul li span {
        background-color: #EEECED;
        color: #000;
    }

    .mean-container .mean-nav ul li li a {
        background-color: #390;
        color: #fff;
        opacity: 1;
    }

    .mean-container .mean-nav ul li a.mean-expand:hover {
        background-color: #EEECED;
        font-family: monospace;
        transform: rotate(90deg);
    }

    h1.for-mobile{
        display: block;
    }
}

@media only screen and (max-width: 768px) {

    #block-submenutree-2 {
        /*display: none;*/
    }

    #block-menu-menu-leader-art{
        float: none;
        margin-bottom: 15px;
        clear: both;
        border-top: 1px solid #ccc;
        margin-left: 0px;
        margin-right: 0px;
        padding-top: 15px;
    }
    #block-menu-menu-leader-art ul.menu{
        text-align: center;
    }

    #block-menu-menu-footer-menu-art,#block-menu-menu-footer-menu-art .block-inner{margin: 0;}
    #block-menu-menu-footer-menu-art ul.menu{padding-left: 0;}

    .view-display-id-block_sidebar_banner_art .views-row {
        max-width: 350px;
    }

    .view-display-id-block_related_corp{
        text-align: center;
    }
    .view-display-id-block_related_corp .views-row{
        margin: 0 1.21%;
    }
    .view-display-id-block_related_corp .views-row-last{
        margin: inherit;
    }
    #block-block-8,#block-block-9{
        /*text-align: left;*/
        float: none;
        margin: 0;
    }
    #block-block-8 .f-col-1,#block-block-9 .f-col-1{
        text-align: center;
    }
}

/*
 * Really small screens and up
 */
/* @media only screen and (min-width: 220px) {} */

/*
 * Smalltouch sizes and up
 */
/* @media only screen and (min-width: 320px) {} */

/*
 * Smalltouch sizes and down
 */
@media only screen and (max-width: 480px) {
    /*
     * Float Region Blocks - custom media query CSS example:
     *
     * Float regions blocks is an Extension you can enable in the appearance
     * settings for your theme. This feature allows you to automatically float
     * blocks in regions, you can switch it on and off depending on your
     * requirements. For design purposes you many want to remove the floats for
     * devices where the entire theme is just one column - for example small
     * mobile phones. The following CSS is inside the custom media query:
     *
     *   @media only screen and (max-width: 480px){}
     *
     * This will target devices with a maximum width of 480px - most small phones.
     * In these smaller screen sizes we can remove the float and widths so all
     * blocks stack instead of displaying horizonally. The selector used is an
     * "attribute selector" which will match on any float block class. Use your
     * inspector or Firebug to get the classes from the page output if you need
     * more granular control over block alignment and stacking.
     */
    #block-menu-menu-footer-menu-art{display: none;}
    #logo{max-width: 215px;}
    #block-menu-menu-leader-art{text-align: center;border-top: 0;display: block;}
    #block-menu-menu-leader-art>.block-inner{margin-left: 10px;margin-right: 10px;}
    #block-menu-menu-leader-art ul.menu{padding-left: 0;}
    #block-menu-menu-leader-art .menu li{padding: 15px;box-sizing: border-box;min-width:60px; }
    #block-menu-menu-leader-art .language{display: none;}
    #branding .language{display: block;}


    .sidebar-second #main-content {
        padding-right: 0;
    }

    .region[class*="float-blocks"] .block {
        float: none;
        width: 100%;
    }

    #block-block-8 .block-content,#block-block-9 .block-content{
        display: block;
        padding: 0 15px;
    }
    .f-col{padding-left: 0;}

    /*----首頁----*/
    #front-activity .view-content{text-align: center;}
    #front-activity .views-row{
        float: none;text-align: left;display: inline-block;
        margin-right: 0;
        margin-left: 0;
    }
    .pane-proj-cata .views-row,.pane-proj-cata .views-row:nth-child(4n){float: none;margin: 12px auto;}

    #block-views-related-corp-block-related-corp {
        width: 100%;
        box-sizing: border-box;
        /*padding: 0 10px;*/
        /*width: 100%;*/
    }

    .view-display-id-block_related_corp .views-row {
        /*float: none;*/
        text-align: center;
        margin-right: 0;
        width: 50%;
        margin-left: 0;
    }

    .view-display-id-panel_pub_cp .views-row,.pub-cata .views-row {
        width: 100%;
        height:auto;
        margin: 10px 0;
        float: none;
    }

    .view-display-id-panel_pub_cp .views-row:nth-child(3n+1) {
    }

    .view-display-id-panel_pub_cp .pub-img, .view-display-id-panel_pub_cp .pub-info,.pub-cata .pub-info,.pub-cata .pub-img {
        float: none;
        width: 100%;
    }

    .view-display-id-panel_pub_cp .pub-img,.pub-cata .pub-img {
        max-height: none;
        text-align: center;
    }

    .view-display-id-panel_pub_cp .pub-info {
    }

    .pub-info > a {
        text-align: center;
    }

    .group-left, .group-right {
        float: none;
        padding: 0;
        width: 100%;
    }

    .group-top .field-name-field-buy-link {
        position: relative;
        text-align: right;
        margin-bottom: 10px;
    }

    .node-type-pub-art-en .group-right{
        padding-top: 20px;
    }
    .node-type-pub-art-en .group-top .field-name-field-buy-link {
        padding-top: 20px;
    }


    /*news*/
    .view-display-id-panel_news_cata,.view-display-id-page_news{
        text-align: center;
    }
    .view-display-id-panel_news_cata .views-row, .view-display-id-page_news .views-row {
        margin: 10px auto 30px;
        text-align: left;
        float: none;
        display: inline-block;
    }

    .view-display-id-panel_news_cata .views-row:nth-child(4n), .view-display-id-page_news .views-row:nth-child(4n) {
        margin: 10px auto 30px;
    }

    .view-display-id-panel_news_cata .views-row:nth-child(4n+1), .view-display-id-page_news .views-row:nth-child(4n+1) {
        margin: 10px auto 30px;
    }

    /*展演*/
    .view-display-id-panel_event .block-title, .view-display-id-panel_event_old .block-title {
        padding: 0 10px;
    }

    .view-display-id-panel_event .views-row, .view-display-id-panel_event_old .views-row {
        padding: 0 10px;
        box-sizing: border-box;
        margin: 10px 0 40px;
        float: none;
    }


    /*大事紀*/
    #memo-cata-menu ul {
    }

    #memo-cata-menu li {
        margin-bottom: 10px;
        padding: 0 5px;
    }

    #memo-cata-menu li a {
        display: block;
    }

    .view-id-memorabilia .view-content {
        padding-left: 10px;
    }

    .view-id-memorabilia .views-row .views-field-nothing {
        padding-left: 10px;
    }

    article.node-full .links .fblikebutton_field{
        top:0;
    }

}





/*
 * Tablet sizes and up
 */
/*@media only screen and (min-width: 768px) {} */

/*
 * Desktops/laptops and up
 */