/*********************************************
	03 CONTENT STYLINGS
 *********************************************/

/* Standard lists styles */

.menu li ul {list-style:none;padding:0;margin:0 0 0px 0; }
.menu li ul li {
    padding: 3px 0;
    font-size: 12px;
    line-height: 17px;
    position:relative;
    margin:0;
    float:none;
    text-align:left;
    width: 100%
}

.menu {
    text-align: left;
    list-style:none;
    margin: 0 auto;
    padding: 0;
    position: relative;
    display:block;
    z-index:21;
    height: 38px;
} 
.menu .menu {
    border:0 !important;
}
.menu li.first {
    background:none !important;
}
.menu li {
    z-index:21;
    text-align:center;
    margin-right:30px;
    margin-right: -2px;
    display: inline-block;
}
.menu li.submenu {
    padding: 0;
    min-width: 80px;
}
.menu li.submenu:first-child {
}
.menu li.submenu:hover {
    z-index: 22;
}
.menu li.first a {
    border-left:0;
}
.menu li.submenu:hover a{
    text-decoration: none;
    /*background: #F00183;*/
    color:#F00183;
}
.menu li.submenu span {
    display:block;
    position:relative;
    z-index:22;
}
.menu li.submenu:hover span {
    height:28px;
}
.menu li.submenu span a {
    border:1px solid #FFFFFF;
}
.menu li.submenu:hover span a {
    border:1px solid #B1B1B1;
    border-bottom:1px solid #FFFFFF;
}
.menu li.submenu:hover .inner a {
    background:transparent;
    color:#000000 !important;
}
.menu li.submenu:hover .inner a:hover { color:#F00183 !important; }

.menu a.drop {
    cursor: default;
    font-weight: 700;
    line-height:25px;
    padding: 0 12px;
    text-transform: uppercase;
    color: #666666;
    display:block;
    position:relative;
    z-index:22;
}
.menu li.submenu:hover a.drop {
    height:26px;
}
.menu a.drop.last {
    border-right:none;
}
.menu a.drop:hover,
.menu a.drop:active {
    color:#FFFFFF
}
/*  _______________________________________

	02 DROP DOWN MENU
    _______________________________________  */

/* Left & right aligned common styles */

.menu .dropdown_1columns, 
.menu .dropdown_2columns, 
.menu .dropdown_3columns, 
.menu .dropdown_4columns,
.menu .dropdown_5columns ,
.menu .dropdown_6columns{
    margin:0px auto;
    visibility: hidden;
    opacity:0;
    height:0;
    position:absolute;
    text-align:left;
    z-index:21;
    display: inline-block;
    margin-top: 1px;
    left: 0;
}

/* Drop Downs Sizes */
.menu .inner {
    border: 1px solid #B1B1B1;
    border-bottom: 1px solid #F00183;
    /*border-top:1px solid #B1B1B1;*/
    padding:10px 0;
    float:left;
    z-index:999999999;
    background:rgb(255, 255, 255);
}
.menu .inner label {
    cursor: default;
    font-size: 12px;
    font-weight: bold;
    line-height: 30px;
    border-bottom:1px solid #B1B1B1;
    color:#F00183;
    margin: -9px 0 6px;
    width: 100%;
    text-transform:uppercase;
}
.menu .inner ul li {}

.menu .dropdown_1columns .inner {width: 147px;}
.menu .dropdown_2columns .inner {width: 305px;}
.menu .dropdown_3columns .inner {width: 456px;}
.menu .dropdown_4columns .inner {width: 606px;}
.menu .dropdown_5columns .inner {width: 757px;}
.menu .dropdown_6columns .inner {width: 908px;}

/* Showing Drop Down on Mouse Hover - Left aligned */
.menu li:hover .dropdown_1columns, 
.menu li:hover .dropdown_2columns, 
.menu li:hover .dropdown_3columns,
.menu li:hover .dropdown_4columns,
.menu li:hover .dropdown_5columns,
.menu li:hover .dropdown_6columns
 {
    height:auto;
    visibility: visible;
    opacity:1;
    left:0px;
    top:25px;
    padding-top: 1px;
}
/* Columns Sizes */
.menu .col_1 {
    border-left:none !important;
}
.menu .col_1, /*{width:90px;}*/
.menu .col_2,
.menu .col_3,
.menu .col_4,
.menu .col_5,
.menu .col_6 {width:130px;}

.menu .col_1,
.menu .col_2,
.menu .col_3,
.menu .col_4,
.menu .col_5,
.menu .col_6 {
    display:inline;
    float: left;
    position: relative;
    padding:0 10px;
    border-left:1px solid #B1B1B1;
}

/* Greybox lists styles */
.menu li .greybox li {
    background:#F4F4F4;
    border:1px solid #bbbbbb;
    margin:0px 0px 4px 0px;
    padding:4px 6px 4px 6px;
    width:131px;
    /* CSS 3 Stylings */
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
}
.col_1 img {
    margin-left: -1px;
    border:5px solid #474747;
    max-width: 90px;
}
.col_1 .img-wrapper {
    padding: 0 17px 20px;
}

#menu-wrapper {display:none;}

@media only screen and (max-width : 850px) {
   .menu-container {display:none;}
   #menu-wrapper {display:block;padding-bottom:0;}
   
    /* Header ----------------------------*/
    header {
        margin: 0 0 0 -20px;
        box-sizing: border-box;
        display: table;
        position: relative;
        padding:0 20px;
        z-index:102;
        -webkit-user-select:none;
        /*-webkit-transform:translate3d(0, 0, 1px);
        -webkit-transform-style:preserve-3d;*/
        -webkit-tap-highlight-color:rgba(0,0,0,0);
        -webkit-touch-callout:none;
    }
    
    .parent {
        padding:6px 0;
    }
    #nav-container .parent a {
        background:url(../images/i_pager-next.gif) no-repeat 95% center;
    }
    .parent a span{
        color:#3a3a3a;
    }

    .menu-wrapper {
        background: transparent;
    }
    #menu {
        background: transparent;
    }
    
    header .menu-wrapper {
        display:table;
        width:100%;
    }

    header .menu-wrapper {
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        vertical-align:bottom;
        background: #000;
    }

    header dl {
        background: #000;
        display:table-cell;
        vertical-align:top;
    }

    header dt,
    header dd {
        display:block;
    }

    header dt.menu {
        border-left:none;
        border-right:none;
        float:left;
    }
    header dt {
        line-height: 21px;
        float:right;
        position:relative;
        z-index: 999999;
        overflow: hidden;
        background: url('https://www.stylediva.co.za/skin/frontend/default/galaacumsan/images/the-bar.png') no-repeat right center transparent;
    }

    header dd {
        position:absolute;
        top:0;
        left:0;
        padding:10px;
        white-space:normal;
        visibility:hidden;
        box-sizing:border-box;
    }

    header .search {
        display:table-cell;
        vertical-align:middle;
    }


    body > dt a {
        height:35px;
        float:right;
        width:48px;
    }
    /* header icons for all buttons */
    #nav {
        background: transparent;
    }
    header dt.menu {
        background:none;
    }
    header dt.menu > a {
        background: url('../images/mobi-nav-bars.png') no-repeat 7px 6px !important;
        background-size: 30px !important;
        padding: 8px 23px;
        display: inline-block;
        text-indent: -999px;
        color: #fff;
    }
    header dt.menu.active > a {
        background: url('../images/mobi-nav-bars-active.png') no-repeat 7px 6px !important;
        background-size: 30px !important;
    }
    header dt.search-icon {}

    /* header icons for all buttons end */

    header dt.cart-icon.active > a,
    header dt.menu.active > a { background-color:rgba(0, 0, 0, .10); }

    header dt.cart-icon > span:nth-child(2),
    header .badge {
        background:none;
        display:inline-block;
        color:#000;
        height:auto;
        font-size: 21px;
        font-weight: bold;
        line-height: 14px;
        position: absolute;
        text-indent: 0;
        right: 21px;
        top: 13px;
        z-index:100;
    }
    header dt.menu .badge {
        top:1px;
        right:5px;
    }
    header dd.menu-box {
        width: 100% !important;
        margin-top: 38px;
        -webkit-transition: all .2s ease-in-out;
        z-index: 10 !important;
        padding:0;
    }
    header dd.menu-box a,
    header dd.menu-box strong {
        color:#fff !important;
        display:block;
    }
    header dd.menu-box .compare-clear {
        float:right;
        line-height:18px;
    }
    header dd.menu-box .badge {
        color:#fff;
        text-shadow:0 1px 0 rgba(0, 0, 0, 0.25);
        background:transparent;
        border:1px solid #ccc;
        font-weight:normal;
        font-size:10px;
        line-height:10px;
        padding:0 3px 2px;
        text-align:right;
        top:-5px;
        left:0;
        position:relative;
        -webkit-box-shadow:0 3px 3px rgba(0, 0, 0, 0.5), inset 0 3px 3px rgba(255, 255, 255, 0.35);
        box-shadow:0 3px 3px rgba(0, 0, 0, 0.5), inset 0 3px 3px rgba(255, 255, 255, 0.35);
    }
    .switcher-menu img {
        height: 28px;
        margin: 3px 7px;
    }
    
    header dd.menu-box ol {
        background:#fff;
        box-shadow:inset 0 0 3px #000;
        list-style:none;
        margin:5px;
        padding:5px;
        -webkit-box-shadow:inset 0 0 3px #000;
                box-shadow:inset 0 0 3px #000;
    }

    header dd.menu-box ol li a {
        background:transparent;
        border-bottom:1px solid #eee;
        color:#111;
        padding:5px 5px 5px 20px;
    }

    header dd.menu-box ol li:last-child a {
        border:none;
    }

    header dd.menu-box ol li.selected {
        font-weight:bold;
    }

    header dd.menu-box ol li.selected a {
        background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAKCAYAAABv7tTEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjdEODVBMkI5Mzc4MTFFMEE2MDE5MzgwM0I5RkE1QjIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjdEODVBMkM5Mzc4MTFFMEE2MDE5MzgwM0I5RkE1QjIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGN0Q4NUEyOTkzNzgxMUUwQTYwMTkzODAzQjlGQTVCMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGN0Q4NUEyQTkzNzgxMUUwQTYwMTkzODAzQjlGQTVCMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnMJ/AIAAABLSURBVHjaYmAgHgQAsQAJ6hkSgPg/EJ8nViNMAwwHwCQUiNSQgC6RQKwGEHiPRQKvBhAwQNM4n5AGXBoJasClMYHY+IBpxKsBIMAAi14oP6lEWTAAAAAASUVORK5CYII=) no-repeat left;
    }

    /* Categories
    -----------------------------*/
    .menu-box {
        position:absolute;
        left:0;
    }
    #nav-container #nav { border-bottom: 1px solid #fff; }
    #nav-container {
        -webkit-transition: all .2s ease-in-out;
        -webkit-transform:translate3d(0, 0, 0);
        -webkit-transition:-webkit-transform 250ms linear;
        -o-transition:-o-transform 250ms linear;
        transition:transform 250ms linear;
    }
    .nav-wrap {
        width: 100%;
    }
    .menu-wrapper {
        padding-bottom:0;
    }
    #nav li.level-top {
        background: rgba(255,255,255,0.83) !important;
    }
    #nav-container li {
        line-height: 30px;
        background: rgba(255, 255, 255, 0.83);
        padding: 0;
        border-bottom: 1px solid #B1B1B1;
    }
    #nav-container li.level0 {
        width:100%;
    }
    #nav-container li img {
        float: left;
        height: 49px;
        margin: -14px 10px 0 -4px;
        border: 5px solid #fff;
    }
    #nav-container ul > li > ul { display:none; }
    #nav-container:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
    #nav-container ul {
        /*background: transparent;*/
        margin:0;
        float: left;
        padding: 0 20px 0;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;
    }
    .sub-1 {
        margin-left: 100% !important;
        position: absolute;
    }
    .sub-2 {
        margin-left: 200% !important;
        position: absolute;
    }
    .sub-1 li,.sub-2 li {
    }
    #nav-container li.subcategory-header {
        border-bottom: 1px solid #B1B1B1;
        color: #F00183;
        background:#000;
        padding: 18px 2.5% !important;
        text-align: center;
        display: inline-block;
        width: 95%;
        line-height:30px;
        margin-bottom: -5px;
        text-transform:uppercase;
        font-weight:300;
    }
    #nav-container li.subcategory-header span {
        margin-left: 10px;
        font-size: 19px;
        float:left;
        line-height: 34px;
        font-weight:700;
    }
    #nav-container li.subcategory-header .button-wrap { float:left; }
    #nav-container li.subcategory-header .button-wrap button {
        margin: 0;
        border: 1px solid #000;
        color: #000;
        display: inline-block;
        font-size: 18px;
        text-transform: uppercase;
        padding: 5px 10px 5px 19px;
        background: url(../images/i_pager-prev.gif) no-repeat white 7px 10px;
        z-index: 3;
        appearance: none;
        -webkit-appearance: none;
        background-size: 8%;
    }
    #nav-container li a {
        font-size: 18px;
        font-weight: 300;
        background-color:transparent !important;
        display:block;
        color:#3a3a3a !important;
        background-size: 20px;
        background-position: center right;
        background-size: 6%;
        padding: 5% !important;
        text-transform:uppercase;
        width:90%;
    }
    #nav-container li a span {
        font-size: 18px;
    }
}

@media all and (-webkit-transform-3d) {
    header dd { -webkit-transform:translate3d(0, -100%, -1px); }
}
@media (max-width:800px){
    header {
        width:800px;
        padding: 0 20px;
        margin:0 0 0 -20px;
    }
    #nav-container ul {
        width:800px !important;
        padding: 0 20px 0;
    }
}
@media (max-width:768px){
    header {
        width:768px;
        margin:0 0 0 -33px;
        padding: 0 33px;
    }
    #nav-container ul {
        width:768px !important;
        padding: 0 33px;
    }
}
@media (max-width:720px){
    header {
        width:720px;
        padding: 0 20px;
        margin:0 0 0 -20px;
    }
    #nav-container ul {
        width:720px  !important;
        padding: 0 20px 0;
    }
}
@media (max-width:640px){
    header {
        width:640px;
        padding: 0 20px;
        margin:0 0 0 -20px;
    }
    #nav-container ul {
        width:640px  !important;
        padding: 0 20px 0;
    }
}
@media (max-width:600px){
    header {
        width:600px;
        padding: 0 20px;
        margin:0 0 0 -20px;
    }
    #nav-container ul {
        width:600px !important;
        padding: 0 20px 0;
    }
}
@media (max-width:568px) {
    header {
        width:568px;
        padding: 0 20px;
        margin:0 0 0 -20px;
    }
    #nav-container ul {
        width:568px !important;
        padding: 0 20px 0;
    }
}
@media (max-width:540px){
    header {
        width:540px;
        padding: 0 20px;
        margin:0 0 0 -20px;
    }
    #nav-container ul {
        width:540px !important;
        padding: 0 20px 0;
    }
}
@media (max-width:533px) {
    header {
        width:533px;
        padding: 0 20px;
        margin:0 0 0 -20px;
    }
    #nav-container ul {
        width:533px  !important;
        padding: 0 20px 0;
    }
}
@media (max-width:480px){
    header {
        width:480px;
        padding: 0 20px;
        margin:0 0 0 -20px;
    }
    #nav-container ul {
        width:480px  !important;
        padding: 0 20px 0;
    } 
}
@media (max-width:400px){
    header {
        width:400px;
        padding: 0 20px;
        margin:0 0 0 -20px;
    }
    #nav-container ul {
        width:400px  !important;
        padding: 0 20px 0;
    } 
}

@media (max-width:360px){
    header {
        width:360px;
        padding: 0 20px;
        margin:0 0 0 -20px;
    }
    #nav-container ul {
        width:360px  !important;
        padding: 0 20px 0;
    }
}
@media (max-width:320px){
    header {
        width:320px ;
        padding: 0 20px;
        margin:0 0 0 -20px;
    }
    #nav-container ul {
        width:320px !important;
        padding: 0 20px 0;
    }
}