/* --------------------- SIDE NAVIGATION  ---------------------- */

.clear.fix span { display: none; }

.sub-nav-wrapper {
position: relative;
max-width: 1320px;
margin: 0 auto 30px auto; }

.sub-nav-wrapper:after {
height: 40px;
content: ' ';
display: block;
clear: both; }

#subnav {
width: 320px; 
position: absolute;
bottom: auto;
right: 0; }

#subnav .ptl_col_1, #subnav .ptl_portlet_vertical {
overflow: visible; }

#subnav .subnav-exp {
position: relative;
display: block;
z-index: 5000; }

#subnav .subnav-exp > a {
display: block;
padding: 8px 20px 12px 20px;
background: #5F259F;
color: #FFF;
text-transform: uppercase;
text-decoration: none;
user-select: none; }

#subnav .subnav-exp > a > span {
width: calc(100% - 44px);
display: inline-block;
vertical-align: middle;  }

#subnav .subnav-exp .sidenav-slide {
position: absolute;
top: auto;
left: 0;
width: 100%;
display: none;
background: #57545A;
padding: 10px 0px;
box-sizing: border-box; }

#subnav .subnav-exp .sidenav-slide a {
color: #fff;
padding: 10px 20px 7px 60px;
display: block;
text-transform: uppercase;
text-decoration: none;
position: relative;
overflow: hidden; }

#subnav .subnav-exp .sidenav-slide a:hover, #subnav .subnav-exp .sidenav-slide a:focus {
background: rgb(0,0,0,0.2); }

#subnav .subnav-exp .sidenav-slide a:before {
content: '';
width: 30px;
height: 6px;
background: #63B1BC;
border-radius: 4px;
position: absolute;
left: 15px;
top: 50%;
opacity: 0;
transform: translate(-50px, -50%);
transition: all 0.5s cubic-bezier(0.87, -0.41, 0.19, 1.44); }
#subnav .subnav-exp .sidenav-slide a:hover:before, #subnav .subnav-exp .sidenav-slide a:focus:before {
opacity: 1;
transform: translate(0px, -50%); }

#subnav .icon {
width: 28px;
height: 21px;
position: relative;
top: 1px;
display: inline-block;
vertical-align: middle;
margin-right: 16px; }
#subnav .icon .bar {
position: absolute;
width: 28px;
height: 3px;
border-radius: 2px;
background: #ffffff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
left: 0px;
right: 0px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear; }

#subnav .icon .top-bar {
top: 0px; }

#subnav .icon .top-bar.middle {
top: 9px; }

#subnav .icon .top-bar.rotate {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg); }

#subnav .icon .middle-bar {
top: 9px; }

#subnav .icon .bottom-bar {
top: 18px; }

#subnav .icon .bottom-bar.middle {
top: 9px; }

#subnav .icon .bottom-bar.rotate {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg); }