/* 
- Name: megamenu.js - style.css
- Version: 1.0
- Latest update: 29.01.2016.
- Author: Mario Loncarek
- Author web site: http://marioloncarek.com
*/


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Body - not related to megamenu
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/*.description { 
 position: absolute; 
 top: 50%; 
 left: 50%; 
 -webkit-transform: translateY(-50%); 
 -ms-transform: translateY(-50%); 
 transform: translateY(-50%); 
 -webkit-transform: translateX(-50%); 
 -ms-transform: translateX(-50%); 
 transform: translateX(-50%); 
 } */


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
megamenu.js STYLE STARTS HERE
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Screen style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.menu-container { 
 /* width: 80%; */
 margin: 0 auto; 
 
 padding: 0; 
 } 

.menu-mobile { 
 display: none; 
 padding: 20px; 
 } 

.menu-mobile:after { 
 content: "\f0c9"; 
 font: normal normal normal 14px/1 FontAwesome; 
 font-size: 2.5rem; 
 padding: 0; 
 float: left; 
 position: relative; 
 top: 50%; 
 -webkit-transform: translateY(-6%); 
 -ms-transform: translateY(-6%); 
 transform: translateY(-6%); 
 margin-right: 15px;
 } 

.menu-dropdown-icon:before { 
 content: "\f055"; 
 font: normal normal normal 18px/52px FontAwesome; 
 height: 43px; 
 display: none; 
 cursor: pointer; 
 float: right; 
 /* padding: 1.5em 2em; */
 padding-right: 1.5em; 
 background: #fff; 
 color: #333; 
 } 

.menu > ul { 
 margin: 0 auto; 
 width: 100%; 
 list-style: none; 
 padding: 0; 
 position: relative; 
 /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
 box-sizing: border-box; 
 } 

.menu > ul:before,
.menu > ul:after { 
 content: ""; 
 display: table; 
 } 

.menu > ul:after { 
 clear: both; 
 } 

.menu > ul > li { 
 float: left; 
 padding: 0; 
 margin: 0; 
 height: 55px; line-height: 55px; 
 } 
.menu > ul > li+li { margin-left: 83px; } 
.menu > ul > li>a { 
 text-decoration: none; 
 height: 44px; line-height: 55px; font-size: 18px; color: #000; font-weight: bold; 
 display: block; 
 } 

.menu > ul > li:hover>a,.menu > ul > li.active > a { 
 border-bottom: 3px solid #385087; 
 } 

.menu > ul > li > ul { 
 display: none; 
 width: 100%; 
 top: 55px;
 background: rgba(0,0,0,.8); 
 padding: 40px 80px; 
 position: absolute; 
 z-index: 99; 
 left: 0; 
 margin: 0; 
 list-style: none; 
 box-sizing: border-box; 
 justify-content: flex-start; 
 flex-wrap: wrap;
 } 
.menu > ul > li > ul.flex-ul { display: flex!important; } 
/* .menu > ul > li > ul:before,
.menu > ul > li > ul:after { 
 content: ""; 
 display: table; 
 } 

.menu > ul > li > ul:after { 
 clear: both; 
 } */

.menu > ul > li > ul > li { 
 margin: 0; 
 padding-bottom: 0; 
 list-style: none; 
 /* width: 25%; */
 background: none; 
 float: none; 
 min-width: 170px;
 } 
.menu > ul > li[type="Resources"] > ul > li:nth-of-type(4){
width:100%!important;
}
.menu > ul > li > ul > li>a { 
 color: #fff; 
 /* padding: .2em 0; */
 width: 95%; 
 display: block; 
 /* border-bottom: 1px solid #ccc; */
 font-size: 16px; 
 font-weight: 700; margin-bottom: 15px; line-height: 33px; white-space: nowrap; 
 } 

.menu > ul > li > ul > li > ul { 
 display: block; 
 padding: 0; 
 margin: 10px 0 0; 
 list-style: none; 
 box-sizing: border-box; 
 } 

.menu > ul > li > ul > li > ul:before,
.menu > ul > li > ul > li > ul:after { 
 content: ""; 
 display: table; 
 } 

.menu > ul > li > ul > li > ul:after { 
 clear: both; 
 } 

.menu > ul > li > ul > li > ul > li { 
 /* float: left; */
 width: 100%; 
 /* padding: 10px 0; */
 margin: 0; 
 font-size: 16px; 
 font-weight: 400; line-height: 22px; 
 color: #fff; 
 } 
 .menu > ul > li > ul>li+li { margin-left: 170px; }
  .menu > ul > li > ul > li:nth-of-type(4){margin-left:0!important;}
 .menu > ul > li[type="Resources"] > ul > li:nth-of-type(4){
flex-basis: 100%;
margin-top: 35px;
padding-top: 20px;
border-top: 1px solid #fff;
}

.menu > ul > li > ul > li > ul > li a { 
 border: 0; color: #fff; 
 } 

.menu > ul > li > ul.normal-sub { 
 width: 300px; 
 left: auto; 
 padding: 10px 20px; 
 } 

.menu > ul > li > ul.normal-sub > li { 
 width: 100%; 
 } 

.menu > ul > li > ul.normal-sub > li a { 
 border: 0; 
 padding: 1em 0; 
 } 

 /* 自定义 */
 .menu-mobile.logo img { max-width: 170px; max-height: 34px; } 

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media only screen and (max-width: 1200px) { 
 .menu-container { 
 width: 100%; 
 } 
 .menu-mobile { 
 display: block; 
 position: relative; 
 } 
 .menu-dropdown-icon:before { 
 display: block; 
 } 
 .show-on-mobile  .menu-dropdown-icon:nth-of-type(1):before{
 display:none;} 
 .menu > ul { 
 display: none; 
 } 
 .menu > ul > li { 
 width: 100%; 
 float: none; 
 display: block; 
 height: unset; 

 } 
 .menu > ul > li+li { margin-left: 0; } 
 .menu > ul > li>a { 
 /* padding: 1.5em; */
 width: 100%; 
 display: block; 
 padding-left: 1.5em; 
 } 
 .menu > ul > li.active>a ,.menu > ul > li:hover>a { border-bottom: none; color: #0f69a2; } 
 .menu > ul > li > ul { 
 position: relative; 
 padding: 20px; 
 top:4px;
 } 
 .menu > ul > li > ul.normal-sub { 
 width: 100%; 
 } 
 .menu > ul > li > ul > li:nth-of-type(4){
 margin-top:20px;
 padding-top:0;
 border-top:none;
 }
 .menu > ul > li > ul > li { 
 float: none; 
 width: 100%; 
 margin-top: 20px; 
 } 
 .menu > ul > li > ul > li>a { margin-bottom: 5px; } 

 .menu > ul > li > ul>li+li { margin-left: 0; } 
 .menu > ul > li > ul > li:first-child { 
 margin: 0; 
 } 
 .menu > ul > li > ul > li > ul { 
 position: relative; 
 } 
 .menu > ul > li > ul > li > ul > li { 
 float: none; 
 } 
 .menu .show-on-mobile { 
 display: block; 
 } 
 }