body {
}

@media (min-width: 769px) {.mobile-view {display:none;}}
@media (max-width: 768px) {.desktop-view {display:none;}}


.blackout
{
    /*background:rgba(0,0,0,0.5);*/
    background-image: linear-gradient(to right, rgba(0,0,0,0.5) 90%, rgba(0,0,0,0));
    position:fixed;
    z-index:1000;
    top:0px;
    left:-100%;
    width:100%;
    height:100%;
    max-height:100%;
    padding:2% 12% 2% 0px;
}

.mobile-menu
{
    background:#eee;
    overflow-x:hidden;
    overflow-y:auto;
    max-height:100%;
}

.mobile-menu-button.close-button
{
    text-align:right;
    padding-bottom:10px;
}
.close-button > div
{
    display:inline-block;
    font-size:18px;
    color:#000;
    line-height:2em;
    text-transform:uppercase;
    background:rgba(0,0,0,0.15);
    padding:0px 15px;
}
.close-button .fa
{
    font-size:1.5em;
    padding:10px;
}

.mobile-menu-heading
{
    color:#FFF;
    background:#000;
    padding:10px 0px;
    text-align:center;
    font-size:18px;
    line-height:1.5em;
}

.mobile-menu-open
{
    text-align:center;
}
.mobile-menu-open:hover
{
    background:rgba(255,255,255,0.15);
}
.mobile-menu-open > div.subtitle
{
    font-size:12px;
    text-transform:uppercase;
    text-align:center;
}
.mobile-menu-open .fa
{
    font-size:25px;
    text-align:center;
    display: block;
    padding-top: 5px;
}
/* #popupCategories */

/*#popupCategories
{
    max-width:300px;

}*/

#top-links .menu-item-has-children .sub-menu.ShowMenu
{
    display:block;
}

/*#top-links .menu-item-has-children .sub-menu li:first-child
{
    padding-top:0px;
}
#top-links .menu-item-has-children .sub-menu li:first-child
{

}*/
/*.desktop-view.flexnav li a, .desktop-view.flexnav li .a
{
    padding: .5em;
}*/
.desktop-view.flexnav li .a
{
    border-bottom:none;
}


/* ---------- search ----------*/
.mobile-menu .searchControl
{
    background:rgba(0,0,0,0.5);
    padding:10px 0px;
    /*border-bottom:solid 1px rgba(0,0,0,0.5);*/
}
.mobile-menu .searchControl
{

}

/* ---------- mobile-menu ----------*/

.mobile-menu ul.menu,
.mobile-menu .menu ul
{
    padding:0px;

}
.mobile-menu .menu li
{
    display:block;
}
.mobile-menu .menu a
{
    position: relative;
    display: block;
    padding: 0px 0.96em;
    line-height: 3em;
    z-index: 2;
    /*overflow: hidden;*/
    letter-spacing:2px;
    text-decoration:none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15); 
    color:#111;
    min-height: 48px;
}

/* ------------------ Side Category Navigation Flexnav ---------------------- */
/* Flex Nav */
.flexnav .menu {
    padding:0px;

}
.flexnav, .flexnav li ul {
    margin:0px;
    padding:0px; 
    box-sizing:content-box;

}
.flexnav {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    transition: none;
    -webkit-transform-style: preserve-3d;
    margin: 0 auto;
    width: 100%; 

}

header .menu .flexnav
{
    width:auto;
}

.flexnav .glyphicon
{
    color:#000;
}
.flexnav.opacity {
    opacity: 0; 
    max-height: 0; 
    overflow: hidden;

}
.flexnav.flexnav-show {
    max-height: 2000px;
    opacity: 1;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out; 

}
.flexnav ul,
ul.flexnav
{
    padding:0px;
}
.flexnav li {
    position: relative;
    /*overflow: hidden;*/ 
    list-style: none;
}
.flexnav li a,
.flexnav li .a 
{
    position: relative;
    display: block;
    padding: 0px 50px 0px 0.96em;
    line-height: 3em;
    z-index: 2;
    letter-spacing:2px;
    text-decoration:none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15); 
    min-height: 48px;
}
.flexnav li ul {
    width: 100%; 

}
.flexnav li ul li {
    font-size: 100%;
    position: relative;
    /*overflow: hidden; */ 

}
.flexnav li ul.flexnav-show li {
    overflow: visible; 
    background: rgba(50,50,50,0.05); 

}
.flexnav li ul li a {
    height:auto;
    padding-left:40px;
    display: block;
    /*background: rgba(100,100,100,0.1);*/ 
    color:#111; 

}
.flexnav ul li ul li a {
    /*background: rgba(100,100,100,0.1);*/ 

}
.flexnav ul li ul li ul li a {
    /*background: rgba(100,100,100,0.1);*/ 

}
.flexnav .touch-button {
    position: absolute;
    z-index: 999;
    top: 0;
    right: 0;
    width: 50px;
    height: 48px;
    display: inline-block;
    background: rgba(0, 0, 0, 0.05);
    text-align: center; 

}
.flexnav .touch-button:hover {
    cursor: pointer; 

}
.flexnav .touch-button .navicon {
    position: relative;
    top: 14px;
    font-size: 12px; 

}
.desktop-view .flexnav .touch-button .navicon
{
    top: 9px;
}
.flexnav li.selected > a
{
    background-color:rgba(100,100,100,0.1);
}

.menu-button {
    letter-spacing:2px;
    padding:8px 0px;
    text-align:center;
    display: block;
    color: #222222;
    cursor: pointer; 
    font-size:2em;

}
.menu-button .touch-button {
    display:none!important;
    background: transparent;
    position: absolute;
    z-index: 999;
    top: 0;
    left: 50%;
    margin-left:50px;
    width: 50px;
    height: 50px;
    display: inline-block;
    text-align: center; 

}
.menu-button .touch-button .navicon {
    font-size: 16px;
    position: relative;
    top: 1em;
    color: #ccc;

}

/* ------------------END Flexnav Base Styles---------------------- */