#gn-viewport-emitter { overflow: hidden; position: absolute; top: 0; left: 0; width: 0; height: 0; visibility: hidden; z-index: -1; x-content: "large" } #gn-viewport-emitter::before { content: "large" } @media only screen and (max-width: 1023px) { #gn-viewport-emitter { x-content: "medium" } #gn-viewport-emitter::before { content: "medium" } } @media only screen and (max-width: 767px) { #gn-viewport-emitter { x-content: "small" } #gn-viewport-emitter::before { content: "small" } } @media only screen and (max-width: 419px) { #gn-viewport-emitter { x-content: "xsmall" } #gn-viewport-emitter::before { content: "xsmall" } } #globalnav, #gn-segmentbar { font-weight: normal; text-align: left; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100% } #globalnav, #globalnav:before, #globalnav:after, #globalnav *, #globalnav *:before, #globalnav *:after, #gn-segmentbar, #gn-segmentbar:before, #gn-segmentbar:after, #gn-segmentbar *, #gn-segmentbar *:before, #gn-segmentbar *:after { box-sizing: content-box; pointer-events: auto; letter-spacing: normal } #globalnav input, #globalnav textarea, #gn-segmentbar input, #gn-segmentbar textarea { font-family: "Myriad Set Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: 'liga', 'kern' } #globalnav { position: fixed; right: 0; left: 0; top:0px; height: 150px; z-index: 999; display: block; margin: 0; width: 100%; max-height: 150px; font-size: 18px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: url(../images/navbg.jpg) left bottom repeat-x; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } #globalnav.mini_top {height: 90px;} .theme-dark #globalnav { background: #2a2a2a; background: rgba(85, 85, 85, 0.5) } #globalnav.blocktransitions, #globalnav.blocktransitions:before, #globalnav.blocktransitions:after, #globalnav.blocktransitions *, #globalnav.blocktransitions *:before, #globalnav.blocktransitions *:after { -webkit-animation: none !important; animation: none !important; -webkit-transition: none !important; transition: none !important } @media only screen and (max-width: 1023px) { #globalnav { min-width: 320px } } @media only screen and (max-width: 767px) { #globalnav { max-height: none; -webkit-transition: background 0.35s linear, height 0.35s ease-in; transition: background 0.35s linear, height 0.35s ease-in; top:0; height: 78px; background: #fff;box-shadow: 5px 5px 5px rgba(0, 0, 0, .3); } #gn-menustate:checked ~ #globalnav, #gn-menustate:target ~ #globalnav { height: 100%; background: #fff; -webkit-transition: background 0.35s linear, height 0.35s ease-in 200ms; transition: background 0.35s linear, height 0.35s ease-in 200ms } #globalnav.searchshow, #globalnav.searchopen, #globalnav.searchhide { position: fixed } } #gn-menustate { display: none } #gn-placeholder { } @media only screen and (max-width: 767px) { #gn-placeholder { height: 48px } } .nav-overlap #gn-placeholder { display: none } @-webkit-keyframes gn-curtain-show { 0% { opacity: 0; -webkit-animation-timing-function: ease; animation-timing-function: ease } 100% { opacity: 1 } } @keyframes gn-curtain-show { 0% { opacity: 0; -webkit-animation-timing-function: ease; animation-timing-function: ease } 100% { opacity: 1 } } #gn-curtain { background: rgba(0, 0, 0, 0.2); display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 9998 } @media only screen and (max-width: 419px) { #globalnav.with-bagview ~ #gn-curtain { display: block; -webkit-animation: gn-curtain-show 200ms both; animation: gn-curtain-show 200ms both } } #globalnav.searchshow ~ #gn-curtain, #globalnav.searchopen ~ #gn-curtain, #globalnav.searchhide ~ #gn-curtain { display: block } @media only screen and (max-width: 767px) { #globalnav.searchshow ~ #gn-curtain, #globalnav.searchopen ~ #gn-curtain, #globalnav.searchhide ~ #gn-curtain { display: none } } #globalnav.searchshow ~ #gn-curtain { -webkit-animation: gn-curtain-show 200ms both; animation: gn-curtain-show 200ms both } #globalnav.searchhide ~ #gn-curtain { -webkit-animation: gn-curtain-show 200ms reverse both; animation: gn-curtain-show 200ms reverse both } #globalnav .gn-content { position: relative; height:150px; max-width: 1240px;margin:0 auto; z-index: 2; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } #globalnav.mini_top .gn-content { height: 90px; } @media only screen and (max-width: 767px) { #globalnav .gn-content { padding: 0; position: absolute; top:30px; width: 100%; height: 100% } } @-webkit-keyframes gn-apple-searchshow { 0% { -webkit-transform: none; transform: none; -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1); animation-timing-function: cubic-bezier(1, 0, 0, 1) } 100% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } } @keyframes gn-apple-searchshow { 0% { -webkit-transform: none; transform: none; -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1); animation-timing-function: cubic-bezier(1, 0, 0, 1) } 100% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } } @-webkit-keyframes gn-apple-searchhide { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1); animation-timing-function: cubic-bezier(1, 0, 0, 1) } 100% { -webkit-transform: none; transform: none } } @keyframes gn-apple-searchhide { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1); animation-timing-function: cubic-bezier(1, 0, 0, 1) } 100% { -webkit-transform: none; transform: none } } #globalnav .gn-header { display: none; position: absolute; z-index: 3; top:0; left: 0; width: 100%; height: 48px; overflow: hidden } #globalnav .gn-header .gn-apple { position: absolute; width: 150px; top: 0; left: 50%; margin-left: -75px; text-align: center; z-index: 1 } @media only screen and (max-width: 767px) { #globalnav .gn-header { display: block } #globalnav.searchshow .gn-header, #globalnav.searchopen .gn-header, #globalnav.searchhide .gn-header { background: #000; -webkit-transform: translateZ(0); transform: translateZ(0) } #globalnav .gn-header .gn-apple { display: block } #globalnav.searchshow .gn-header .gn-apple { -webkit-animation: gn-apple-searchshow 600ms 200ms both; animation: gn-apple-searchshow 600ms 200ms both } #globalnav.searchopen .gn-header .gn-apple { display: none } #globalnav.searchhide .gn-header .gn-apple { -webkit-animation: gn-apple-searchhide 600ms 200ms both; animation: gn-apple-searchhide 600ms 200ms both } #globalnav .gn-header .gn-bag-small { display: block } } @-webkit-keyframes gn-list-searchshow { 0% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1); animation-timing-function: cubic-bezier(1, 0, 0, 1) } 100% { -webkit-transform: translateY(-100%) translateY(106px); transform: translateY(-100%) translateY(106px) } } @keyframes gn-list-searchshow { 0% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1); animation-timing-function: cubic-bezier(1, 0, 0, 1) } 100% { -webkit-transform: translateY(-100%) translateY(106px); transform: translateY(-100%) translateY(106px) } } #globalnav .gn-list { cursor: default; margin: 65px 0 0 0; width:550px; float: right; height: 56px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } #globalnav.mini_top .gn-list { margin: 30px 0 0 0; } @media only screen and (max-width:767px) { #globalnav .gn-list { width: 100%; } } #globalnav .gn-list:after { content: ''; width: 100%; display: inline-block; font-size: 0; line-height: 0 } @media only screen and (max-width: 767px) { #globalnav .gn-list { position: absolute; z-index: 100001; top:48px; right: 0; bottom: 0; left: 0; margin: 0; padding: 0 20px; height: auto; box-sizing: border-box; overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; visibility: hidden; -webkit-transition: visibility 0s linear 1s; transition: visibility 0s linear 1s } #globalnav .gn-list:nth-child(2) { margin-top: 12px } #globalnav .gn-list:nth-child(9) { margin-bottom: 48px } #gn-menustate:checked ~ #globalnav .gn-list, #gn-menustate:target ~ #globalnav .gn-list { visibility: visible; -webkit-transition-delay: 0s; transition-delay: 0s } #globalnav.searchshow .gn-list { bottom: auto; -webkit-animation: gn-list-searchshow 800ms both; animation: gn-list-searchshow 800ms both } #globalnav.searchopen .gn-list { display: none } #globalnav.searchhide .gn-list { bottom: auto; -webkit-animation: gn-list-searchshow 800ms reverse both; animation: gn-list-searchshow 800ms reverse both } #globalnav .gn-list:after { display: none } } @-webkit-keyframes gn-item-searchshow { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: cubic-bezier(0.2727, 0.0986, 0.8333, 1); animation-timing-function: cubic-bezier(0.2727, 0.0986, 0.8333, 1) } 40% { opacity: 1 } 100% { opacity: 0; -webkit-transform: scale(0.7); transform: scale(0.7) } } @keyframes gn-item-searchshow { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: cubic-bezier(0.2727, 0.0986, 0.8333, 1); animation-timing-function: cubic-bezier(0.2727, 0.0986, 0.8333, 1) } 40% { opacity: 1 } 100% { opacity: 0; -webkit-transform: scale(0.7); transform: scale(0.7) } } @-webkit-keyframes gn-item-searchhide { 0% { opacity: 0; -webkit-transform: scale(0.7); transform: scale(0.7) } 60% { opacity: 1 } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: cubic-bezier(0.2727, 0.0986, 0.8333, 1); animation-timing-function: cubic-bezier(0.2727, 0.0986, 0.8333, 1) } } @keyframes gn-item-searchhide { 0% { opacity: 0; -webkit-transform: scale(0.7); transform: scale(0.7) } 60% { opacity: 1 } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: cubic-bezier(0.2727, 0.0986, 0.8333, 1); animation-timing-function: cubic-bezier(0.2727, 0.0986, 0.8333, 1) } } @-webkit-keyframes gn-item-searchshow-small { 0% { -webkit-transform: none; transform: none; -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1); animation-timing-function: cubic-bezier(1, 0, 0, 1) } 100% { -webkit-transform: translateY(-50px); transform: translateY(-50px) } } @keyframes gn-item-searchshow-small { 0% { -webkit-transform: none; transform: none; -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1); animation-timing-function: cubic-bezier(1, 0, 0, 1) } 100% { -webkit-transform: translateY(-50px); transform: translateY(-50px) } } @-webkit-keyframes gn-search-placeholder-searchshow { 0% { opacity: 1; -webkit-animation-timing-function: ease; animation-timing-function: ease } 100% { opacity: 0.4 } } @keyframes gn-search-placeholder-searchshow { 0% { opacity: 1; -webkit-animation-timing-function: ease; animation-timing-function: ease } 100% { opacity: 0.4 } } @-webkit-keyframes gn-bag-searchshow { 0% { opacity: 1; -webkit-animation-timing-function: ease; animation-timing-function: ease } 100% { opacity: 0 } } @keyframes gn-bag-searchshow { 0% { opacity: 1; -webkit-animation-timing-function: ease; animation-timing-function: ease } 100% { opacity: 0 } } #globalnav .gn-item { display: inline-block; position: relative; height: 56px; z-index: 1; } #globalnav.ie7 .gn-item { display: inline; zoom: 1 } @media only screen and (max-width: 767px) { #globalnav .gn-item { width: 100%; height: 48px } } @media only screen and (max-width: 767px) { #globalnav .gn-apple { display: none; } } @media (max-width:767px) { #globalnav .gn-header .gn-apple { background-repeat: no-repeat; background-size: auto 30px; background-image: url(../images/logo.png); background-position: left center; width:110px; top: 0; left:10px; margin-left:0; text-align: center; z-index: 1; } } #globalnav.searchshow .gn-bag { -webkit-animation: gn-bag-searchshow 300ms both; animation: gn-bag-searchshow 300ms both; -webkit-transform: translateZ(0); transform: translateZ(0) } #globalnav.searchopen .gn-bag { visibility: hidden } #globalnav.searchhide .gn-bag { -webkit-animation: gn-bag-searchshow 300ms reverse both; animation: gn-bag-searchshow 300ms reverse both; -webkit-transform: translateZ(0); transform: translateZ(0) } @media only screen and (max-width: 767px) { #globalnav .gn-bag { display: none; position: absolute; top: 0; right: 0; width: auto; z-index: 1 } } #globalnav.searchshow .gn-item-menu, #globalnav.searchopen .gn-item-menu, #globalnav.searchhide .gn-item-menu { pointer-events: none } #globalnav.searchshow .gn-item-menu { -webkit-animation: gn-item-searchshow 400ms both; animation: gn-item-searchshow 400ms both; pointer-events: none } #globalnav.searchshow .gn-item-menu:nth-child(2) { -webkit-animation-delay: 280ms; animation-delay: 280ms } #globalnav.searchshow .gn-item-menu:nth-child(3) { -webkit-animation-delay: 245ms; animation-delay: 245ms } #globalnav.searchshow .gn-item-menu:nth-child(4) { -webkit-animation-delay: 210ms; animation-delay: 210ms } #globalnav.searchshow .gn-item-menu:nth-child(5) { -webkit-animation-delay: 175ms; animation-delay: 175ms } #globalnav.searchshow .gn-item-menu:nth-child(6) { -webkit-animation-delay: 140ms; animation-delay: 140ms } #globalnav.searchshow .gn-item-menu:nth-child(7) { -webkit-animation-delay: 105ms; animation-delay: 105ms } #globalnav.searchshow .gn-item-menu:nth-child(8) { -webkit-animation-delay: 70ms; animation-delay: 70ms } #globalnav.searchshow .gn-item-menu:nth-child(9) { -webkit-animation-delay: 35ms; animation-delay: 35ms } @media only screen and (max-width: 767px) { #globalnav.searchshow .gn-item-menu { -webkit-animation: gn-item-searchshow-small 800ms both; animation: gn-item-searchshow-small 800ms both } #globalnav.searchshow .gn-item-menu:nth-child(n) { -webkit-animation-delay: 0s; animation-delay: 0s } } #globalnav.searchopen .gn-item-menu { visibility: hidden } #globalnav.searchhide .gn-item-menu { -webkit-animation: gn-item-searchhide 400ms both; animation: gn-item-searchhide 400ms both } #globalnav.searchhide .gn-item-menu:nth-child(2) { -webkit-animation-delay: 0ms; animation-delay: 0ms } #globalnav.searchhide .gn-item-menu:nth-child(3) { -webkit-animation-delay: 35ms; animation-delay: 35ms } #globalnav.searchhide .gn-item-menu:nth-child(4) { -webkit-animation-delay: 70ms; animation-delay: 70ms } #globalnav.searchhide .gn-item-menu:nth-child(5) { -webkit-animation-delay: 105ms; animation-delay: 105ms } #globalnav.searchhide .gn-item-menu:nth-child(6) { -webkit-animation-delay: 140ms; animation-delay: 140ms } #globalnav.searchhide .gn-item-menu:nth-child(7) { -webkit-animation-delay: 175ms; animation-delay: 175ms } #globalnav.searchhide .gn-item-menu:nth-child(8) { -webkit-animation-delay: 210ms; animation-delay: 210ms } #globalnav.searchhide .gn-item-menu:nth-child(9) { -webkit-animation-delay: 245ms; animation-delay: 245ms } @media only screen and (max-width: 767px) { #globalnav.searchhide .gn-item-menu { -webkit-animation: gn-item-searchshow-small 800ms reverse both; animation: gn-item-searchshow-small 800ms reverse both } #globalnav.searchhide .gn-item-menu:nth-child(n) { -webkit-animation-delay: 0s; animation-delay: 0s } } @media only screen and (max-width: 767px) { #globalnav .gn-item-menu { height: auto; border-bottom: 1px solid #333; opacity: 0; pointer-events: none; -webkit-transform: scale(1.1) translateY(-24px); -ms-transform: scale(1.1) translateY(-24px); transform: scale(1.1) translateY(-24px); -webkit-transition: opacity 0.35s ease-out, -webkit-transform 0.35s ease-out; transition: opacity 0.35s ease-out, transform 0.35s ease-out } #globalnav .gn-item-menu:nth-child(2) { -webkit-transition-delay: 400ms, 400ms; transition-delay: 400ms, 400ms } #globalnav .gn-item-menu:nth-child(3) { -webkit-transition-delay: 350ms, 350ms; transition-delay: 350ms, 350ms } #globalnav .gn-item-menu:nth-child(4) { -webkit-transition-delay: 300ms, 300ms; transition-delay: 300ms, 300ms } #globalnav .gn-item-menu:nth-child(5) { -webkit-transition-delay: 250ms, 250ms; transition-delay: 250ms, 250ms } #globalnav .gn-item-menu:nth-child(6) { -webkit-transition-delay: 200ms, 200ms; transition-delay: 200ms, 200ms } #globalnav .gn-item-menu:nth-child(7) { -webkit-transition-delay: 150ms, 150ms; transition-delay: 150ms, 150ms } #globalnav .gn-item-menu:nth-child(8) { -webkit-transition-delay: 100ms, 100ms; transition-delay: 100ms, 100ms } #globalnav .gn-item-menu:nth-child(9) { -webkit-transition-delay: 50ms, 50ms; transition-delay: 50ms, 50ms } #gn-menustate:checked ~ #globalnav .gn-item-menu, #gn-menustate:target ~ #globalnav .gn-item-menu { opacity: 1; pointer-events: auto; -webkit-transform: none; -ms-transform: none; transform: none } #gn-menustate:checked ~ #globalnav .gn-item-menu:nth-child(2), #gn-menustate:target ~ #globalnav .gn-item-menu:nth-child(2) { -webkit-transition-delay: 300ms, 300ms; transition-delay: 300ms, 300ms } #gn-menustate:checked ~ #globalnav .gn-item-menu:nth-child(3), #gn-menustate:target ~ #globalnav .gn-item-menu:nth-child(3) { -webkit-transition-delay: 350ms, 350ms; transition-delay: 350ms, 350ms } #gn-menustate:checked ~ #globalnav .gn-item-menu:nth-child(4), #gn-menustate:target ~ #globalnav .gn-item-menu:nth-child(4) { -webkit-transition-delay: 400ms, 400ms; transition-delay: 400ms, 400ms } #gn-menustate:checked ~ #globalnav .gn-item-menu:nth-child(5), #gn-menustate:target ~ #globalnav .gn-item-menu:nth-child(5) { -webkit-transition-delay: 450ms, 450ms; transition-delay: 450ms, 450ms } #gn-menustate:checked ~ #globalnav .gn-item-menu:nth-child(6), #gn-menustate:target ~ #globalnav .gn-item-menu:nth-child(6) { -webkit-transition-delay: 500ms, 500ms; transition-delay: 500ms, 500ms } #gn-menustate:checked ~ #globalnav .gn-item-menu:nth-child(7), #gn-menustate:target ~ #globalnav .gn-item-menu:nth-child(7) { -webkit-transition-delay: 550ms, 550ms; transition-delay: 550ms, 550ms } #gn-menustate:checked ~ #globalnav .gn-item-menu:nth-child(8), #gn-menustate:target ~ #globalnav .gn-item-menu:nth-child(8) { -webkit-transition-delay: 600ms, 600ms; transition-delay: 600ms, 600ms } #gn-menustate:checked ~ #globalnav .gn-item-menu:nth-child(9), #gn-menustate:target ~ #globalnav .gn-item-menu:nth-child(9) { -webkit-transition-delay: 650ms, 650ms; transition-delay: 650ms, 650ms } } #globalnav .gn-search-placeholder { display: none } @media only screen and (max-width: 767px) { #globalnav .gn-search { border-bottom-color: silver } #globalnav.searchshow .gn-search, #globalnav.searchopen .gn-search, #globalnav.searchhide .gn-search { -webkit-animation: none; animation: none } #globalnav .gn-search-placeholder { cursor: text; display: block; margin-left: 28px } #globalnav.searchshow .gn-search-placeholder { -webkit-animation: gn-search-placeholder-searchshow 800ms both; animation: gn-search-placeholder-searchshow 800ms both } #globalnav.searchhide .gn-search-placeholder { -webkit-animation: gn-search-placeholder-searchshow 800ms reverse both; animation: gn-search-placeholder-searchshow 800ms reverse both } } #globalnav .gn-link { font-size: 16px; line-height: 56px; font-weight:bold; letter-spacing: normal; opacity: 1; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)'; filter: alpha(opacity=100); color: #333; position: relative; z-index: 1; display: inline-block; padding: 0; height: 56px; background: no-repeat; text-decoration: none; white-space: nowrap; -webkit-transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-tap-highlight-color: transparent; outline-offset: -7px border-bottom: 1px solid #333333; } #globalnav .active1{ color: #176cb0; border-bottom: 1px solid #176cb0; line-height:62px; } @media only screen and (max-width: 767px) { #globalnav .gn-link { font-size: 20px; line-height: 2.35; font-weight: 200; letter-spacing: normal } #globalnav .active1{ border-bottom: none; } } @media only screen and (max-width: 767px) { #globalnav .gn-link { height: 48px } } #globalnav.no-js .gn-link:hover { opacity: 0.65; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)'; filter: alpha(opacity=65); color:#333; } #globalnav.no-touch .gn-link:hover { opacity: 0.65; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)'; filter: alpha(opacity=65) } @media only screen and (max-width: 767px) { #globalnav .gn-link-search { cursor: default } #globalnav.no-js .gn-link-search:hover { opacity: 1; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)'; filter: alpha(opacity=100) } #globalnav.no-touch .gn-link-search:hover { opacity: 1; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)'; filter: alpha(opacity=100) } } #globalnav .gn-link-text { position: absolute; top: 0; left: 0; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(0px 0px 99.9% 99.9%); clip-path: inset(0px 0px 99.9% 99.9%); overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0 } @media only screen and (max-width: 767px) { #globalnav .gn-link-bag { padding: 0 16px; -webkit-transition: -webkit-transform 0.25s 0.55s ease-out; transition: transform 0.25s 0.55s ease-out } #gn-menustate:checked ~ #globalnav.js .gn-link-bag, #gn-menustate:target ~ #globalnav.js .gn-link-bag { -webkit-transform: translateX(200%); -ms-transform: translateX(200%); transform: translateX(200%); -webkit-transition: -webkit-transform 0.55s 0.25s ease-out; transition: transform 0.55s 0.25s ease-out } } #globalnav .gn-link-bag:focus:active { outline: none } @media only screen and (max-width: 767px) { #globalnav .gn-item-menu .gn-link { background-position: left center; display: inline-block; outline-offset: 0; padding: 0; width: auto; max-width: none } } #globalnav .gn-link-apple { background-repeat: no-repeat; background-size: 385px 56px; background-image: url(../images/logo.png); background-position: left center; width: 385px; } @media only screen and (max-width: 767px) { #globalnav .gn-link-apple { background-size: auto 40px; } .gn-current-apple #globalnav .gn-link-apple { opacity: 0.65; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)'; filter: alpha(opacity=65) } .gn-current-bag #globalnav .gn-link-bag { opacity: 0.65; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)'; filter: alpha(opacity=65) } #globalnav .gn-link.current { opacity: 0.65; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)'; filter: alpha(opacity=65) } #globalnav .gn-menuicon { display: none; position: absolute; z-index: 2; top: 0; right:0; width: 48px; border-bottom: none } @media only screen and (max-width: 767px) { #globalnav .gn-menuicon { display: block } } #globalnav .gn-menuicon-label { display: block; position: absolute; z-index: 3; top: 0; width: 48px; height: 48px; cursor: pointer; -webkit-transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-tap-highlight-color: transparent } #globalnav .gn-menuicon-label:hover, #globalnav .gn-menuicon-label:focus, #globalnav .gn-menuicon-label:active { opacity: .65 } #globalnav.touch .gn-menuicon-label { opacity: 1; -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99) } #gn-menustate:checked ~ #globalnav .gn-menuicon-label, #gn-menustate:target ~ #globalnav .gn-menuicon-label { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg) } #globalnav .gn-menuicon-bread { position: absolute; z-index: 3; top: 0; left: 0; width: 48px; height: 48px; -webkit-transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) } #globalnav .gn-menuicon-bread-top { -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); z-index: 4 } #gn-menustate:checked ~ #globalnav .gn-menuicon-bread-top, #gn-menustate:target ~ #globalnav .gn-menuicon-bread-top { -webkit-transition: -webkit-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg) } #globalnav .gn-menuicon-bread-bottom { -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0) } #gn-menustate:checked ~ #globalnav .gn-menuicon-bread-bottom, #gn-menustate:target ~ #globalnav .gn-menuicon-bread-bottom { -webkit-transition: -webkit-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg) } #globalnav .gn-menuicon-bread-crust { display: block; width: 17px; height: 1px; background: #000; position: absolute; left: 16px; z-index: 1; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s } #globalnav .gn-menuicon-bread-crust-top { top: 23px; -webkit-transition: -webkit-transform 0.2s 0.2s; transition: transform 0.2s 0.2s; -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); } #gn-menustate:checked ~ #globalnav .gn-menuicon-bread-crust-top, #gn-menustate:target ~ #globalnav .gn-menuicon-bread-crust-top { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 0; transition-delay: 0 } #globalnav .gn-menuicon-bread-crust-bottom { bottom: 23px; -webkit-transform: translateY(3px); -ms-transform: translateY(3px); transform: translateY(3px) } #gn-menustate:checked ~ #globalnav .gn-menuicon-bread-crust-bottom, #gn-menustate:target ~ #globalnav .gn-menuicon-bread-crust-bottom { -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } #globalnav .gn-menuanchor { color: #fff; position: absolute; top: 0; left: 0; width: 1px; height: 1px; z-index: 10 } #globalnav .gn-menuanchor:focus { outline-offset: -8px; width: 48px; height: 48px } #globalnav .gn-menuanchor-close { display: none } #globalnav .gn-menuanchor-label { position: absolute; top: 0; left: 0; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(0px 0px 99.9% 99.9%); clip-path: inset(0px 0px 99.9% 99.9%); overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0 } #gn-menustate:checked ~ #globalnav .gn-menuanchor-open, #gn-menustate:target ~ #globalnav .gn-menuanchor-open { display: none } #gn-menustate:checked ~ #globalnav .gn-menuanchor-close, #gn-menustate:target ~ #globalnav .gn-menuanchor-close { display: block } #globalnav .gn-bag-badge { border-radius: 6px; margin-top: -3px; margin-left: -3px; width: 6px; height: 6px; background: #5cc3f6; display: none; position: absolute; top: 50%; left: 50%; z-index: 1 } @media only screen and (max-width: 767px) { #globalnav .gn-bag-badge { border-radius: 9px; margin-top: -4px; margin-left: -4.5px; width: 9px; height: 9px } } #globalnav .gn-bag.with-badge .gn-bag-badge { display: block } #globalnav .gn-bagview, #globalnav .gn-notification { margin-right: -114px; position: absolute; top: 48px; right: 0; z-index: 1 } @media only screen and (max-width: 1266px) { #globalnav .gn-bagview, #globalnav .gn-notification { right: 5px; margin-right: calc(512px - 50vw) } } @media only screen and (max-width: 1024px) { #globalnav .gn-bagview, #globalnav .gn-notification { margin-right: 0 } } @media only screen and (max-width: 767px) { #globalnav .gn-bagview, #globalnav .gn-notification { margin-right: 0; top: 52px } } #globalnav .gn-bagview-caret, #globalnav .gn-notification-caret { overflow: hidden; position: absolute; bottom: -5px; left: 0; width: 100%; height: 10px; z-index: 1 } @media only screen and (max-width: 767px) { #globalnav .gn-bagview-caret, #globalnav .gn-notification-caret { bottom: 100% } } @media only screen and (max-width: 419px) { #globalnav .gn-bagview-caret, #globalnav .gn-notification-caret { height: 9px; margin-bottom: 0 } } #globalnav .gn-bagview-caret:after, #globalnav .gn-notification-caret:after { border: 1px solid; content: ""; display: block; position: absolute; top: 0; left: 50%; width: 12px; height: 12px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; z-index: 1 } @media only screen and (max-width: 767px) { #globalnav .gn-bagview-caret:after, #globalnav .gn-notification-caret:after { left: auto; right: 4px } } #globalnav .gn-bagview { font-size: 15px; line-height: 1.73333; font-weight: 400; letter-spacing: normal; background: #fff; border: 1px solid #d6d6d6; border-radius: 2px; display: none; width: 288px } @media only screen and (max-width: 767px) { #globalnav .gn-bagview { font-size: 16px; line-height: 1.625; font-weight: 400; letter-spacing: normal } } #globalnav.with-bagview .gn-bagview { display: block } @media only screen and (max-width: 419px) { #globalnav .gn-bagview { border-radius: 0; border-width: 0 0 1px 0; top: 48px; left: 0; right: 0; width: 100% } } #globalnav .gn-bagview-content { margin: 0 auto; min-height: 86px; padding: 0 20px; position: relative; z-index: 2 } @media only screen and (max-width: 419px) { #globalnav .gn-bagview-content { padding: 0 48px } } #globalnav .gn-bagview-caret { display: none } #globalnav.with-bagview .gn-bagview-caret { display: block } .with-bagview#globalnav.ie7 .gn-bagview-caret, .with-bagview#globalnav.ie8 .gn-bagview-caret { display: none } #globalnav.with-bagview .gn-bagview-caret-small { display: none } @media only screen and (max-width: 767px) { #globalnav.with-bagview .gn-bagview-caret-small { display: block } } @media only screen and (max-width: 767px) { #globalnav.with-bagview .gn-bagview-caret-large { display: none } } #globalnav .gn-bagview-caret:after { background: #fff; border-color: #d6d6d6 } @media only screen and (max-width: 419px) { #globalnav .gn-bagview-caret:after { border-color: #fff; right: 10px } } #globalnav .gn-bag { z-index: 2 } #globalnav .gn-bagview { font-size: 15px; line-height: 1.23333; font-weight: 400; letter-spacing: normal; background: #fff } @media only screen and (max-width: 767px) { #globalnav .gn-bagview { font-size: 16px; line-height: 1.15625; font-weight: 400; letter-spacing: normal } } #globalnav .gn-bagview-message { color: #999; line-height: 86px; margin: 0; text-align: center } #globalnav .gn-bagview-linemessage { margin: 0; color: #999; font-size: 12px; line-height: 1.33333; font-weight: 400; letter-spacing: normal; text-align: center } @media only screen and (max-width: 767px) { #globalnav .gn-bagview-linemessage { font-size: 12px; line-height: 1.33333; font-weight: 400; letter-spacing: normal } } #globalnav .gn-bagview-linemessage-text { padding: 0 8px 0 8px; background: #fff } #globalnav .gn-bagview-linemessage:before { display: block; position: relative; top: 9px; margin-top: -1px; z-index: -10; border-bottom: 1px solid #e3e3e3; content: "" } @-webkit-keyframes loader { from { -webkit-transform: rotate(0deg) translateZ(0); transform: rotate(0deg) translateZ(0) } to { -webkit-transform: rotate(360deg) translateZ(0); transform: rotate(360deg) translateZ(0) } } @keyframes loader { from { -webkit-transform: rotate(0deg) translateZ(0); transform: rotate(0deg) translateZ(0) } to { -webkit-transform: rotate(360deg) translateZ(0); transform: rotate(360deg) translateZ(0) } } #globalnav .gn-bagview-loader { background: no-repeat center/40px url("../assets/store/spinner.svg"); margin-top: -20px; margin-left: -20px; width: 40px; height: 40px; background: url("http://images.apple.com/ac/globalnav/2.0/en_US/assets/store/spinner.gif") no-repeat\0; position: absolute; top: 50%; left: 50%; z-index: 1; -webkit-animation: loader 1s linear infinite; animation: loader 1s linear infinite } #globalnav .gn-bagview _:-ms-input-placeholder, :root #globalnav .gn-bagview-loader { background: none, no-repeat center/40px url("../assets/store/spinner.svg") } #globalnav .gn-bagview-bag { list-style: none } #globalnav .gn-bagview-bagitem { border-bottom: 1px solid #e3e3e3 } #globalnav .gn-bagview-bagitem-first { padding-top: 8px } #globalnav .gn-bagview-bagitem-last { border-bottom-style: none } #globalnav .gn-bagview-bagitem-link { margin: 0; padding: 0; display: table; width: 100%; color: #333; text-decoration: none } #globalnav .gn-bagview-bagitem-column1, #globalnav .gn-bagview-bagitem-column2 { display: table-cell; vertical-align: middle; min-height: 56px } #globalnav .gn-bagview-bagitem-column1 { padding: 15px 14px 15px 4px; width: 25% } #globalnav .gn-bagview-bagitem-column2 { padding: 15px 0; width: 75% } #globalnav .gn-bagview-bagitem-picture { max-width: 56px; height: auto } #globalnav .gn-bagview-bagitem-qty { font-size: 12px; line-height: 1.33333; font-weight: 400; letter-spacing: normal; color: #999 } @media only screen and (max-width: 767px) { #globalnav .gn-bagview-bagitem-qty { font-size: 12px; line-height: 1.33333; font-weight: 400; letter-spacing: normal } } #globalnav .gn-bagview-bagitem-qty:before { content: "\2715"; font-size: 0.75em } #globalnav .gn-bagview-nav { margin-bottom: 7px } @media only screen and (max-width: 767px) { #globalnav .gn-bagview-nav { margin-bottom: 8px } } #globalnav .gn-bagview-nav-list { margin: 0; padding: 0; list-style: none } #globalnav .gn-bagview-nav-item { margin: 0; padding: 0; border-top: 1px solid #e3e3e3 } #globalnav .gn-bagview-nav-item:first-child { border-top-style: none } #globalnav .gn-bagview-nav-nobtn { border-top: 1px solid #e3e3e3 } #globalnav .gn-bagview-nav-link { color: #08c; display: block; line-height: 44px; padding: 0 30px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } #globalnav .gn-bagview-nav-link:hover { text-decoration: underline } #globalnav.ie7 .gn-bagview-button { display: inline; zoom: 1 } #globalnav.ie7 .gn-bagview-button { vertical-align: middle } #globalnav.no-js .gn-bagview-button:hover { background-color: #2fa2dc; background: -webkit-linear-gradient(#4ab4e8, #1491d0); background: linear-gradient(#4ab4e8, #1491d0); text-decoration: none } #globalnav.no-touch .gn-bagview-button:hover { background-color: #2fa2dc; background: -webkit-linear-gradient(#4ab4e8, #1491d0); background: linear-gradient(#4ab4e8, #1491d0); text-decoration: none } #globalnav .gn-bagview-button:active { background-color: #0d85c0; background: -webkit-linear-gradient(#1b9dde, #006da3); background: linear-gradient(#1b9dde, #006da3); outline: none } @-moz-document url-prefix() { #globalnav .gn-bagview-button { line-height: 31px; padding-top: 1px } } #globalnav .gn-bagview-button-buynow, #globalnav .gn-bagview-button-compact { background-color: #1d9bd9; background: -webkit-linear-gradient(#3baee7, #08c); background: linear-gradient(#3baee7, #08c); border-color: #137ec6; border-top-color: #1992da; border-bottom-color: #0d6ab2; color: #fff; color: #fff; font-size: 13px; padding: 0 11px; line-height: 22px } #globalnav.no-js .gn-bagview-button-buynow:hover, #globalnav.no-js .gn-bagview-button-compact:hover { background: #2fa2dc; background: -webkit-linear-gradient(#4ab4e8, #1491d0); background: linear-gradient(#4ab4e8, #1491d0) } #globalnav.no-touch .gn-bagview-button-buynow:hover, #globalnav.no-touch .gn-bagview-button-compact:hover { background: #2fa2dc; background: -webkit-linear-gradient(#4ab4e8, #1491d0); background: linear-gradient(#4ab4e8, #1491d0) } #globalnav .gn-bagview-button-buynow:active, #globalnav .gn-bagview-button-compact:active { background: #0d85c0; background: -webkit-linear-gradient(#1b9dde, #006da3); background: linear-gradient(#1b9dde, #006da3) } @-moz-document url-prefix() { #globalnav .gn-bagview-button-buynow, #globalnav .gn-bagview-button-compact { line-height: 21px; padding-top: 1px } } #globalnav .gn-bagview-button { display: block; margin: 18px 0; text-decoration: none } #globalnav #gn-bagview-content .gn-bagview-button.gn-bagview-button-checkout { display: block } #globalnav .gn-bagview-nav-item-preregistration { padding: 10px 0px !important; border-bottom: 1px solid #e3e3e3 !important; text-align: center !important } #globalnav .gn-bagview-nav-link-preregistration { padding: 0px 12px !important } #globalnav li.prereg-promo-links-list { display: inline-block } @-webkit-keyframes gn-searchview-searchhide { 0% { opacity: 1; -webkit-animation-timing-function: ease; animation-timing-function: ease } 100% { opacity: 0 } } @keyframes gn-searchview-searchhide { 0% { opacity: 1; -webkit-animation-timing-function: ease; animation-timing-function: ease } 100% { opacity: 0 } } @-webkit-keyframes gn-searchview-searchshow-small { 0% { opacity: 0; -webkit-animation-timing-function: ease; animation-timing-function: ease } 100% { opacity: 1 } } @keyframes gn-searchview-searchshow-small { 0% { opacity: 0; -webkit-animation-timing-function: ease; animation-timing-function: ease } 100% { opacity: 1 } } @-webkit-keyframes gn-searchview-close-left-searchshow { 0% { opacity: 0; -webkit-transform: scale3d(1, 0.65, 1); transform: scale3d(1, 0.65, 1); -webkit-animation-timing-function: ease; animation-timing-function: ease } 100% { opacity: 1; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } } @keyframes gn-searchview-close-left-searchshow { 0% { opacity: 0; -webkit-transform: scale3d(1, 0.65, 1); transform: scale3d(1, 0.65, 1); -webkit-animation-timing-function: ease; animation-timing-function: ease } 100% { opacity: 1; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } } @-webkit-keyframes gn-searchview-close-left-searchhide { 0% { opacity: 1; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation-timing-function: ease; animation-timing-function: ease } 100% { opacity: 0; -webkit-transform: scale3d(1, 0.65, 1); transform: scale3d(1, 0.65, 1) } } @keyframes gn-searchview-close-left-searchhide { 0% { opacity: 1; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation-timing-function: ease; animation-timing-function: ease } 100% { opacity: 0; -webkit-transform: scale3d(1, 0.65, 1); transform: scale3d(1, 0.65, 1) } } @-webkit-keyframes gn-searchview-close-right-searchshow { 0% { opacity: 0; -webkit-transform: scale3d(1, 0.65, 1); transform: scale3d(1, 0.65, 1); -webkit-animation-timing-function: ease; animation-timing-function: ease } 100% { opacity: 1; -webkit-transform: rotate(45deg); transform: rotate(45deg) } } @keyframes gn-searchview-close-right-searchshow { 0% { opacity: 0; -webkit-transform: scale3d(1, 0.65, 1); transform: scale3d(1, 0.65, 1); -webkit-animation-timing-function: ease; animation-timing-function: ease } 100% { opacity: 1; -webkit-transform: rotate(45deg); transform: rotate(45deg) } } @-webkit-keyframes gn-searchview-close-right-searchhide { 0% { opacity: 1; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation-timing-function: ease; animation-timing-function: ease } 100% { opacity: 0; -webkit-transform: scale3d(1, 0.65, 1); transform: scale3d(1, 0.65, 1) } } @keyframes gn-searchview-close-right-searchhide { 0% { opacity: 1; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation-timing-function: ease; animation-timing-function: ease } 100% { opacity: 0; -webkit-transform: scale3d(1, 0.65, 1); transform: scale3d(1, 0.65, 1) } } @-webkit-keyframes gn-searchview-close-searchshow-small { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1); animation-timing-function: cubic-bezier(1, 0, 0, 1) } 100% { -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes gn-searchview-close-searchshow-small { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1); animation-timing-function: cubic-bezier(1, 0, 0, 1) } 100% { -webkit-transform: translateY(0); transform: translateY(0) } } @-webkit-keyframes gn-searchview-close-searchhide-small { 0% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1); animation-timing-function: cubic-bezier(1, 0, 0, 1) } 100% { -webkit-transform: translateY(100%); transform: translateY(100%) } } @keyframes gn-searchview-close-searchhide-small { 0% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1); animation-timing-function: cubic-bezier(1, 0, 0, 1) } 100% { -webkit-transform: translateY(100%); transform: translateY(100%) } } @-webkit-keyframes gn-searchview-close-left-searchshow-small { 0% { -webkit-transform: rotate(40deg); transform: rotate(40deg); -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) } 100% { -webkit-transform: rotate(-40deg); transform: rotate(-40deg) } } @keyframes gn-searchview-close-left-searchshow-small { 0% { -webkit-transform: rotate(40deg); transform: rotate(40deg); -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) } 100% { -webkit-transform: rotate(-40deg); transform: rotate(-40deg) } } @-webkit-keyframes gn-searchview-close-left-searchhide-small { 0% { -webkit-transform: rotate(-40deg); transform: rotate(-40deg); -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) } 100% { -webkit-transform: rotate(40deg); transform: rotate(40deg) } } @keyframes gn-searchview-close-left-searchhide-small { 0% { -webkit-transform: rotate(-40deg); transform: rotate(-40deg); -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) } 100% { -webkit-transform: rotate(40deg); transform: rotate(40deg) } } @-webkit-keyframes gn-searchview-close-right-searchshow-small { 0% { -webkit-transform: rotate(-40deg); transform: rotate(-40deg); -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) } 100% { -webkit-transform: rotate(40deg); transform: rotate(40deg) } } @keyframes gn-searchview-close-right-searchshow-small { 0% { -webkit-transform: rotate(-40deg); transform: rotate(-40deg); -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) } 100% { -webkit-transform: rotate(40deg); transform: rotate(40deg) } } @-webkit-keyframes gn-searchview-close-right-searchhide-small { 0% { -webkit-transform: rotate(40deg); transform: rotate(40deg); -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) } 100% { -webkit-transform: rotate(-40deg); transform: rotate(-40deg) } } @keyframes gn-searchview-close-right-searchhide-small { 0% { -webkit-transform: rotate(40deg); transform: rotate(40deg); -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) } 100% { -webkit-transform: rotate(-40deg); transform: rotate(-40deg) } } #globalnav .gn-searchview { display: none } #globalnav.searchshow .gn-searchview, #globalnav.searchopen .gn-searchview, #globalnav.searchhide .gn-searchview { display: block } #globalnav .gn-searchview-content { position: absolute; top: 0; left: 16.66667%; width: 66.66667%; height: 100vh; z-index: 3 } #globalnav.searchhide .gn-searchview-content { -webkit-animation: gn-searchview-searchhide 200ms both; animation: gn-searchview-searchhide 200ms both } @media only screen and (max-width: 767px) { #globalnav .gn-searchview-content { top: 58px; left: 0; bottom: 0; right: 0; width: 100%; height: auto } } @media only screen and (max-width: 767px) and (max-width: 767px) { #globalnav .gn-searchview-content { opacity: 0 } #globalnav.searchshow .gn-searchview-content, #globalnav.searchopen .gn-searchview-content, #globalnav.searchhide .gn-searchview-content { -webkit-animation: none; animation: none } #globalnav.searchopen .gn-searchview-content { opacity: 1 } } #globalnav .gn-searchview-close { opacity: 1; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)'; filter: alpha(opacity=100); position: absolute; z-index: 3; width: 38px; height: 44px; right: 12px; top: 0; color: #fff; cursor: pointer; -webkit-transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-tap-highlight-color: transparent } #globalnav .gn-searchview-close:-moz-focusring { outline: 1px dotted #fff } #globalnav .gn-searchview-close::-moz-focus-inner { border: 0 } #globalnav .gn-searchview-close:hover, #globalnav .gn-searchview-close:active { opacity: 0.65; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)'; filter: alpha(opacity=65) } #globalnav.touch .gn-searchview-close:hover, #globalnav.touch .gn-searchview-close:active { opacity: 1 } #globalnav .gn-searchview-close:focus { outline-offset: -7px } #globalnav .gn-searchview-close:focus:active { outline: none } #globalnav.searchshow .gn-searchview-close { -webkit-transform: translateZ(0); transform: translateZ(0) } #globalnav.searchhide .gn-searchview-close { -webkit-transform: translateZ(0); transform: translateZ(0) } @media only screen and (max-width: 767px) { #globalnav .gn-searchview-close { left: 50%; margin-left: -24px; width: 48px; height: 48px; z-index: 3; overflow: hidden } } #globalnav .gn-searchview-close-wrapper { display: block; width: 100%; height: 100% } #globalnav.ie7 .gn-searchview-close-wrapper, #globalnav.ie8 .gn-searchview-close-wrapper { background-repeat: no-repeat; background-size: 16px 44px; background-image: url("../images/globalnav/globalnav/search/close_large.svg"); background-position: center center; position: relative; z-index: 1 } .ie7#globalnav.no-svg .gn-searchview-close-wrapper, .ie8#globalnav.no-svg .gn-searchview-close-wrapper { background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/globalnav/globalnav/search/close_large.png") } @media only screen and (max-width: 767px) { #globalnav.ie7 .gn-searchview-close-wrapper, #globalnav.ie8 .gn-searchview-close-wrapper { background-size: 18px 48px; background-image: url("../images/globalnav/globalnav/search/close_small.svg") } .ie7#globalnav.no-svg .gn-searchview-close-wrapper, .ie8#globalnav.no-svg .gn-searchview-close-wrapper { background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/globalnav/globalnav/search/close_small.png") } } @media only screen and (max-width: 767px) { #globalnav.searchshow .gn-searchview-close-wrapper { -webkit-animation: gn-searchview-close-searchshow-small 600ms 150ms both; animation: gn-searchview-close-searchshow-small 600ms 150ms both } #globalnav.searchopen .gn-searchview-close-wrapper { -webkit-transform: none; -ms-transform: none; transform: none } #globalnav.searchhide .gn-searchview-close-wrapper { -webkit-animation: gn-searchview-close-searchhide-small 600ms 200ms both; animation: gn-searchview-close-searchhide-small 600ms 200ms both } } #globalnav .gn-searchview-close-left, #globalnav .gn-searchview-close-right { height: 18px; width: 1px; background: #fff; position: absolute; display: block; top: 11px; z-index: 1 } @media only screen and (max-width: 767px) { #globalnav .gn-searchview-close-left, #globalnav .gn-searchview-close-right { top: 20px; height: 1px; width: 12px } } #globalnav.ie7 .gn-searchview-close-left, #globalnav.ie8 .gn-searchview-close-left, #globalnav.ie7 .gn-searchview-close-right, #globalnav.ie8 .gn-searchview-close-right { display: none } #globalnav .gn-searchview-close-left { right: 12px; -webkit-transform: scale3d(1, 0.65, 1); transform: scale3d(1, 0.65, 1); -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100% } #globalnav.searchshow .gn-searchview-close-left { -webkit-animation: gn-searchview-close-left-searchshow 300ms both; animation: gn-searchview-close-left-searchshow 300ms both } #globalnav.searchopen .gn-searchview-close-left { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg) } #globalnav.searchhide .gn-searchview-close-left { -webkit-animation: gn-searchview-close-left-searchhide 300ms both; animation: gn-searchview-close-left-searchhide 300ms both } @media only screen and (max-width: 767px) { #globalnav .gn-searchview-close-left { left: auto; right: 50%; -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg); transform: rotate(40deg); -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100% } #globalnav.searchshow .gn-searchview-close-left { -webkit-animation: gn-searchview-close-left-searchshow-small 600ms 225ms both; animation: gn-searchview-close-left-searchshow-small 600ms 225ms both } #globalnav.searchopen .gn-searchview-close-left { -webkit-transform: rotate(-40deg); -ms-transform: rotate(-40deg); transform: rotate(-40deg) } #globalnav.searchhide .gn-searchview-close-left { -webkit-animation: gn-searchview-close-left-searchhide-small 600ms 150ms both; animation: gn-searchview-close-left-searchhide-small 600ms 150ms both } } #globalnav .gn-searchview-close-right { left: 12px; -webkit-transform: scale3d(1, 0.65, 1); transform: scale3d(1, 0.65, 1); -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100% } #globalnav.searchshow .gn-searchview-close-right { -webkit-animation: gn-searchview-close-right-searchshow 300ms both; animation: gn-searchview-close-right-searchshow 300ms both } #globalnav.searchopen .gn-searchview-close-right { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg) } #globalnav.searchhide .gn-searchview-close-right { -webkit-animation: gn-searchview-close-right-searchhide 300ms both; animation: gn-searchview-close-right-searchhide 300ms both } @media only screen and (max-width: 767px) { #globalnav .gn-searchview-close-right { left: 50%; -webkit-transform: rotate(-40deg); -ms-transform: rotate(-40deg); transform: rotate(-40deg); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0 } #globalnav.searchshow .gn-searchview-close-right { -webkit-animation: gn-searchview-close-right-searchshow-small 600ms 225ms both; animation: gn-searchview-close-right-searchshow-small 600ms 225ms both } #globalnav.searchopen .gn-searchview-close-right { -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg); transform: rotate(40deg) } #globalnav.searchhide .gn-searchview-close-right { -webkit-animation: gn-searchview-close-right-searchhide-small 600ms 150ms both; animation: gn-searchview-close-right-searchhide-small 600ms 150ms both } } @-webkit-keyframes gn-searchform-slide { 0% { -webkit-transform: translate3d(100px, 0, 0); transform: translate3d(100px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.11393, 0.8644, 0.14684, 1); animation-timing-function: cubic-bezier(0.11393, 0.8644, 0.14684, 1) } 100% { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes gn-searchform-slide { 0% { -webkit-transform: translate3d(100px, 0, 0); transform: translate3d(100px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.11393, 0.8644, 0.14684, 1); animation-timing-function: cubic-bezier(0.11393, 0.8644, 0.14684, 1) } 100% { -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes gn-searchform-fade { 0% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.67, 0, 0.33, 1); animation-timing-function: cubic-bezier(0.67, 0, 0.33, 1) } 100% { opacity: 1 } } @keyframes gn-searchform-fade { 0% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.67, 0, 0.33, 1); animation-timing-function: cubic-bezier(0.67, 0, 0.33, 1) } 100% { opacity: 1 } } @-webkit-keyframes gn-searchinput-fade { 0% { opacity: 0 } 100% { opacity: 1 } } @keyframes gn-searchinput-fade { 0% { opacity: 0 } 100% { opacity: 1 } } #globalnav input, #globalnav button { border: none; background-color: transparent } #globalnav .gn-searchform { height: 44px; line-height: 44px } @media only screen and (max-width: 767px) { #globalnav .gn-searchform { height: 48px; line-height: 48px; padding: 0 48px } } #globalnav.searchshow .gn-searchform { -webkit-animation: gn-searchform-fade 400ms 400ms both; animation: gn-searchform-fade 400ms 400ms both } @media only screen and (max-width: 767px) { #globalnav.searchshow .gn-searchform { -webkit-animation: none; animation: none } } #globalnav .gn-searchform-wrapper { padding-left: 40px; position: relative; z-index: 2 } #globalnav.ie7 .gn-searchform-wrapper, #globalnav.ie8 .gn-searchform-wrapper { height: 44px } #globalnav.searchshow .gn-searchform-wrapper { -webkit-animation: gn-searchform-slide 1s 400ms both; animation: gn-searchform-slide 1s 400ms both } @media only screen and (max-width: 767px) { #globalnav.searchshow .gn-searchform-wrapper { -webkit-animation: none; animation: none } } @media only screen and (max-width: 767px) { #globalnav .gn-searchform-wrapper { background: #000; border-bottom: 1px solid #ccc; right: 200%; padding: 0 28px; height: 47px } #globalnav.searchopen .gn-searchform-wrapper { right: auto } } #globalnav .gn-searchform-input { font-size: 16px; line-height: 1.375; font-weight: 400; letter-spacing: normal; color: #fff; outline: none; width: 100%; height: 1.375em } @media only screen and (max-width: 767px) { #globalnav .gn-searchform-input { font-size: 20px; line-height: 1.2; font-weight: 200; letter-spacing: normal } } .touch#globalnav.searchshow .gn-searchform-input { -webkit-transform: translateY(-200px); -ms-transform: translateY(-200px); transform: translateY(-200px) } .touch#globalnav.searchopen .gn-searchform-input { -webkit-animation: gn-searchinput-fade 200ms both; animation: gn-searchinput-fade 200ms both } @media only screen and (max-width: 767px) { #globalnav .gn-searchform-input { height: 1.2em } .touch#globalnav.searchshow .gn-searchform-input { -webkit-transform: none; -ms-transform: none; transform: none } .touch#globalnav.searchopen .gn-searchform-input { -webkit-animation: none; animation: none } } #globalnav .gn-searchform-input::-webkit-input-placeholder { color: #999; opacity: 1 } #globalnav .gn-searchform-input::-moz-placeholder { color: #999; opacity: 1 } #globalnav .gn-searchform-input:-ms-input-placeholder { color: #999; opacity: 1 } #globalnav .gn-searchform-input::placeholder { color: #999; opacity: 1 } @media only screen and (max-width: 767px) { #globalnav .gn-searchform-input::-webkit-input-placeholder { color: #666 } #globalnav .gn-searchform-input::-moz-placeholder { color: #666 } #globalnav .gn-searchform-input:-ms-input-placeholder { color: #666 } #globalnav .gn-searchform-input::placeholder { color: #666 } } #globalnav .gn-searchform-input::-ms-clear { display: none; width: 0; height: 0 } html.gn-segmentbar-visible { margin-top: 40px !important } @media only screen and (max-width: 767px) { html.gn-segmentbar-visible { margin-top: 44px !important } } html.gn-segmentbar-visible body { border-top: 1px solid transparent; margin-top: -1px; position: relative } #gn-segmentbar { background: #444; display: none; font-size: 12px; line-height: 1; position: absolute; top: -40px; left: 0; min-width: 1024px; width: 100%; height: 40px; z-index: 9998 } @media only screen and (max-width: 1023px) { #gn-segmentbar { min-width: 320px } } @media only screen and (max-width: 767px) { #gn-segmentbar { top: -44px; height: 44px } } html.gn-segmentbar-visible #gn-segmentbar { display: block } #gn-segmentbar .gn-segmentbar-content { list-style: none; margin: 0 auto; max-width: 980px; padding: 0 22px; white-space: nowrap } @media only screen and (max-width: 767px) { #gn-segmentbar .gn-segmentbar-content { padding: 0 16px } } #gn-segmentbar .gn-segmentbar-item { border-left: 1px solid #666; float: left; height: 12px; margin-top: 14px } @media only screen and (max-width: 767px) { #gn-segmentbar .gn-segmentbar-item { margin-top: 16px } } #gn-segmentbar .gn-segmentbar-item:first-child { border-left: none; margin-left: -12px; max-width: 60% } #gn-segmentbar .gn-segmentbar-link { color: #fff; cursor: pointer; display: block; line-height: 40px; margin-top: -14px; outline-offset: -12px; overflow: hidden; padding: 0 12px; text-decoration: none; text-overflow: ellipsis } @media only screen and (max-width: 767px) { #gn-segmentbar .gn-segmentbar-link { line-height: 44px; margin-top: -16px } } #gn-segmentbar .gn-segmentbar-link:hover { color: #5cc3f6; text-decoration: none } html.gn-noscroll { margin-top: 0 !important } html.gn-noscroll, html.gn-noscroll body { overflow: hidden !important; height: 100% !important } html.gn-noscroll-long { overflow-y: scroll !important } @media only screen and (max-width: 767px) { .dropdown { position: relative; margin: 0; /* width: 100%;*/ background: #fff; overflow: hidden; } .dropdown:after { display: none; } .dropdown .dd-l { padding: 0; margin: 0; width: auto; } .dropdown .dd-r { display: none; } .dropdown .dd-l a { float: none; display: block; width: 100%; margin: 0; } #globalnav .gn-list:nth-child(2) { margin: 0; } }