/*
Item: CSS3 Full Responsive Dropdown Menu
Author: https://codecanyon.net/user/JN0iZzze
Version: 1.2
*/

/*******************************************/
/***            Menu Container           ***/
/*******************************************/

#pagemenu { margin: 0px; padding: 0px; display: block; height: 100px; overflow: hidden; background: #FFF; color: #333; float: none; }

.pagemenu_container { margin: 0px; padding: 0px; display: block; height: auto !important; width: 100%; max-width: 1200px; clear: both; float: none; border-radius: 0px; background: #FFF; }
.pagemenu_container > ul { position: relative; list-style: none; margin: 0 0 100px 0; padding: 0; width: 100%; height: auto !important; overflow: visible; display:block; float:none;  }
.pagemenu_container > ul > li { position: relative; display: block; padding: 0; margin: 0px; height: 40px;}
.pagemenu_container > ul > li > a:link, .pagemenu_container > ul > li > a:visited { padding: 4px 30px 4px 0px; margin: 0; height: 30px; display: block; color: #333; text-decoration: none; background: #FFF; font-size: 17px; font-family: "MarrSans", Lucida Sans Unicode, Arial, sans-serif; }
.pagemenu_container > ul > li > a:hover { text-decoration: underline; padding: 4px 30px 4px 0px; }
.pagemenu_container > ul > li:hover { text-decoration: underline; }

.mobile_sub-collapser { display: block; height: 22px; padding: 12px 5px; color: #222; font-size: 16px; line-height: 22px; font-family: "MarrSans", Lucida Sans Unicode, Arial, sans-serif; box-shadow: inset 0 -1px 1px rgba(0,0,0,0.2); }
.mobile_sub-collapser:before { content: '\2261'; display: block; float: left; margin: -1px 8px 0 0; font-size: 30px; }
#hidden_sub-menu_collapser { display: none; }
#hidden_sub-menu_collapser:checked + ul { height: auto; min-height:40px; max-height:2999px; }
.pagemenu_container > ul.collapsed { height: auto; min-height:40px; max-height:2999px; }

/** On-Page Hightlight *
body.about .pagemenu_container > ul > li > a#subnav-about,
body.de-ueber .pagemenu_container > ul > li > a#subnav-about,
body.glance .pagemenu_container > ul > li > a#subnav-glance,
body.history .pagemenu_container > ul > li > a#subnav-history,
body.geschichte .pagemenu_container > ul > li > a#subnav-history,
body.governance .pagemenu_container > ul > li > a#subnav-governance,
body.accreditation .pagemenu_container > ul > li > a#subnav-accreditation,
body.employment .pagemenu_container > ul > li > a#subnav-employment { color:#FFF; background: #666; height: 40px; }

body.academics .pagemenu_container > ul > li > a#subnav-academics,
body.courses .pagemenu_container > ul > li > a#subnav-courses,
body.abroad .pagemenu_container > ul > li > a#subnav-abroad,
body.concentrations .pagemenu_container > ul > li > a#subnav-concentrations,
body.internship .pagemenu_container > ul > li > a#subnav-internship,
body.programs .pagemenu_container > ul > li > a#subnav-programs,
body.summer .pagemenu_container > ul > li > a#subnav-programs,
body.landt .pagemenu_container > ul > li > a#subnav-programs,
body.semester-year .pagemenu_container > ul > li > a#subnav-programs,
body.hast-degree .pagemenu_container > ul > li > a#subnav-programs,
body.epst-degree .pagemenu_container > ul > li > a#subnav-programs,
body.de-hast .pagemenu_container > ul > li > a#subnav-programs,
body.de-epst .pagemenu_container > ul > li > a#subnav-programs,
body.de-semester .pagemenu_container > ul > li > a#subnav-programs,
body.de-praktika .pagemenu_container > ul > li > a#subnav-internship,
body.de-lt-programm .pagemenu_container > ul > li > a#subnav-programs { color:#FFF; background: #666; height: 40px; }

body.admission .pagemenu_container > ul > li > a#subnav-admission,
body.applying .pagemenu_container > ul > li > a#subnav-applying,
body.finances .pagemenu_container > ul > li > a#subnav-finances,
body.discover .pagemenu_container > ul > li > a#subnav-discover,
body.contact .pagemenu_container > ul > li > a#subnav-contact,
body.zulassung .pagemenu_container > ul > li > a#subnav-contact { color:#FFF; background: #666; height: 40px;  }

body.campus .pagemenu_container > ul > li > a#subnav-campus,
body.facilities .pagemenu_container > ul > li > a#subnav-facilities,
body.health .pagemenu_container > ul > li > a#subnav-health,
body.library .pagemenu_container > ul > li > a#subnav-library,
body.reslife .pagemenu_container > ul > li > a#subnav-reslife { color:#FFF; background: #666; height: 40px; }

body.civic .pagemenu_container > ul > li > a#subnav-civic,
body.conversations .pagemenu_container > ul > li > a#subnav-conversations,
body.projects .pagemenu_container > ul > li > a#subnav-projects,
body.fellows .pagemenu_container > ul > li > a#subnav-fellows { color:#FFF; background: #666; height: 40px; }

body.news .pagemenu_container > ul > li > a#subnav-news,
body.events .pagemenu_container > ul > li > a#subnav-events,
body.press .pagemenu_container > ul > li > a#subnav-press,
body.media .pagemenu_container > ul > li > a#subnav-media, 
body.photos .pagemenu_container > ul > li > a#subnav-photos,
body.vidoes .pagemenu_container > ul > li > a#subnav-videos { color:#FFF; background: #666; height: 40px; }

body.people .pagemenu_container > ul > li > a#subnav-people,
body.faculty .pagemenu_container > ul > li > a#subnav-faculty,
body.former .pagemenu_container > ul > li > a#subnav-former,
body.staff .pagemenu_container > ul > li > a#subnav-staff,
body.board .pagemenu_container > ul > li > a#subnav-board,
body.alumni .pagemenu_container > ul > li > a#subnav-alumni,
body.students .pagemenu_container > ul > li > a#subnav-students { color:#FFF; background: #666; height: 40px; }
*/


@media only screen and (min-width: 1001px)  {

header #content nav .mobile_sub-collapser { display: none; }
.mobile_sub-collapser { display: none; }
.pagemenu_container { margin: 20px 0px; display: block; height: 80px; width: 100%; max-width: 1200px; clear: both; float: none; border-radius: 0px; background: #fff; }
.pagemenu_container > ul { margin: 0; height: 40px; width: 100%; overflow: visible; }
.pagemenu_container > ul > li { position: static; float: left;  }
.pagemenu_container > ul > li:hover { margin: 0; color:#fff; text-decoration: underline; }
.pagemenu_container > ul > li > a { box-shadow: none; border: none; }
.pagemenu_container .menu_dropdown_block { position: absolute; opacity: 0; }
.pagemenu_container > ul > li:hover > .menu_dropdown_block { overflow: visible; opacity: 1; margin-left: 0;  }


}

@media only screen and (min-width: 1201px) and (max-width: 1210px) {
	/* Snap to Full Width Nav */
header #content nav .mobile_sub-collapser { display: none; }
.mobile_sub-collapser { display: none; }
.pagemenu_container { margin: 20px 0px; display: block; height: 80px; width: 100%; max-width: 1200px; clear: both; float: none; border-radius: 0px; background: #fff; }

}

@media only screen and (min-width: 901px) and (max-width: 1200px) {
	/* LAPTOP styles go here */

header #content nav .mobile_sub-collapser { display: none; }
.mobile_sub-collapser { display: none; }
.pagemenu_container { margin: 20px 0px; display: block; height: 80px; width: 100%; max-width: 1200px; clear: both; float: none; border-radius: 0px; background: #fff; }
.pagemenu_container > ul { transition: all 100ms linear; -moz-transition: all 100ms linear; -o-transition: all 100ms linear; -webkit-transition: all 100ms linear; height: 40px; width: 100%;  background: none; overflow: visible; }
.pagemenu_container > ul > li { white-space: nowrap; position: static; float: left; background: inherit; }
.pagemenu_container > ul > li > a { padding: 4px 0; box-shadow: none; border: none; font-size: 16px; }
.pagemenu_container > ul > li:hover { margin-left: 20px; background: #FFF; }
.pagemenu_container > ul > li:hover > a { background: #FFF; text-decoration: underline; }
.pagemenu_container .menu_dropdown_block { position: absolute; opacity: 0; }
.pagemenu_container > ul > li:hover > .menu_dropdown_block { overflow: visible; opacity: 1; margin-left: 20px; }
.pagemenu_container > ul > li.right { float: right; }
.pagemenu_container .menu_dropdown_block .column { float: left; }
.pagemenu_container .menu_dropdown_block .column.bordered {  border: none; }
ul.menu_pagemenu_block { min-width: 175px; }
ul.menu_pagemenu_block > li { }
ul.menu_pagemenu_block > li > .menu_pagemenu_block { position: absolute; top: 0; height: auto; min-width: 175px; left: 100%; box-shadow: 1px 1px 3px rgba(0,0,0,0.2), inset 1px 0 0 rgba(0,0,0,0.1); background: #fff; }
.pagemenu_container .menu_dropdown_block > ul.menu_pagemenu_block > li > ul.menu_pagemenu_block { margin-left: 0; }
ul.menu_pagemenu_block > li > .menu_pagemenu_block a { padding-left: 20px !important; }
ul.menu_pagemenu_block.right-align li a { text-align: right; }
ul.menu_pagemenu_block.right-align li.has-dropdown > a:after { content: '\2039'; right: auto; left: 10px; }
ul.menu_pagemenu_block.right-align li a .fa { margin-right: 0; margin-left: 6px; }
ul.menu_pagemenu_block.right-align > li .menu_pagemenu_block { left: auto; right: 100%; box-shadow: 2px 2px 0 rgba(0,0,0,0.1); }
ul.menu_pagemenu_block.right-align li.has-dropdown > a:after { content: '\2039'; right: auto; left: 10px; }
ul.menu_pagemenu_block > li.has-dropdown:hover > .menu_pagemenu_block { color:#fff; background: #FFF;}
.pagemenu_container .menu_dropdown_block.half_width { width: 70%; right: 0px; }
li.menu_pagemenu a:hover { color:#fff; background:#FFF; }

}

/* ---------------------------- TABLET ONLY  STYLES ------------------------ */

@media only screen and (min-width: 701px) and (max-width: 900px) {
	/* TABLET styles go here */
	
header #content nav .mobile_sub-collapser { display: none; }
.mobile_sub-collapser { display: none; }
.pagemenu_container { height: 40px; width: 100%; padding: 0; margin: 0 auto 20px auto; }
.pagemenu_container > ul { transition: all 100ms linear; -moz-transition: all 100ms linear; -o-transition: all 100ms linear; -webkit-transition: all 100ms linear; height: 40px; width: 100%;  background: none; overflow: visible; margin: 0 auto;  }
.pagemenu_container > ul > li { position: static; float: left; background: inherit; }
.pagemenu_container > ul > li > a { padding: 4px 15px; box-shadow: none; border: none;  font-size: 14px;  }
.pagemenu_container > ul > li:hover { margin-left: 0px; background: #333; }
.pagemenu_container > ul > li:hover > a { padding-left: 15px; background: #333; height: 30px;}
.pagemenu_container .menu_dropdown_block { position: absolute; opacity: 0; }
.pagemenu_container > ul > li:hover > .menu_dropdown_block { overflow: visible; opacity: 1; margin-left: 0; }
.pagemenu_container > ul > li.right { float: right; }
.pagemenu_container .menu_dropdown_block .column { float: left; }
.pagemenu_container .menu_dropdown_block .column.bordered {  border: none; }
ul.menu_pagemenu_block { min-width: 175px; }
ul.menu_pagemenu_block > li { }
ul.menu_pagemenu_block > li > .menu_pagemenu_block { position: absolute; top: 0; height: auto; min-width: 175px; left: 100%; box-shadow: 1px 1px 3px rgba(0,0,0,0.2), inset 1px 0 0 rgba(0,0,0,0.1); background: #fff; }
.pagemenu_container .menu_dropdown_block > ul.menu_pagemenu_block > li > ul.menu_pagemenu_block { margin-left: 0; }
ul.menu_pagemenu_block > li > .menu_pagemenu_block a { padding-left: 20px !important; }
ul.menu_pagemenu_block.right-align li a { text-align: right; }
ul.menu_pagemenu_block.right-align li.has-dropdown > a:after { content: '\2039'; right: auto; left: 10px; }
ul.menu_pagemenu_block.right-align li a .fa { margin-right: 0; margin-left: 6px; }
ul.menu_pagemenu_block.right-align > li .menu_pagemenu_block { left: auto; right: 100%; box-shadow: 2px 2px 0 rgba(0,0,0,0.1); }
ul.menu_pagemenu_block.right-align li.has-dropdown > a:after { content: '\2039'; right: auto; left: 10px; }
ul.menu_pagemenu_block > li.has-dropdown:hover > .menu_pagemenu_block { color:#fff; background: #FFF;}
.pagemenu_container .menu_dropdown_block.half_width { width: 70%; right: 0px; }
li.menu_pagemenu a:hover { color:#fff; background:#FFF; }


}
/***************/

.pagemenu_container.topfixed { position: fixed; width: 100%; top: 0px; left: 0px; border-radius: 0; }
.pagemenu_container.centered > ul { float: none; margin: 0 auto; max-width: 1000px; border-radius: 0; }
.pagemenu_container.centered > ul { float: none; margin: 0 auto; max-width: 1000px; }

/* ---------------------------- MOBILE ONLY  STYLES ------------------------ */
 
@media screen and (max-width: 700px) {
	/*MOBILE styles go here*/
	
	#pagemenu { display: none; }
}