/* ----------------------------------------------------------------
Header
-----------------------------------------------------------------*/
dl,
dt,
dd,
ol,
ul,
li {
margin: 0;
padding: 0;
}
#header {
position: relative;
background-color: #FFF;
border-bottom: 1px solid #F5F5F5;
-webkit-box-shadow: 0px 3px 10px 1px rgba(214, 214, 214, 1);
-moz-box-shadow: 0px 3px 10px 1px rgba(214, 214, 214, 1);
box-shadow: 0px 3px 10px 1px rgba(214, 214, 214, 1);
}
#header .container {
position: relative;
}
#header.transparent-header {
background: transparent;
border-bottom: none;
z-index: 199;
}
#header.semi-transparent {
background-color: rgba(255, 255, 255, 0.8);
}
#header.transparent-header.floating-header {
margin-top: 60px;
}
#header.transparent-header.floating-header .container {
width: 1220px;
background-color: #FFF;
padding: 0 40px;
border-radius: 2px;
}
#header.transparent-header.floating-header.sticky-header .container {
width: 1170px;
padding: 0 15px;
}
#header.transparent-header + #slider,
#header.transparent-header + #page-title.page-title-parallax,
#header.transparent-header + #google-map,
#slider + #header.transparent-header {
top: -100px;
margin-bottom: -100px;
}
#header.transparent-header.floating-header + #slider,
#header.transparent-header.floating-header + #google-map {
top: -160px;
margin-bottom: -160px;
}
#header.transparent-header + #page-title.page-title-parallax .container {
z-index: 5;
padding-top: 100px;
}
#header.full-header {
border-bottom-color: #EEE;
}
body.stretched #header.full-header .container {
width: 100%;
padding: 0 30px;
}
#header.transparent-header.full-header #header-wrap {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
#slider + #header.transparent-header.full-header #header-wrap {
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: none;
}
/* ----------------------------------------------------------------
Logo
-----------------------------------------------------------------*/
#logo {
position: relative;
float: left;
font-size: 36px;
line-height: 100%;
margin-right: 40px;
}
#header.full-header #logo {
padding-right: 30px;
margin-right: 30px;
border-right: 1px solid #EEE;
}
#header.transparent-header.full-header #logo {
border-right-color: rgba(0, 0, 0, 0.1);
}
#logo a {
display: block;
color: #000;
}
#logo img {
display: block;
max-width: 100%;
}
#logo a.standard-logo {
display: block;
}
#logo a.retina-logo {
display: none;
}
/* ----------------------------------------------------------------
Primary Menu
-----------------------------------------------------------------*/
#primary-menu {
float: right;
}
#primary-menu ul.mobile-primary-menu {
display: none;
}
#header.full-header #primary-menu > ul {
float: left;
padding-right: 15px;
margin-right: 15px;
border-right: 1px solid #EEE;
}
#header.transparent-header.full-header #primary-menu > ul {
border-right-color: rgba(0, 0, 0, 0.1);
}
#primary-menu-trigger,
#page-submenu-trigger {
opacity: 0;
pointer-events: none;
cursor: pointer;
font-size: 20px;
position: absolute;
top: 50%;
margin-top: -25px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
-webkit-transition: opacity .3s ease;
-o-transition: opacity .3s ease;
transition: opacity .3s ease;
color: #46b1ab;
}
#primary-menu ul {
list-style: none;
margin: 0;
}
#primary-menu > ul {
float: left;
}
#primary-menu ul li {
position: relative;
}
#primary-menu ul li.mega-menu {
position: inherit;
}
#primary-menu ul > li {
float: left;
margin-left: 2px;
}
#primary-menu > ul > li:first-child {
margin-left: 0;
}
#primary-menu ul li > a {
display: block;
line-height: 22px;
padding: 39px 15px;
color: #9e9e9f;
font-weight: bold;
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
font-family: MYuenHK-Light;
}
#primary-menu ul li > a span {
display: none;
}
#primary-menu ul li > a i {
position: relative;
top: -1px;
font-size: 14px;
width: 16px;
text-align: center;
margin-right: 6px;
vertical-align: top;
}
#primary-menu ul li > a i.icon-angle-down:last-child {
font-size: 12px;
margin: 0 0 0 5px;
}
#primary-menu ul li:hover > a,
#primary-menu ul li.current > a {
color: #46b1ab;
}
#primary-menu > ul > li.sub-menu > a > div {} body.no-superfish #primary-menu li:hover > ul:not(.mega-menu-column),
body.no-superfish #primary-menu li:hover > .mega-menu-content {
display: block;
}
#primary-menu ul ul:not(.mega-menu-column),
#primary-menu ul li .mega-menu-content {
display: none;
position: absolute;
text-align: center;
background-color: #FFF;
border: 1px solid #EEE;
border-top: 3px solid #46b1ab;
height: auto;
z-index: 199;
top: 100%;
left: 0;
margin: 0;
border-radius: 5px;
-webkit-box-shadow: 0px 3px 10px 1px rgba(168, 168, 168, 1);
-moz-box-shadow: 0px 3px 10px 1px rgba(168, 168, 168, 1);
box-shadow: 0px 3px 10px 1px rgba(168, 168, 168, 1);
}
#primary-menu ul ul:not(.mega-menu-column) ul {
top: -2px !important;
left: 218px;
}
#primary-menu ul ul.menu-pos-invert:not(.mega-menu-column),
#primary-menu ul li .mega-menu-content.menu-pos-invert {
left: auto;
right: 0;
}
#primary-menu ul ul:not(.mega-menu-column) ul.menu-pos-invert {
right: 218px;
}
#primary-menu ul ul li {
float: none;
margin: 0;
}
#primary-menu ul ul li:first-child {
border-top: 0;
}
#primary-menu ul ul li > a {
font-size: 13px;
font-weight: 600;
color: #9e9e9f;
padding: 10px 20px;
border: 0;
letter-spacing: 0;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#primary-menu ul ul li > a i {
top: 0;
}
#primary-menu ul ul li:hover > a {
background-color: #F9F9F9;
color: #46b1ab;
}
#primary-menu ul ul > li.sub-menu > a,
#primary-menu ul ul > li.sub-menu:hover > a {
background-image: url("images/icons/submenu.png");
background-position: right center;
background-repeat: no-repeat;
}
/* ----------------------------------------------------------------
Top Search
-----------------------------------------------------------------*/
#top-search,
#top-cart,
#side-panel-trigger {
float: right;
margin: 35px 0 40px 25px;
}
#top-cart {
position: relative;
}
#top-search a,
#top-cart a,
#side-panel-trigger a {
display: block;
position: relative;
width: 18px;
height: 14px;
font-size: 17px;
line-height: 20px;
text-align: center;
color: #9e9e9f;
-webkit-transition: color .3s ease-in-out;
-o-transition: color .3s ease-in-out;
transition: color .3s ease-in-out;
}
#top-search a {
z-index: 11;
}
#top-search a i {
position: absolute;
top: 0;
left: 0;
-webkit-transition: opacity .3s ease;
-o-transition: opacity .3s ease;
transition: opacity .3s ease;
}
#top-search a:hover,
#top-cart a:hover,
#side-panel-trigger a:hover {
color: #46b1ab;
}
/* ----------------------------------------------------------------
Top Cart
-----------------------------------------------------------------*/
#top-cart {
margin-right: 0;
}
#top-cart > a > span , #side-panel-trigger > a > span {
display: block;
position: absolute;
top: -5px;
left: auto;
right: -10px;
font-size: 8px;
color: #FFF;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
width: 15px;
height: 15px;
line-height: 14px;
text-align: center;
background-color: #46b1ab;
border-radius: 50%;
font-family: MYuenHK-Light;
}
#top-cart .top-cart-content {
opacity: 0;
z-index: -2;
position: absolute;
background-color: #FFF;
border: 1px solid #EEE;
border-top: 3px solid #46b1ab;
top: 65px;
right: -45px;
left: auto;
margin: -10000px 0 0;
width: 110px;
text-align: center;
-webkit-transition: opacity .5s ease, top .4s ease;
-o-transition: opacity .5s ease, top .4s ease;
transition: opacity .5s ease, top .4s ease;
border-radius: 5px;
-webkit-box-shadow: 0px 3px 10px 1px rgba(168, 168, 168, 1);
-moz-box-shadow: 0px 3px 10px 1px rgba(168, 168, 168, 1);
box-shadow: 0px 3px 10px 1px rgba(168, 168, 168, 1);
}
.style-2 .container #top-cart .top-cart-content {
top: 40px;
}
.style-2.sub-title .container #top-cart .top-cart-content {
top: 50px;
}
#top-cart.top-cart-open .top-cart-content {
opacity: 1;
z-index: 11;
margin-top: 0;
}
.top-cart-title {
padding: 12px 15px;
border-bottom: 1px solid #EEE;
}
.top-cart-title h4 {
margin-bottom: 0;
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0;
font-family: MYuenHK-Medium;
}
.top-cart-items {
padding: 15px;
}
.top-cart-item {
padding-top: 15px;
margin-top: 15px;
border-top: 1px solid #F5F5F5;
}
.top-cart-item:first-child {
padding-top: 0;
margin-top: 0;
border-top: 0;
}
.top-cart-item-image {
float: left;
margin-right: 15px;
width: 48px !important;
height: 48px !important;
border: 2px solid #EEE;
-webkit-transition: border-color .2s linear;
-o-transition: border-color .2s linear;
transition: border-color .2s linear;
}
.top-cart-item-image a,
.top-cart-item-image img {
display: block;
width: 44px !important;
height: 44px !important;
}
.top-cart-item-image:hover {
border-color: #46b1ab;
}
.top-cart-item-desc {
position: relative;
overflow: hidden;
}
.top-cart-item-desc a {
text-align: left !important;
font-size: 13px !important;
width: auto !important;
height: auto !important;
font-weight: 600;
font-family: MYuenHK-Light;
text-decoration: none;
}
.top-cart-item-desc a:hover {
color: #46b1ab !important;
}
.top-cart-item-desc span.top-cart-item-price {
display: block;
line-height: 20px;
font-size: 12px !important;
color: #999;
}
.side-panel-trigger span.top-cart-item-quantity {
display: block;
position: absolute;
font-size: 12px !important;
right: 0;
top: 2px;
color: #444;
}
#side-panel-trigger img{width: 18px;height: 18px;}
.top-cart-action {
padding: 15px;
border-top: 1px solid #EEE;
}
.top-cart-action span.top-checkout-price {
font-size: 20px;
color: #46b1ab;
font-family: MYuenHK-Medium;
}
.HeaderCheckoutBTN{
float: right;
background-color: #fff;
color: #46b1ab;
padding: 5px 20px;
border-radius: 3px;
border: 1px solid #46b1ab;
-o-transition: color .2s ease-out, background .2s ease-in;
-ms-transition: color .2s ease-out, background .2s ease-in;
-moz-transition: color .2s ease-out, background .2s ease-in;
-webkit-transition: color .2s ease-out, background .2s ease-in;
transition: color .2s ease-out, background .2s ease-in;
}
.HeaderCheckoutBTN:hover{
background-color: #46b1ab;
color: #fff;
border: 1px solid #46b1ab;
}
#primary-menu > ul > li.sub-menu > a > div { }
#primary-menu ul ul > li.sub-menu > a,
#primary-menu ul ul > li.sub-menu:hover > a {
background-image: url("images/icons/submenu.png");
background-position: right center;
background-repeat: no-repeat;
}
#primary-menu ul li .mega-menu-content.style-2 > ul > li.mega-menu-title.sub-menu > a,
#primary-menu ul li .mega-menu-content.style-2 > ul > li.mega-menu-title.sub-menu:hover > a { background: none; }
.side-header #primary-menu ul > li.sub-menu > a,
.side-header #primary-menu ul > li.sub-menu:hover > a { background-image: none !important; }
.side-header #primary-menu ul > li.sub-menu > a:after {
position: absolute;
content: '\e7a5';
top: 1px;
right: 0;
-webkit-transition: transform .2s linear;
-o-transition: transform .2s linear;
transition: transform .2s linear;
}
.side-header #primary-menu ul > li.sub-menu:hover > a:after {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}