.header-main { width: 100%; height: 70px; letter-spacing: 0.05em;
}
.header-social { height: 20px; text-align: right;
}
.header-nav { height: 50px; width: 100%; background: rgba(255, 255, 255, 0.97); border-style: solid; border-color: #F4F4F4; border-width: 1px 0; position: relative;
}
.content-overlay { position: fixed; top: 0; left: 0; width: 0; background: #000; z-index: -1; opacity: 0;
}
.content-overlay.is-visible { width: 100%; height: 100%; z-index: 500; opacity: 0.4; -webkit-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease;
}
.nav-open { display: none; position: relative;
}
.icon-burger { width: 60px; height: 48px; position: relative; display: none; float: left; cursor: pointer;
}
.burger-patty { margin: -2px auto; width: 28px; height: 4px; display: block; position: absolute; top: 50%; right: 0; left: 0; background: #4D4D4D; -webkit-transition: -webkit-transform 0.2s ease; -o-transition: -o-transform 0.2s ease; transition: transform 0.2s ease;
}
.burger-patty:first-child { -webkit-transform: translateY(-9px); -ms-transform: translateY(-9px); -o-transform: translateY(-9px); transform: translateY(-9px);
}
.burger-patty:last-child { -webkit-transform: translateY(9px); -ms-transform: translateY(9px); -o-transform: translateY(9px); transform: translateY(9px);
}
.icon-burger.is-open { background: #F4F4F4;
}
.icon-burger.is-open > .burger-patty { -webkit-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0);
}
.icon-burger.is-open > .burger-patty:first-child { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
}
.icon-burger.is-open > .burger-patty:last-child { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);
}
.nav-logo { margin: 0 20px 0 20px;
}
.nav-shoppingbag { margin: 0 20px; position: relative; line-height: 48px;
}
.nav-itemcount { padding: 0 6px; min-width: 8px; line-height: 20px; text-align: center; white-space: nowrap; position: absolute; top: 6px; left: -10px; background: #29ABE2; color: #FFF; border-radius: 50%; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.nav-title { margin: 0; padding: 10px 12px; width: 100%; font: 13px/20px ProximaNova, Arial, sans-serif; color: #CCC; text-transform: uppercase; display: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.nav-item.red{ color: #cc0000;
}
.nav-item.red:hover{ color: #cc0000;
}
.nav-item,
.subnav-item { padding: 0 10px; height: 100%; display: inline-block; font: 15px/48px ProximaNova, Arial, sans-serif; color: #808080; text-transform: uppercase; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.nav-item:hover,
.subnav-item:hover { text-decoration: none;
}
.subnav-item-lg { border: 1px solid #EEE; display: inline-block; vertical-align: top; float: none; font: 16px ProximaNova, Arial, sans-serif; height: 115px; width: 300px; margin: 0 10px; padding: 8px;
}
.subnav-item-lg.leader { background-color: #F4F4F4; float: left; font: 18px/24px BookAntiqua, serif; padding: 34px 78px; text-align: center; white-space: normal; letter-spacing: 0.05em;
}
.nav-click { font-size: 11px; cursor: pointer; letter-spacing: 0;
}
.subnav-item { font-size: 11px;
}
.subnav-back { display: none;
}
.subnav-item:hover { text-decoration: none;
}
.nav-detail { background: #FFF; display: none; z-index: 450;
}
.nav-detail-lg { overflow: auto; white-space: nowrap;
}
.nav-hover { position: relative;
}
.nav-hover:not(a) { cursor: default;
}
.icon-burger.is-open:after,
.nav-hover:hover:after { content: ''; margin: 0 auto; width: 0; height: 0; border: 10px solid transparent; border-top-color: #F4F4F4; position: absolute; top: 100%; right: 0; left: 0; z-index: 600;
}
.layout-right-content {
background: #FFF;
}
.social-nav.is-fixed { position: fixed; top: 0; left: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); z-index: 400;
}
.social-nav.nav-detail.is-hover { padding: 0 10px; width: 100%; position: absolute; top: 100%; left: 0; border-style: solid; border-color: #F4F4F4; border-width: 1px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: rgba(255, 255, 255, 0.97);
}
.social-nav.nav-detail-lg.is-hover { padding: 17px 10px;
}
.nav-item:hover,
.subnav-item:hover { color: #4D4D4D; background: #F4F4F4;
}
.nav-click:after { content: ''; margin: 0 6px; width: 0; height: 0; border: 4px solid transparent; border-top-color: #808080; display: inline-block; position: relative; top: 2px;
}
.nav-click.account-nav:after { right: 3px;
}
.nav-detail.is-click { position: fixed; z-index: 550; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
}
.nav-detail.account-dropdown { position: absolute;
}
.nav-detail.is-click:before,
.nav-detail.is-click:after { content: ''; margin: auto; width: 0; height: 0; display: block; border: 9px solid transparent; position: absolute; right: 0; bottom: 100%; left: 55%;
}
.nav-detail.is-click:after { border-bottom-color: #FFF;
}
.dropdown-item { padding: 12px 10px; display: block; font: 11px/11px ProximaNova, Arial, sans-serif; color: #808080; text-align: left; text-transform: uppercase; float: none; white-space: nowrap;
}
.dropdown-item:hover { color: #4D4D4D; background: #F4F4F4; text-decoration: none;
}
.nav-hover:hover + .nav-detail,
.nav-detail.is-hover:hover { display: block;
}
.pull-right a.currency{ display: none;
}
@media (max-width: 1024px) { .header-social { width: 50px; position: absolute; right: 63px; top: 20px; z-index: 550; } .social-link{ width: 22px !important; height: 13px !important; background-size: contain; font-size: 0; } .social-nav li{ display: none; } .social-nav li:last-of-type{ display: block; width: 29px; } .show-small-mobile{ top: 49px !important; } .social-currency-text { font-size: 13px !important; line-height: 20px !important; color: #ccc !important; text-align: left !important; font-weight: normal !important; } .social-item .currency.USD, .social-item .currency.CAD{ background-image: none !important; font-size: 16px; line-height: 20px; text-align: left; text-indent: 5px; border-bottom: 1px solid #eee; } .nav-click.CAD{ background-image: url(/images/currency/CAD.png); background-repeat: no-repeat; } .nav-click.USD{ background-image: url(/images/currency/USD.png); background-repeat: no-repeat; } .nav-click:after{ display: none; } .my-account a{ display: inline-block;; }
}
@media (max-width: 367px){ .header-social { display: none; } .pull-right a.currency{ display: block; }
}
@media (min-width: 1025px) { .header-nav.is-fixed { position: fixed; top: 0; left: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); z-index: 400; } .nav-detail.is-hover { padding: 0 10px; width: 100%; position: absolute; top: 100%; left: 0; border-style: solid; border-color: #F4F4F4; border-width: 1px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: rgba(255, 255, 255, 0.97); } .nav-detail-lg.is-hover { padding: 17px 10px; }
}
@media (max-width: 1024px) { .header-main { height: 50px; position: fixed; top: 0; left: 0; z-index: 400; } .header-nav { position: static; } .content-overlay { top: 50px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .nav-visible { width: 100%; height: 48px; position: relative; } .nav-open, .icon-burger { display: block; } .nav-logo { margin: 0 auto; width: 180px; position: absolute; right: 0; left: 0; } .nav-slidein { padding: 10px 0; width: 270px; max-width: 96%; background: #FFF; position: absolute; top: 70%; left: 0; z-index: 550; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: -webkit-transform 0.2s ease; -o-transition: -o-transform 0.2s ease; transition: transform 0.2s ease; overflow-x: hidden; overflow-y: auto; } .nav-slidein.is-visible { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .nav-title { display: inline-block; } .nav-item, .subnav-item { border-bottom: 1px solid #EEE; padding: 10px 5px; width: 100%; height: auto; font: 13px/20px ProximaNova, Arial, sans-serif; color: #808080; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .nav-hover:hover:after { display: none; } .nav-detail { width: 210px; height: 100%; border-left: 1px solid #EEE; display: block; position: absolute; top: 0; left: 100%; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.2s ease; -o-transition: -o-transform 0.2s ease; transition: transform 0.2s ease; } .nav-detail.is-visible { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .subnav-overlay { background: #808080; position: absolute; top: 0; left: 0; opacity: 0; -webkit-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .subnav-overlay.is-visible { width: 100%; height: 100%; opacity: 0.6; } .subnav-item { width: 100%; border-bottom: 1px solid #EEE; height: auto; } .subnav-back { color: #CCC; display: block; } .subnav-back > .fa-angle-left { font-weight: bold; margin-right: 10px; } .subnav-back.subnav-item-lg { height: auto; margin: 0; padding-left: 10px; border: 0; border-bottom: 1px solid #EEE; text-align: left; width: 100%; } .subnav-item-lg { display: block; width: 185px; height: 105px; margin: 12px; padding: 4px; text-align: center; } .subnav-item-lg.leader { float: none; height: 70px; padding: 10px; } .subnav-item:hover { background: #F4F4F4; } .layout-right-content { margin-top: 50px; position: relative; }
}
.accessories-tablet { display: none;
}
.new-arrivals.nav-detail-lg { padding: 30px 10px 10px;
}
.new-arrivals > .subnav-back { margin-bottom: 30px;
}
.collection-item.subnav-item-lg { height: 100px; padding: 0;
}
.collection-item > .collection-title { color: #808080; font: 11px/11px ProximaNova, Arial, sans-serif; letter-spacing: 0.05em; position: absolute; top: 12px;
}
.collection-image { background-position: center; background-size: cover; display: inline-block; width: 100%; height: 100%;
}
@media (min-width: 1025px) and (max-width: 1200px) { .accessories-tablet { display: inline-block; } .accessories-normal { display: none; }
}
@media (max-width: 1024px) { .new-arrivals.nav-detail-lg { padding: 0; } .collection-item.subnav-item-lg { height: 62px; margin-bottom: 30px; position: relative; } .collection-item > .collection-title { position: absolute; top: -15px; }
}
.header-social { cursor: default; font: 10px/20px ProximaNova, Arial, sans-serif; height: 20px; text-align: right;
}
.social-nav { font-size: 11px; margin: 0; padding-right: 15px; margin-top: 1px;
}
.social-item { display: inline-block; margin-left: 20px; text-transform: uppercase;
}
.social-item > .fa { font-size: 12px;
}
.social-link { color: #808080; display: block; padding: 0; width: 100%; height: 100%;
}
.social-link:hover { color: #4D4D4D; text-decoration: none;
}
.nav-detail.social-subscribe:before,
.nav-detail.social-subscribe:after { left: 24%;
}
.nav-detail.social-help:before,
.nav-detail.social-help:after { left: 16%;
}
.nav-detail.social-currency:before,
.nav-detail.social-currency:after { left: 80%;
}
.social-subscribe { padding: 15px;
}
.social-subscribe-text,
.social-currency-text { color: #4D4D4D; font: 11px/12px ProximaNova, Arial, sans-serif; margin: 0; text-align: center;
}
.social-subscribe-text:hover { color: #4D4D4D;
}
.social-subscribe .email-subscribe { border: 1px solid #CCC; border-right: 0; width: 172px; float: left; height: 28px; margin-left: 10px; margin-top: 8px; padding-left: 5px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
.social-subscribe-btn { border: 1px solid #CCC; border-left: none; background: none; display: block; height: 28px; width: 28px; top: 8px; position: relative;
}
.social-subscribe-form { max-width: 210px;
}
.social-subscribe-form input:focus + button { background: transparent url('//cdn-ap-cf.yottaa.net/57313007312e584a2e000552/www.indochino.com/v~13.47/images/common/simpleform_submit@2x.png?yocs=m_&yoloc=ap') no-repeat scroll center; background-size: contain; border: 2px solid #29ABE2; border-left: 0;
}
.social-subscribe-form .mailing-list-terms { display: inline-block;
}
.social-subscribe-form .mailing-list-terms div { float: left; width: 10%;
}
.social-subscribe-form .mailing-list-terms .mailing-list-agree input { margin-top: 10px;
}
.social-subscribe-form .mailing-list-terms .mailing-list-info { width: 85%; margin-left: 5px;
}
.social-sub