.to-top,.close-btn{display:none;}

@media only screen and (min-width: 1em){
    div#mobile-nav {
        display: none;
        background: #14335f;}
        
    #menu li ul label span {font-size: 1em !important;}
    #menu li ul label > span {font-size: 1.25em !important;}
}

@media only screen and (max-width: 48em){
    a#navmenu {display: block;}
    header.wrapper {padding-top: 3em;}
    div#psu-icon {top: 1em;}
    
    nav#topnav {
        overflow: hidden;
        position: relative;
        top: -3em;
        padding-top: 3.325em;
        background: transparent;
        }
    a.close-btn:before{
        content: '✖';
        border: 0.125em solid #FFF;
        border-radius: 50%;
        display: inline-block;
        height: 1.25em;
        vertical-align: middle;
        width: 1.25em;
        line-height: 1.25em;
        margin-right: .5em;
        text-align: center;
        }

    a.close-btn {
        position: absolute;
        display: block;
        z-index: 999;
        top: 0;
        color: #FFF !important;
        font-size: 1.5em;
        padding: .5em 0em;
        margin: 0 0 0 1em;
        text-align: left;
        width: 100%;
        }
    a.top-btn {
        display: block;
        background: #0e2951;
        color: #FFF;
        padding: 1em;
        text-transform: uppercase;
        text-align: center;
        font-size: 90%;}
    a.top-btn:before{
        content: "";
        border: 0 solid #FFF;
        border-width: 0.25rem 0 0 0.25rem ;
        display: block;
        font-size: 175%;
        font-style: normal;
        height: 1rem;
        margin: 1rem auto .5rem auto;
        width: 1rem;
        transform: rotate(45deg);
        -webkit-font-smoothing: antialiased;
        font-smoothing: antialiased;
        }
    .js a.top-btn{
        zoom: 1;
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transition: opacity 500ms ease-in-out;
        -moz-transition: opacity 500ms ease-in-out;
        -ms-transition: opacity 500ms ease-in-out;
        -o-transition: opacity 500ms ease-in-out;
        transition: opacity 500ms ease-in-out;}
    
    
    .js a.btn-fade{
        opacity: 1;
        filter: alpha(opacity=100);
        }
    .js nav#topnav {font-size: 110%;}
    .js nav#topnav ul {display: block;}
    
    .js nav#topnav > ul {
        overflow-x: hidden;
        overflow-y: auto;
        max-height: 100%;}
        
        
    #mobile-sub-nav > ul {overflow:auto !important;}

    nav#topnav > ul > li {border-top: 1px solid rgba(255, 255, 255, 0.15);}
    nav#topnav > ul > li > ul li,
    nav#mobile-sub-nav > ul li {border-top: 1px solid rgba(0, 0, 0, 0.15);}
    nav#mobile-sub-nav li.navTreeTopNode + li{border-top: 0;}
    
    nav#mobile-sub-nav > ul > li:first-of-type,
    #nav-header,
    nav#mobile-sub-nav li.navTreeTopNode
    {border: 1px solid rgba(255, 255, 255, 0.5);
    border-width: 0 0 1px 0;
    }
        
    nav#topnav > ul > li{border-top: 1px solid rgba(255, 255, 255, 0.15);}
    nav#topnav > ul > li > ul li {border-top: 1px solid rgba(0, 0, 0, 0.15);}
        

    nav ul li,
    nav ul li a{
        display: block;
        position:relative;
    }
    nav#topnav ul li a,
    nav#mobile-sub-nav a,
    #nav-header span{
        color: #FFF;
        font-weight: bold;
        line-height: 2.5em;
        margin-left: 1.5em;
        padding: 0;
        text-align: left;
    }
    nav#mobile-sub-nav ul.navTreeLevel0 .navTreeTopNode a,
    #nav-header{
        color: #FFF;
        padding-left: 0;
        padding-top: .5em;
        padding-bottom: .5em;}
    nav#mobile-sub-nav > ul li a  {margin-bottom: 0;padding-left: 1em;}
    nav#mobile-sub-nav  ul,
    nav#topnav ul{margin:0}
    
    nav#mobile-sub-nav li.navTreeCurrentNode > a:before{
        background: #191e24;
        content: "";
        font-family: 'cla icons';
        font-weight: normal;
        position: absolute;
        left: -.125em;
        border-radius: 50%;
        width: .5em;
        height: .5em;
        display: block;
        top: 50%;
        margin-top: -.25em;
        }
    
    nav#mobile-sub-nav li.navTreeCurrentNode a:before{}
    nav#mobile-sub-nav li.navTreeCurrentNode a:before{}
    
    #mobile-sub-nav a:not([href*="http://plonedev"]):not([href*="http://claplone"]):not([href*="resolve"]):not([href*="../"]):not([href*="psych.la.psu.edu"]):after{
        content: "\e606";
        font-weight: normal;
        font-size: 80%;
        padding-left: .25em;
        }
    nav#mobile-sub-nav li.navTreeTopNode a:after{border-color:rgba(255, 255, 255, 0.5);}
    #mobile-sub-nav li.navTreeTopNode  a:after,
    #mobile-sub-nav li.navTreeItemInPath  > a:after,
    #mobile-sub-nav li.navTreeCurrentNode.navTreeFolderish.opened  > a:after{
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-width: 0 0 1px 1px;
        bottom: -.5em;
        content: '';
        display: block;
        height: .8em;
        left: -.5em;
        position: absolute;
        width:.8em;
        z-index: 1;
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .navtoggle #tint-overlay{
        position: fixed;
        background: #000;
        opacity: 0.4;
        }

    body.navtoggle:after {
        content: "";
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 10;
        background-color: rgba(0,0,0,0.4);
        transition: all ease 500ms; 
    }
    
    .csstransforms3d.csstransitions.js .navtoggle #topnav{
        
        -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);}
    
    .js #topnav {
        background: #191324;
        height: 100%;
        position: fixed;
        top: 0;
        right: 0;
        width: 80%;
        box-sizing: border-box;
        z-index: 999999;
        
        -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);
        
        }
    .js #topnav > ul{
        background: #191324;
    }
    
    
    #container {overflow: hidden;}
    
    .csstransforms3d.csstransitions.js #topnav{

        -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;
    }
    .navtoggle #inner-container{
        position: relative;
    }
    
    /* Menu Styling  */
        dl.portletNavigationTree ul.navTree {padding: 0; margin: 0;}
    dl.portlet ul.navTreeLevel0 > .navTreeItem {
    	padding: 0;
		margin: 0;
		border: 0;
		line-height: 1.3em;
	}
	dl.portlet ul.navTree li a {
        font-weight: bold;
		padding: .65em .25em .65em 1em;
	}
    dl.portlet ul.navTree li.navTreeItem + li {
        border-top: 0.0825em solid;
        border-color: #CCC;
        border-color: rgba(106, 119, 136, 0.2);
    }
	dl.portlet ul.navTree li a:hover {
		/*background: #f6faff;*/
		color: #191e24;
	}
	dl.portlet.portletNavigationTree ul.navTree a.navTreeCurrentItem {
        color: #FFF;
		margin: 0;
	}
	
	dl.portlet ul.navTree.navTreeLevel1 {
		background: #f5f1f2;
		padding-bottom: .5em;
	}
 
	dl.portlet ul.navTree.navTreeLevel1 li a {
		padding: .25em .25em .25em 1em;
		margin: .1em 0;
		border: 0;
	}
	dl.portlet ul.navTree.navTreeLevel1 li a:hover {
		background: #0b3c5d;
		color: #fff;
	}
	
	dl.portlet ul.navTree.navTreeLevel1 a.navTreeCurrentItem {
		border: 0;
		margin: .1em 0;
		background: #0b3c5d;
		color: #fff;
	}
	dl.portlet ul.navTree.navTreeLevel1 a.navTreeCurrentItem:hover {
		color: #fff;
	}
}

@media only screen and (max-width: 51em) {
    
    .header-container{background: #191e24 !important;}
    body.navtoggle {overflow:hidden;}
    .wrapper,
    .footer-container footer{
        margin: auto;
        width: auto;}
    header.wrapper {
        padding: 0;}
    #psu-icon {margin-left: 1em;}
    #site-title {
        font-size: 80%;
        position: relative;
        padding: 32px 1.5em 0 1.5em;
        overflow: hidden;
        }
 

    header > #search.fixed {

        position: fixed; 
        top: 3.25em;
        width: 100%;
        z-index: 99999;
    }
    header > #search{

        background: #DDD;
        border-width: 0 0 0.0825em 0;

        width: auto;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        }
    #portal-searchbox,.searchContainer ul#search,
    #portal-searchbox.topborderradius{

        background: none;
        }
    #portal-searchbox{
        display: block;
        height: 12em;
        overflow: hidden;
        padding: 1em;

        width: auto;
        }
    #portal-searchbox.hide{
        height: 0;
        padding: 0
        }
    form.searchform ul#menu {
    position: relative;
    }


    .searchContainer ul#search{
        display: block;
        border: none;
        box-shadow: none;
        margin: 5em 0 0 0 !important;
        }
    #menu li ul#search {
        border-radius: 0;
        padding: .5em;
        width: 100% !important;}
    #menu li ul#search li {
        border: 0;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        float:left;
        margin: 0;
        padding: 0.125em;
        width:50%;}
    #portal-searchbox label {padding: .5em;}
  /*  li ul label .first-word {
        display: inline-block;
        width: 0;
        overflow: hidden;
        height: 0;

    }*/
    
    .searchContainer input {float: left;}
    .searchContainer > div {
        background: 0;
        border-radius: 0;
        padding-top: .5em;
        text-align: center;}
   .searchform #searchString {
       border-radius: 0;
       float:none;
       height: auto;
       line-height: 1.5em;
       margin: .5em auto;
       width:100% !important;
       max-width:90% !important;
       padding: .4em 3em .4em .4em;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;}
    
    
    .searchform .searchbutton {
        line-height: 1.5em;
        margin: .4em auto .4em -3em;
        position: absolute;
        z-index: 999;}
    
    .searchform .sb-toggle{
        position: absolute;
        top: 20%;
        right: 2em;
        }
    
    .searchform .sb-toggle:before {
        font-family: 'cla icons';
        content: '\e60d';
        color: #6a7788;
        font-size: 1.5em;
        font-style: normal;
        line-height: 1.5em;
        speak: none;
    }
    
    div#mobile-nav.fixed {
        position: fixed; 
    	top: 0;
        width: 100%;
    	z-index: 99999;
    }
    
    div#mobile-nav{
        border-top: 0.0825em solid #FFF;
        display: block;
        clear: both;
        overflow: auto;
        position:relative;}
    
    div#mobile-nav > a{
    background: rgba(255, 255, 255, 0.2);
    border-radius: .5em;
    color: #FFF;
    font-size: 125%;
    font-weight: bold;
    margin: .5em auto;
    padding: .125em .5em;
    position:relative;
    text-align: center;
    }
    .menuToggle,
    #topnav li > span{
        color: #FFF;
        font-weight: bold;
        display: block;
        float: right;
        line-height: 2.5em;
        position: absolute;
        text-align: center;
        top: 0;
        right: 0;
        width: 2em;
    }
    #topnavul li{text-align: left; transition: all .5s ease;}
    nav#topnav #topnavul li a{
        display: inline-block;
        }
    
    nav#topnav ul{margin: 0;}
    nav#topnav ul li.opened {border-top: 0.125em solid #CCC;}
    
    div#mobile-nav a#search-toggle {

        float: left;
        margin-left: 1em;
        padding-left:2em}
    
      /*  div#mobile-nav a#search-toggle:before{
        content: ' ';
        font-size: 1rem;
        font-weight: normal;
        padding-right: .45em;
        vertical-align: middle;
        }*/
    
    div#mobile-nav a#search-toggle:before,
    div#mobile-nav a#search-toggle:after{
        content: ' ';
        position: absolute;
        left: 0.5em;
    }
    div#mobile-nav a#search-toggle:before{
        width: .75em;
        height: .75em;
        border: 0.225em solid #FFF;
        background: transparent;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        margin-top: .25em;
        margin-left: .475em;
        top: 0%;
        }
    
    div#mobile-nav a#search-toggle:after{
        background: #FFF;
        left: .825em;
        width: 0.285em;
        height: .625em;
        margin-top: 0;
        top: 50%;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    
    
    div#mobile-nav a#navmenu {float: right;margin-right: 1em;padding-left:2em }
    div#mobile-nav a#navmenu:before {
        content: "";
        position: absolute;
        bottom: 33%;
        left: 0.5em;
        font-size: 1rem;
        width: 1em;
        height: 0.125em;
        border-top: 0.375em double #FFF;
        border-bottom: 0.125em solid #FFF;}
    
    nav#mobile-sub-nav{
        background-color: #cae0ff;
        clear: both;
        }
    #nav-header,
    nav#mobile-sub-nav li.navTreeTopNode,
    #mobile-sub-nav li.navTreeTopNode a:after,
    #mobile-sub-nav li.navTreeItemInPath > a:after,
    #mobile-sub-nav li.navTreeCurrentNode.navTreeFolderish.opened > a:after{
          background-color: #4b6fa3;
    }
    nav#mobile-sub-nav ul li a {
            color: #14335f;
    }
    #nav-header{ position: relative;}
    .js #nav-header ~ ul {display: none}
    #nav-header span:after{
        border-top: .85em solid #FFF;
        border-left: .85em solid transparent;
        border-right: .85em solid transparent;
        content: ' ';
        margin-right: 1em;
        top: 40%;
        position: absolute;
        right: 0;}
    
    footer {
        position: relative;}
    
    #mobile-sub-nav .navTreeLevel0 .menuToggle{
        background-color: rgba(255, 255, 255, 0.57);
        box-sizing: border-box;
        color: #191324;}
    
    /*.footer-login {
        margin-top: -3em;
        }*/
}