/*======================================================================================*/
/*=============================== header responsive ===================================*/
/*====================== nav & mega menu & off canvas menu =============================*/
/*=======================================================================================*/


			
/*1003 - 800.16 */
@media screen and (min-width:50.01em) and (max-width:63em) {
#bkg_wrapper { background:#FFF;}
#outer_wrapper {width:100%; position: relative; text-align: left; margin:0 auto;}
#maincontent_container{width:100%;}
#maincontent{width:100%;}
.maincontent{width:96%;}
.row{ width:100%; display: block;float:left;}
header .member_all{ display:none;} /*85/800*/
#mingpaonews_logo{margin: 0 auto; padding:0; display:block; }
#mingpaonews_logo img{width:100%;}
.quicksearch_wrapper #mb_portal_title{ display:none}

.news_portalmenu .navigation li a {padding: 8px  1.425em;}
.news_submenu .navigation li a {padding: 6px 0.67em ;   }

}



/* NAV 800 - 160*/

/*816*/
@media screen and (min-width: 50.01em) {
  /*#top .nav-btn {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }*/
}




@media only screen and (min-width : 10em) and (max-width: 100em) {

#bkg_wrapper { background-color:#FFF; background-image:none;}
#maincontent_container {width: 100%; clear: both; position:relative; display:block; }
#outer_wrapper {width:100%; position: relative;text-align: left; margin:0 auto; display:block;}
#maincontent{width:100%; min-height: 600px;}


/******************** nav **********************/
.newsmenu_wrapper { width:100%; position:absolute;}
.navheader{padding:0; margin:0;  position: absolute; z-index: 999; width:100%;}
.portal_navheader {padding:0; margin:0; top:14%; position: absolute; z-index: 999; width:100%; /*background: #62A534;*/}
.news_submenu{ background:none;}
.news_header .span_4_of_12{ display:none;}
.news_portalmenu .slide-trigger{ background-image:none;}
.news_portalmenu .slide-trigger h3 { padding: 0.3em 1em 0.6em 0em; }
.news_portalmenu .slide-trigger img{ max-width: 100%; vertical-align: middle;}
.news_portalmenu{ background:none;}
.news_portalmenu .navigation li { border:none;border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-right: 1px solid rgba(255, 255, 255, 0.1); margin-top: 0;}
.news_portalmenu .navigation li a { width: 100%; padding: 0.7em 0; font-size: 1.125em; display: block;text-align: center;}
.news_portalmenu .navigation li a:hover, .news_portalmenu .navigation li a:focus { background: none;}
.news_portalmenu .navigation li a#current { background: none; background-color: #266C23;}

.portal_menu_wrapper {padding-top:0; margin-top:0;}
/*#portal_menu ul#nav  .drop_content{ display:none;}
#portal_menu { width: 100%; background:none; height:0; }
#portal_menu ul#nav { display: none; }	*/
.news_submenu .navigation li a#current, .news_submenu .navigation li a:hover { background:none;}
.news_portalmenu { width:27%;}
.news_submenu{ width:30.8%;}
.news_submenu .navigation { width:73%;}

header .block {padding: 1em 1.25em 1.5em; height:70px;}
#top .nav-btn { position: absolute;top:2em;left: 0em;}
.portal_menu_wrapper { width:100%;}
#mainportal { background:none; float:none; height:inherit; margin: inherit; width:100%; }
#mainportal .mingpaologo_wrapper {display:none;}
#mainportal .mingpaologo_wrapper img {display:none;}
#portal_menu {position: absolute; top: 0; padding-top: 0em; overflow:hidden;}
#portal_menu #menu{width:100%; float:left; background:none; height:inherit;}
#portal_menu:not(:target) { z-index: 1; height: 0; }
#portal_menu:target .close-btn { display: block;}
#portal_menu .close-btn { position: absolute; top: -3.75em; left: 1.875em;}
#portal_menu .block { position: relative; padding: 0; }
#portal_menu li { position: relative; width:100%; border-top: 1px solid rgba(255, 255, 255, 0.1); }
#portal_menu li a {}
#portal_menu li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
#portal_menu li.is-active:after {
    z-index: 50;
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: -0.03125em;
    margin-top: -0.625em;
    border-top: 0.625em transparent solid;
    border-bottom: 0.625em transparent solid;
    border-right: 0.625em white solid;
  }

/* We apply the background hover color when user hover the mouse over of the li component */
/* for IE < 9 we using class .iehover */
#portal_menu ul li:hover, #portal_menu ul li:focus, #portal_menu ul li#current,
#portal_menu ul li.iehover{ border-top:4px solid #930006; border-bottom:4px solid #930006;   transition: all 0.3s ease-out 0s;}
#portal_menu ul li#current{ border:none;}
/* We apply the link style */
#portal_menu ul li a{color:#FFF; display:block; text-decoration:none; font-size:1em; padding: 0.85714em 2.14286em;}

/**** SECOND LEVEL MENU ****/

#portal_menu ul li ul{ display:none; z-index:2001; position:inherit;}
#portal_menu ul li:hover ul, #portal_menu ul li:focus ul,
#portal_menu ul li.iehover ul{display:block; position:inherit; left:0;  top:inherit;}

#portal_menu ul li ul li{ background-color:#cae25a; border-bottom:solid 1px white; font-size:95%; float:left; top:0}

#portal_menu ul li:hover ul li:hover, #portal_menu ul li:focus ul li:focus,
#portal_menu ul li.iehover ul li.iehover{ background-color:#B3D43B;  border-bottom:solid 1px white;  border-top:none;}

#portal_menu ul li ul li a{ color:#454444; display:block; width:100%;}


/******** topmenu subscribe **********/

/* We remove the margin, padding, and list style of UL and LI components */

#subscribe_menu { width:100%; float:left; height: inherit;  background: none; padding-top:2em; }

#subscribe_menu ul, #subscribe_menu ul li{ margin:0; padding:0; list-style:none; float:right;}
#subscribe_menu ul { width:100%; }
#subscribe_menu ul li{ cursor:pointer; float:left; background: none;}
#subscribe_menu li a{padding: 0.8em 1em 0.5em 1em;}
#subscribe_menu .btop{ position:fixed; top:-5em;}
/* for IE < 9 we using class .iehover 
#subscribel_menu ul li:hover,
#subscribe_menu ul li.iehover{ position:relative;  border-top:4px solid #999; transition: all 0.3s ease-out 0s; }*/

#subscribel_menu ul li,
#subscribe_menu ul li.iehover{ position:relative;  border-top:4px solid #999; transition: all 0.3s ease-out 0s; }

/* We apply the link style */
#subscribe_menu ul li a{ color:#FFF; display:block;  text-decoration:none;font-size:0.8125em; padding:0.85714em 2.6em;}

/**** SECOND LEVEL MENU ****/
/*user hover the parent li item */
#subscribe_menu ul li ul{  position: inherit;  display:none; z-index:2001;}


/* for IE < 9 we using class .iehover 
#subscribe_menu ul li:hover ul, */
#subscribe_menu ul li.iehover ul{display:block; position:inherit;}


/* we apply different background color to 2nd level menu items*/
#subscribe_menu ul li ul li{ background-color:#EBEBEB; width:100%;border-bottom:solid 1px white; font-size:95%; background-image:none;}

/* for IE < 9 we using class .iehover */
#subscribe_menu ul li:hover ul li:hover,
#subscribe_menu ul li.iehover ul li.iehover{ background-color:#E1E1E1;}

/* We style the color of level 2 links */
#subscribe_menu ul li ul li a{ color:#454444; display:inline-block; width:120px;}

#subscribe_menu .color6th { color:#FFFF00; }


 
   .js-ready #portal_menu {
    height: 100%;
    width: 70%;
    background: #CC0009;
    -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
  }
  .js-ready #portal_menu .block { background: transparent;}
  
  .js-ready #portal_menu .close-btn { display: block;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);opacity: 0.7; display:none; }
	
  .js-ready #portal_menu .close-btn:focus, .js-ready #portal_menu .close-btn:hover {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1;}

  .js-ready #portal_menu {left: -74%;}
  .js-ready #outer_wrapper {left: 0;}
  .js-nav #outer_wrapper { left: 70%; }

/*
  .csstransforms3d.csstransitions.js-ready #portal_menu {
    left:  0px;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .csstransforms3d.csstransitions.js-ready #outer_wrapper {
    left: 0 !important;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);    
	-webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    -o-transition: -o-transform 500ms ease;
    transition: transform 500ms ease;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .csstransforms3d.csstransitions.js-nav #outer_wrapper {
    -webkit-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    -moz-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    -ms-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    -o-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
  }


 .csstransforms3d.csstransitions.js-ready #portal_menu .block {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
    -webkit-transition: opacity 300ms 100ms, -webkit-transform 500ms ease;
    -webkit-transition-delay: ease, 0s;
    -moz-transition: opacity 300ms 100ms ease, -moz-transform 500ms ease;
    -o-transition: opacity 300ms 100ms ease, -o-transform 500ms ease;
    transition: opacity 300ms 100ms ease, transform 500ms ease;
    -webkit-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -moz-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -ms-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -o-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
  } 

  .csstransforms3d.csstransitions.js-nav #portal_menu .block {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
*/

.slide-trigger { display: block;  /*width: 40px;*/ position:relative; } 
.no-js .slide-trigger { display: none; }
}

.navigation li { float: none; /* width:49%;  border-right: 1px solid #ccc;*/ float:left; /*border-top: 1px solid #CCC;*/ border-bottom: 2px solid #CCC;  border-right: 2px solid #CCC; width:100%; border-left: 1px solid #CCC; padding:0;}
