﻿/* NAV DESKTOP MENU */
#navMain{
    width:100%;
    height:76px;
    position:relative;
}

/*@-ms-viewport {
    width:760px
}*/ 

@media 
only screen and (-webkit-min-device-pixel-ratio : 1) and (-webkit-max-device-pixel-ratio : 3) and (max-device-width : 760px) {
    #navMain {
        display:none !important;
    }
}

#navMain .divBg{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background-color:#fff;
    opacity:0.8;
}

#navMain .divContent{
    margin:auto;
    height:75px;
    position:relative;
}

@media all and (max-width: 1018px) {
  #navMain .divContent{
      width:730px;
  }
}

@media all  and (min-width: 1019px) and (max-width: 1274px) {
  #navMain .divContent{
      width:960px;
  }
}

@media all and (min-width: 1275px) and (max-width: 1360px) {
  #navMain .divContent{
      width:1100px;
  }
}

@media all and (min-width: 1361px) {
  #navMain .divContent{
      width:1170px;
  }
}

#navMain .divContent .aLogo{
    display:block;
    width:128px;
    height:28px;
    position:absolute;
    top:50%;
    left:0;
    margin-top:-14px;
}

#navMain .divContent .aLogo img{
    width:100%;
    height:100%;
}


/* MAIN MENU */
#navMain .divContent ul {
    position:absolute;
    right:0;
}

#navMain .divContent ul li{
    float:left;
    position:relative;
}

@media all and (max-width: 1018px) {
  #navMain .divContent ul li{
  }
}

@media all  and (min-width: 1019px) and (max-width: 1274px) {
  #navMain .divContent ul li{
  }
}

@media all and (min-width: 1275px) and (max-width: 1360px) {
  #navMain .divContent ul li{
  }
}

@media all and (min-width: 1361px) {
  #navMain .divContent ul li{
  }
}

#navMain .divContent ul li a:link,
#navMain .divContent ul li a:visited{
    display:block;
    padding:10px 5px 10px 5px;
    text-decoration:none;
    font-size:13px;
    letter-spacing:0.07em;
    color:#777;
    font-weight:700;
}

#navMain .divContent ul li a.subCategory:hover,
#navMain .divContent ul li a.subCategory:active{
    color:#000 !important;
    background-color: transparent !important;
}

#navMain .divContent ul li a.aMegaMenu{
    padding:32px 20px 32px 20px;
}

#navMain .divContent ul li:hover > a.mainCategory,
#navMain .divContent ul li:active > a.mainCategory {
    background-color: #242424;
    color: #d5d5d5;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

#navMain .divContent ul li:hover > div {
    display: block;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
/* END - MAIN MENU */


/* MEGA MENU */
#navMain .divContent ul li .divMegaMenuContent{
    width:500px;
    position:absolute;
    z-index:99;
    box-shadow:0 2px 5px #e3e3e3;
    display:none;
    border: 1px solid #eee;
}

#navMain .divContent ul li .divMegaMenuContent .divBgColor{
    width:100%;
    height:100%;
    background-color:#fff;
    position:absolute;
    top:0;
    left:0;
    z-index:-5;
    opacity:1;
}

#navMain .divContent ul li .divMegaMenuContent table{
    width:100%;
}

#navMain .divContent ul li .divMegaMenuContent table tr td{
    width:50%;
    vertical-align:middle;
    text-align:center;
}

#navMain .divContent ul li .divMegaMenuContent table tr td img{
    margin: 8px;
}


#navMain .divContent ul li .divMegaMenuContent ul{
    float:none !important;
    margin:0 !important;
    position:relative !important;
    right:auto !important;
}

#navMain .divContent ul li .divMegaMenuContent ul li{
    float:none;
}

#navMain .divContent ul li .divMegaMenuContent ul li a:link,
#navMain .divContent ul li .divMegaMenuContent ul li a:visited{
    display:inline-block;
    font-size:15px;
    color:#777;
    font-weight:600;
    letter-spacing:1px;
}

#navMain .divContent ul li .divMegaMenuContent ul li a:hover,
#navMain .divContent ul li .divMegaMenuContent ul li a:active{
    color:#000;
}

#navMain .divContent ul li .divMegaMenuContent ul li.liSeparator span{
    display:block;
    width:22px;
    margin:10px auto 10px;
    height:2px;
    background-color:#808080;
}

#navMain .divContent ul li .divMegaMenuContent ul li .aDiff:link,
#navMain .divContent ul li .divMegaMenuContent ul li .aDiff:visited{
    opacity:0.6;
}

@media all and (max-width: 1018px)  and (orientation : portrait) {
    #navMain .divContent ul li .divMegaMenuContent{
        width:410px !important;
    }
}

@media all and (max-width: 1018px) {
    #navMain .divContent .aLogo{
        width:110px;
        height:22px;
        margin-top:-11px;
    }

    #navMain .divContent ul li a.aMegaMenu{
        padding:32px 10px 32px 10px;
        font-size:11px;
    }

    #navMain .divContent ul li .divMegaMenuContent{
        width:460px;
    }

    #navMain .divContent ul li .divMegaMenuContent table tr td img{
        width:100%;
    }

    #navMain .divContent ul li .divMegaMenuContent ul li a:link,
    #navMain .divContent ul li .divMegaMenuContent ul li a:visited{
        font-size:13px !important;
    }

    #navMain .divContent ul li .divMegaMenuContent ul li a:hover,
    #navMain .divContent ul li .divMegaMenuContent ul li a:active{

    }
}

@media all  and (min-width: 1019px) and (max-width: 1274px) {
    #navMain .divContent ul li .divMegaMenuContent{
        width:500px;
    }

    #navMain .divContent ul li .divMegaMenuContent table tr td img{
        width:100%;
    }
}
/* END - MEGA MENU */

/* END - NAV DESKTOP MENU */





/* SITE MOBILE NAV MENU */
#navMobile{
    width:100%;
    position:relative;
    display:none;
}

@media 
only screen and (-webkit-min-device-pixel-ratio : 1) and (-webkit-max-device-pixel-ratio : 3) and (max-device-width : 760px) {
    #navMain{
        display:none;
    }
    
    #navMobile{
        display:block;
    }
}

@media only screen and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 1) and (-webkit-max-device-pixel-ratio : 3) and (max-device-width : 760px) {
    #navMobile {
        height: 50px;
    }
}
@media only screen and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 1) and (-webkit-max-device-pixel-ratio : 3) and (max-device-width : 760px) {
    #navMobile {
        height: 35px;
    }
}

/* **** LOGO **** */
#navMobile .aLogo:link,
#navMobile .aLogo:visited{
}

#navMobile .aLogo:hover,
#navMobile .aLogo:active{
}

#navMobile .aLogo img{
    position:absolute;
    top:50%;
    left:50%;
}

@media only screen and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 1) and (-webkit-max-device-pixel-ratio : 3) and (max-device-width : 760px) {
    #navMobile .aLogo img{
        width:99px;
        height:20px;
        margin:-11px 0 0 -55px;
    }
}
@media only screen and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 1) and (-webkit-max-device-pixel-ratio : 3) and (max-device-width : 760px) {
    #navMobile .aLogo img{
        width:82px;
        height:16px;
        margin:-8px 0 0 -41px;
    }
}
/* **** END - LOGO **** */



/* **** MOBILE MENU ICON **** */
#navMobile .aMobileMenuIcon img {
    height:12px;
    position:absolute;
    top:50%;
    left:5%;
    margin-top:-12px;
    padding:6px;
    display:block;
}

#navMobile .aMobileMenuIcon:link,
#navMobile .aMobileMenuIcon:visited {
}

#navMobile .aMobileMenuIcon:hover,
#navMobile .aMobileMenuIcon:active{
}
/* **** END - MOBILE MENU ICON **** */



/* **** MOBILE USER ACCOUNT **** */ 
#navMobile .aMobileUserIcon img{
    height:16px;
    position:absolute;
    top:50%;
    right:17%;
    margin-top:-13px;
    padding:6px;
    display:block;
}

#navMobile .aMobileUserIcon:link,
#navMobile .aMobileUserIcon:visited {
}

#navMobile .aMobileUserIcon:hover,
#navMobile .aMobileUserIcon:active{
}
/* **** END - MOBILE USER ACCOUNT **** */



/* **** MOBILE BASKET **** */ 
#navMobile .aMobileBasketIcon img{
    height:19px;
    position:absolute;
    top:50%;
    right:5%;    
    margin-top:-16px;
    padding:6px;
    display:block;
}

#navMobile .aMobileBasketIcon:link,
#navMobile .aMobileBasketIcon:visited {
}

#navMobile .aMobileBasketIcon:hover,
#navMobile .aMobileBasketIcon:active{
}
/* **** END - MOBILE BASKET **** */  



/* **** MOBILE MENU CONTENT  **** */ 
#divMobileMenuEntireContent {
    background-color:#fff;
    position:absolute;
    left:0;
    width:100%;
    /*overflow:hidden;*/
    display:none;
}

/* **** MOBILE MENU ICON **** */
#navMobile .aMobileLangIcon {
    background: transparent url(../Images/Header/lang_icon_mobile.png) no-repeat 0 6px;
    height:16px;
    width: 30px;
    position:absolute;
    top:50%;
    left:15%;
    margin-top:-14px;
    padding:6px;
    display:block;
    text-align: right;
    text-decoration: none;
    color: #000;
    padding-top: 5px;
}

#divMobileMenuEntireContent > ul {
    width:100%;
}

#divMobileMenuEntireContent .ulMobileMenu2{
    background-color:#404040;
}

#divMobileMenuEntireContent > ul > li {
    border-top:1px solid #f2f2f2;
    position:relative;

}

#divMobileMenuEntireContent .ulMobileMenu2 > li {
    border-top:1px solid #666666;
}

#divMobileMenuEntireContent > ul > li > a:link,
#divMobileMenuEntireContent > ul > li > a:visited {
    display:block;
    width:95%;
    text-decoration:none;
    color:#a3a3a3;
    font-size:13px;
    padding:15px 0 15px 5%;
    position:relative;
}

#divMobileMenuEntireContent > ul > li > a:hover,
#divMobileMenuEntireContent > ul > li > a:active {
}

#divMobileMenuEntireContent > ul > li > a > img {
    width:7px;
    height:13px;
    position:absolute;
    right:5%;
}

#divMobileMenuEntireContent > ul > li > input[type="text"]{
    width:72%;
    height:35px;
    font-size:13px;
    font-weight:400;
    color:#c2c2c2;
    background-color:transparent;
    border:1px solid #d9d9d9;
    margin:10px 0 10px 5%;
    padding:0 13% 0 5%;
}

#divMobileMenuEntireContent > ul > li > input[type="text"]::-webkit-input-placeholder { /* WebKit browsers */
    color:    #c2c2c2;
}
#divMobileMenuEntireContent > ul > li > input[type="text"]:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #c2c2c2;
}
#divMobileMenuEntireContent > ul > li > input[type="text"]::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #c2c2c2;
}
#divMobileMenuEntireContent > ul > li > input[type="text"]:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #c2c2c2;
}

#divMobileMenuEntireContent a.search:link,
#divMobileMenuEntireContent a.search:visited {
    display:block;
    position:absolute;
    top:50%;
    right:6%;
    width:30px;
    height:30px;
    margin-top:-15px;
    padding:0;
    opacity:0.4;
}

#divMobileMenuEntireContent a.search:hover,
#divMobileMenuEntireContent a.search:active {
    opacity:1;
}


#divMobileMenuEntireContent a.search img {
    width:20px;
    height: 20px;
    padding:5px;
}
/* **** END - MOBILE MENU CONTENT  **** */ 



/* **** SUB MENUS **** */
#divMobileMenuEntireContent .ulMobileSubMenu1,
#divMobileMenuEntireContent .ulMobileSubMenu2 {
    position:absolute;
    left:100%;
    top:0;
    display:none;
}

#divMobileMenuEntireContent > ul > li > a.aActive:link,
#divMobileMenuEntireContent > ul > li > a.aActive:visited {
    background-color:#f7f7f7;
    color:#bcbcbc;
    padding-left:11%;
}

#divMobileMenuEntireContent > ul > li > a.aActive:hover,
#divMobileMenuEntireContent > ul > li > a.aActive:active {
}

#divMobileMenuEntireContent > ul > li > a.aActive img {
    left:5%;
}
/* **** END - SUB MENUS **** */
/* END - SITE MOBILE NAV MENU */



/* MOBILE USER CONTENT */ 
#divMobileLoginEntireContent {
    width:100%;
    background-color:#fff;
    overflow:hidden;
    position:absolute;
    display:none;
    padding:20px 0 100px 0;
}

#divMobileLoginEntireContent span.mobileLogin {
    display:inline-block;
    font-size:23px;
    color:#000;
    letter-spacing:1px;
    font-weight:300;
    float:left;
    margin:8px 0 30px 15px;
}

/* **** MOBILE LOGIN **** */ 
#divMobileLoginEntireContent .divContent {
    width:90%;
    padding:0 5% 0 5%;
}

#divMobileLoginEntireContent .aButton:link,
#divMobileLoginEntireContent .aButton:visited{
    text-decoration:none;
    display:block;
    float:right;
    border:1px solid #7f7f7f;
    height:28px;
    padding-top:9px;
}

#divMobileLoginEntireContent .aButton:hover,
#divMobileLoginEntireContent .aButton:active{
}

#divMobileLoginEntireContent .aButton span{
    background-color:#7f7f7f;
    border:1px solid #fff;
    color:#fff;
    font-size:12px;
    letter-spacing:1px;
    padding:10px 20px 10px 20px;
}

#divMobileLoginEntireContent input[type="text"], #divMobileLoginEntireContent input[type="password"]{
    width:90%;
    height:50px;
    font-size:12px;
    color:#9a9a9a;
    border:1px solid #f2f2f2;
    background-color:#f2f2f2;
    margin-bottom:3px;
    padding:0 5% 0 5%;
    display: block;
}

#divMobileLoginEntireContent .divRememberMe{
    display:inline-block;
    height:50px;
    padding:18px 0 0 0;
    margin-left:20px;
}


/* Remember Me Checkbox */
#divMobileLoginEntireContent .divRememberMe input[type=checkbox] {
	display:none;
}

#divMobileLoginEntireContent .divRememberMe label{
    display: inline-block; 
    position: relative; 
    color:#cacaca;
    font-size:12px;
    letter-spacing:1px;
    padding:0 0 0 25px;
    float:right;
}

#divMobileLoginEntireContent .divRememberMe label:before {  
    content: "";  
    display: inline-block;  
    width: 16px;  
    height: 16px;  
    position: absolute;  
    left: 0;  
    bottom:-2px;
    background-color: transparent;  
    border:1px solid #e5e5e5;
}  

#divMobileLoginEntireContent .divRememberMe input[type=checkbox]:checked + label:before {  
    background-color:#000;
    border:1px solid #000;
}
/* END - Remember Me Checkbox */


#divMobileLoginEntireContent a.forgotPass:link,
#divMobileLoginEntireContent a.forgotPass:visited{
    text-decoration:none;
    display:block;
    font-size:12px;
    color:#676767;
    letter-spacing:0.050em;
    float:right;
    margin:18px 20px 0 0;
}

#divMobileLoginEntireContent a.forgotPass:hover,
#divMobileLoginEntireContent a.forgotPass:active{
}


#divMobileLoginEntireContent a.aLogin:link,
#divMobileLoginEntireContent a.aLogin:visited{
    text-decoration:none;
    display:block;
    text-align:center;
    border:1px solid #000;
    margin-top:10px;
}

#divMobileLoginEntireContent a.aLogin:hover,
#divMobileLoginEntireContent a.aLogin:active{
}

#divMobileLoginEntireContent a.aLogin span{
    display:block;
    color:#fff;
    font-size:12px;
    letter-spacing:1px;
    padding:14px 0 13px 0;
    background-color:#000;
    border:1px solid #fff;
}

#divMobileLoginEntireContent .divFacebook{
    margin-top:30px;
    border-top:1px solid #e5e5e5;
}

#divMobileLoginEntireContent .divFacebook a.aFacebook:link,
#divMobileLoginEntireContent .divFacebook a.aFacebook:visited{
    text-decoration:none;
    display:block;
    width:210px;
    height:32px;
    background-color:#3a55a2;
    margin:30px auto 0 auto;
}

#divMobileLoginEntireContent .divFacebook a.aFacebook:hover,
#divMobileLoginEntireContent .divFacebook a.aFacebook:active{
}

#divMobileLoginEntireContent .divFacebook a.aFacebook img{
    width:9px;
    margin:7px 0 0 15px;
}

#divMobileLoginEntireContent .divFacebook a.aFacebook span{
    display:block;
    color:#fff;
    font-size:12px;
    letter-spacing:1px;
    margin-right:20px;
    padding:10px 0 10px 19px;
    float:right;
    border-left:1px solid #4e66ab;
}
/* **** END - MOBILE LOGIN **** */ 



/* **** MOBILE MY ACCOUNT MENU **** */
#divMobileLoginEntireContent span.mobileLogin{
    float:none;
    font-size:17px;
}

#divMobileLoginEntireContent .ulAccountMenu{
     width:100%;
}

#divMobileLoginEntireContent .ulAccountMenu li {
    border-top:1px solid #f2f2f2;
    position:relative;
}

#divMobileLoginEntireContent .ulAccountMenu li h1{
    padding:10px 0 10px 18px;
}

#divMobileLoginEntireContent .ulAccountMenu li a:link,
#divMobileLoginEntireContent .ulAccountMenu li a:visited {
    display:block;
    width:95%;
    text-decoration:none;
    color:#a3a3a3;
    font-size:13px;
    padding:15px 0 15px 5%;
    position:relative;
}

#divMobileLoginEntireContent .ulAccountMenu li a:hover,
#divMobileLoginEntireContent .ulAccountMenu li a:active {
}

#divMobileLoginEntireContent .ulAccountMenu li a img {
    width:7px;
    height:13px;
    position:absolute;
    right:5%;
}
/* **** END - MOBILE MY ACCOUNT MENU **** */
/* END - MOBILE USER CONTENT */ 