Chia sẻ code menu của trang web apple.com

Nếu bạn đang tìm kiếm thanh menu có thiết kế đẹp chuyên nghiệp reponsive tương tự như trang web apple.com thì đây là bài viết dành cho bạn. Code này mình sao chép hầu như nguyên mẫu nhưng có lược bỏ một vài chỗ và sử dụng jquery thay thế.

Một vài hình ảnh

Giao diện menu kích thước màn hình ipad trở lên

Giao diện menu trên mobile

Thanh search

Giao diện khi mở menu trên moblie

Dưới đây là code của thanh menu

1. Code HTML

Copy

<input class='ac-gn-menustate' id='ac-gn-menustate' type='checkbox'/>

<nav class='js touch' id='ac-globalnav' role='navigation'>

  <div class='ac-gn-content'>

  <ul class='ac-gn-header'>

    <li class='ac-gn-item ac-gn-menuicon'>

      <label aria-hidden='true' class='ac-gn-menuicon-label' for='ac-gn-menustate'>

      <span class='ac-gn-menuicon-bread ac-gn-menuicon-bread-top'>

      <span class='ac-gn-menuicon-bread-crust ac-gn-menuicon-bread-crust-top'/>

      </span>

      <span class='ac-gn-menuicon-bread ac-gn-menuicon-bread-bottom'>

      <span class='ac-gn-menuicon-bread-crust ac-gn-menuicon-bread-crust-bottom'/>

      </span>

      </label>

      <a class='ac-gn-menuanchor ac-gn-menuanchor-open' href='javascript:void(0)' id='ac-gn-menuanchor-open' role='button'>

      <span class='ac-gn-menuanchor-label'>Open Menu</span>

      </a>

      <a class='ac-gn-menuanchor ac-gn-menuanchor-close' href='javascript:void(0)' id='ac-gn-menuanchor-close' role='button'>

      <span class='ac-gn-menuanchor-label'>Close Menu</span>

      </a>

    </li>

    <li class='ac-gn-item ac-gn-apple'>

      <a class='ac-gn-link ac-gn-link-apple' href='/' id='ac-gn-firstfocus-small'>

      <span class='ac-gn-link-text'>Apple</span>

      </a>

    </li>

    <li class='ac-gn-item ac-gn-bag ac-gn-bag-small' id='ac-gn-bag-small'>

      <a class='ac-gn-link ac-gn-link-bag' href='javascript:void(0)'>

      <span class='ac-gn-link-text'>Shopping Bag</span>

      <span class='ac-gn-bag-badge'/>

      </a>

      <span class='ac-gn-bagview-caret ac-gn-bagview-caret-large'/>

    </li>

  </ul>

  <div class='ac-gn-search-placeholder-container' role='search'>

    <div class='ac-gn-search ac-gn-search-small'>

      <a href='javascript:void(0)' id='ac-gn-link-search-small'>

        <div class='ac-gn-search-placeholder-bar'>

          <div class='ac-gn-search-placeholder-input'>

            <div class='ac-gn-search-placeholder-input-text'>

              <div class='ac-gn-link-search ac-gn-search-placeholder-input-icon'/>

                <span class='ac-gn-search-placeholder'>

                  <data:messages.search/>

                </span>

              </div>

            </div>

            <div class='ac-gn-searchview-close ac-gn-searchview-close-small ac-gn-search-placeholder-searchview-close'>

              <span class='ac-gn-searchview-close-cancel'>Cancel</span>

            </div>

          </div>

      </a>

      </div>

    </div>

    <ul class='ac-gn-list'>

      <li class='ac-gn-item ac-gn-apple'>

        <a class='ac-gn-link ac-gn-link-apple' href='/' id='ac-gn-firstfocus'/>

      </li>

      <li class='ac-gn-item ac-gn-item-menu'>

      <a class='ac-gn-link' href='#'>Mac</a>

      </li>

      <li class='ac-gn-item ac-gn-item-menu'>

        <a class='ac-gn-link' href='#'>iPad</a>

      </li>

      <li class='ac-gn-item ac-gn-item-menu'>

        <a class='ac-gn-link' href='#'>iPhone</a>

      </li>

      <li class='ac-gn-item ac-gn-item-menu'>

        <a class='ac-gn-link' href='#'>Watch</a>

      </li>

      <li class='ac-gn-item ac-gn-item-menu'>

        <a class='ac-gn-link' href='#'>TV</a>

      </li>

      <li class='ac-gn-item ac-gn-item-menu'>

        <a class='ac-gn-link' href='#'>Music</a>

      </li>

      <li class='ac-gn-item ac-gn-item-menu'>

        <a class='ac-gn-link' href='#'>Support</a>

      </li>

      <li class='ac-gn-item ac-gn-item-menu ac-gn-search'>

        <a class='ac-gn-link ac-gn-link-search' href='javascript:void(0)' id='ac-gn-link-search'/>

      </li>

      <li class='ac-gn-item ac-gn-bag' id='ac-gn-bag'>

      <a class='ac-gn-link ac-gn-link-bag' href='javascript:void(0)'>

      <span class='ac-gn-bag-badge'/>

      </a>

      <span class='ac-gn-bagview-caret ac-gn-bagview-caret-large'/>

      </li>

    </ul>

    <aside class='ac-gn-searchview' id='ac-gn-searchview' role='search'>

      <div class='ac-gn-searchview-content'>

        <div class='ac-gn-searchview-bar'>

          <div class='ac-gn-searchview-bar-wrapper'>

            <form class='ac-gn-searchform' action='data:blog.searchUrl.canonical' id='ac-gn-searchform' method='get'>

              <div class='ac-gn-searchform-wrapper'>

                <input aria-autocomplete='list' aria-expanded='true' aria-label='Search vietblogdao.com' autocapitalize='off' autocomplete='off' autocorrect='off' class='ac-gn-searchform-input' expr:placeholder='data:messages.search' id='ac-gn-searchform-input' name='q' role='combobox' spellcheck='false' type='text'/>

                <button aria-label='Submit Search' class='ac-gn-searchform-submit' id='ac-gn-searchform-submit' type='submit'/>

                <button aria-label='Clear Search' class='ac-gn-searchform-reset' id='ac-gn-searchform-reset' type='reset'>

                <span class='ac-gn-searchform-reset-background'/>

                </button>

              </div>

            </form>

            <button aria-label='Cancel Search' class='ac-gn-searchview-close ac-gn-searchview-close-small' id='ac-gn-searchview-close-small'>

            <span class='ac-gn-searchview-close-cancel'>Cancel</span>

            </button>

          </div>

        </div>

        <aside class='ac-gn-searchresults' id='ac-gn-searchresults'>

          <section class='ac-gn-searchresults-section ac-gn-searchresults-section-defaultlinks'>

            <div class='ac-gn-searchresults-section-wrapper'>

              <h3 class='ac-gn-searchresults-header ac-gn-searchresults-animated'>Quick Links</h3>

              <ul class='ac-gn-searchresults-list' id='defaultlinks'>

                <li class='ac-gn-searchresults-item ac-gn-searchresults-animated'>

                  <a class='ac-gn-searchresults-link ac-gn-searchresults-link-defaultlinks' href='#'>Find a Store</a>

                </li>

                <li class='ac-gn-searchresults-item ac-gn-searchresults-animated'>

                  <a class='ac-gn-searchresults-link ac-gn-searchresults-link-defaultlinks' href='#'>Today at Apple</a>

                </li>

                <li class='ac-gn-searchresults-item ac-gn-searchresults-animated'>

                  <a class='ac-gn-searchresults-link ac-gn-searchresults-link-defaultlinks' href='#' role='option'>Accessories</a>

                </li>

                <li class='ac-gn-searchresults-item ac-gn-searchresults-animated'>

                  <a class='ac-gn-searchresults-link ac-gn-searchresults-link-defaultlinks' href='#'>AirPods</a>

                </li>

                <li class='ac-gn-searchresults-item ac-gn-searchresults-animated' role='presentation'>

                  <a class='ac-gn-searchresults-link ac-gn-searchresults-link-defaultlinks' href='#' role='option'>iPod</a>

                </li>

              </ul>

              <span aria-live='polite' class='ac-gn-searchresults-count' role='status'>5 Quick Links</span>

            </div>

          </section>

        </aside>

      </div>

      <button aria-label='Cancel Search' class='ac-gn-searchview-close' id='ac-gn-searchview-close'>

      <span class='ac-gn-searchview-close-wrapper'>

      <span class='ac-gn-searchview-close-left'/>

      <span class='ac-gn-searchview-close-right'/>

      </span>

      </button>

    </aside>

    <aside class='ac-gn-bagview'>

      <div class='ac-gn-bagview-scrim'>

        <span class='ac-gn-bagview-caret ac-gn-bagview-caret-small'/>

      </div>

      <div class='ac-gn-bagview-content' id='ac-gn-bagview-content'>

        <p class='ac-gn-bagview-message ac-gn-bagview-message-empty'>Your Bag is empty.</p>

        <nav class='ac-gn-bagview-nav'>

          <ul class='ac-gn-bagview-nav-list ac-gn-bagview-nav-nobtn'>

            <li class='ac-gn-bagview-nav-item ac-gn-bagview-nav-item-bag'>

              <a class='ac-gn-bagview-nav-link ac-gn-bagview-nav-link-bag' href='#'>Bag</a>

            </li>

            <li class='ac-gn-bagview-nav-item ac-gn-bagview-nav-item-favorites'>

              <a class='ac-gn-bagview-nav-link ac-gn-bagview-nav-link-favorites' href='#'>Favorites</a>

            </li>

            <li class='ac-gn-bagview-nav-item ac-gn-bagview-nav-item-orders'>

              <a class='ac-gn-bagview-nav-link ac-gn-bagview-nav-link-orders' href='#'>Orders</a>

            </li>

            <li class='ac-gn-bagview-nav-item ac-gn-bagview-nav-item-account'>

              <a class='ac-gn-bagview-nav-link ac-gn-bagview-nav-link-account' href='#'>Account

              </a>

            </li>

            <li class='ac-gn-bagview-nav-item ac-gn-bagview-nav-item-signIn'>

              <a class='ac-gn-bagview-nav-link ac-gn-bagview-nav-link-signIn' href='#'>Sign in</a>

            </li>

          </ul>

        </nav>

      </div>

    </aside>

  </div>

</nav>

2. Code CSS

Copy

@-webkit-keyframes ac-gn-header-slideup-searchshow{0%{-webkit-transform:none;transform:none}100%{-webkit-transform:translateY(-32px);transform:translateY(-32px)}}

@keyframes ac-gn-header-slideup-searchshow{0%{-webkit-transform:none;transform:none}100%{-webkit-transform:translateY(-32px);transform:translateY(-32px)}}

#ac-globalnav{font-weight:normal;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}

#ac-globalnav,#ac-globalnav:before,#ac-globalnav:after,#ac-globalnav *,#ac-globalnav *:before,#ac-globalnav *:after{-webkit-box-sizing:content-box;box-sizing:content-box;margin:0;padding:0;pointer-events:auto;letter-spacing:normal}

#ac-globalnav *,#ac-globalnav *:before,#ac-globalnav *:after{font-size:1em;font-family:inherit;font-weight:inherit;line-height:inherit;text-align:inherit}

#ac-globalnav article,#ac-globalnav aside,#ac-globalnav details,#ac-globalnav figcaption,#ac-globalnav figure,#ac-globalnav footer,#ac-globalnav header,#ac-globalnav nav,#ac-globalnav section{display:block}

#ac-globalnav img{border:0;vertical-align:middle}

#ac-globalnav ul{list-style:none}

#ac-globalnav,#ac-globalnav input,#ac-globalnav textarea,#ac-globalnav select,#ac-globalnav button{font-synthesis:none;-moz-font-feature-settings:'kern';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;direction:ltr;text-align:left}

#ac-globalnav,#ac-globalnav select,#ac-globalnav button{font-family:"SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif}

#ac-globalnav input,#ac-globalnav textarea{font-family:"SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif}

#ac-globalnav:focus[data-focus-method="mouse"]:not(input):not(textarea):not(select),#ac-globalnav:focus[data-focus-method="touch"]:not(input):not(textarea):not(select),#ac-globalnav *:focus[data-focus-method="mouse"]:not(input):not(textarea):not(select),#ac-globalnav *:focus[data-focus-method="touch"]:not(input):not(textarea):not(select){outline:none}

#ac-globalnav{position:absolute;top:0;right:0;left:0;z-index:9999;display:block;margin:0;width:100%;min-width:1024px;height:48px;max-height:44px;background:rgba(45,45,45,0.98);font-size:17px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}

@supports ((-webkit-backdrop-filter:saturate(180%) blur(20px)) or (backdrop-filter:saturate(180%) blur(20px))){#ac-globalnav{background:rgba(0,0,0,0.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}

.ac-theme-dark #ac-globalnav,#ac-globalnav.ac-globalnav-dark{background:rgba(40,40,40,0.8)}

#ac-globalnav.blocktransitions,#ac-globalnav.blocktransitions:before,#ac-globalnav.blocktransitions:after,#ac-globalnav.blocktransitions *,#ac-globalnav.blocktransitions *:before,#ac-globalnav.blocktransitions *:after{-webkit-animation:none!important;animation:none!important;-webkit-transition:none!important;transition:none!important}

@media only screen and (max-width:1044px){#ac-globalnav{min-width:320px}}

@media only screen and (max-width:767px){#ac-globalnav{overflow-y:hidden;max-height:none;-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-transition:background .44s .2s cubic-bezier(0.52,0.16,0.24,1),height .56s cubic-bezier(0.52,0.16,0.24,1);transition:background .44s .2s cubic-bezier(0.52,0.16,0.24,1),height .56s cubic-bezier(0.52,0.16,0.24,1)}#ac-globalnav.with-bagview{overflow-y:visible}#ac-gn-menustate:checked ~ #ac-globalnav,#ac-gn-menustate:target ~ #ac-globalnav{height:100%;background:#000;-webkit-transition:background .36s cubic-bezier(0.32,0.08,0.24,1),height .56s cubic-bezier(0.52,0.16,0.24,1);transition:background .36s cubic-bezier(0.32,0.08,0.24,1),height .56s cubic-bezier(0.52,0.16,0.24,1)}#ac-globalnav.searchshow,#ac-globalnav.searchopen,#ac-globalnav.searchhide{position:fixed}}

.ac-gn-blur{display:none}

@media only screen and (max-width:767px){.ac-gn-blur{display:block;position:absolute;top:0;right:0;left:0;z-index:9998;margin:0;width:100%;height:48px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@supports ((-webkit-backdrop-filter:saturate(180%) blur(20px)) or (backdrop-filter:saturate(180%) blur(20px))){.ac-gn-blur{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}

}

#ac-gn-menustate{display:none}

#ac-gn-placeholder{height:44px}

@media only screen and (max-width:767px){#ac-gn-placeholder{height:48px}}

.ac-nav-overlap #ac-gn-placeholder{display:none}

@-webkit-keyframes ac-gn-curtain-show{0%{opacity:0;-webkit-animation-timing-function:ease;animation-timing-function:ease}100%{opacity:1}}

@keyframes ac-gn-curtain-show{0%{opacity:0;-webkit-animation-timing-function:ease;animation-timing-function:ease}100%{opacity:1}}

#ac-gn-curtain{background:rgba(0,0,0,0.4);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){#ac-globalnav.with-bagview ~ #ac-gn-curtain{display:block;-webkit-animation:ac-gn-curtain-show .2s both;animation:ac-gn-curtain-show .2s both}}

#ac-globalnav.searchshow ~ #ac-gn-curtain,#ac-globalnav.searchopen ~ #ac-gn-curtain,#ac-globalnav.searchhide ~ #ac-gn-curtain{display:block}

@media only screen and (max-width:767px){#ac-globalnav.searchshow ~ #ac-gn-curtain,#ac-globalnav.searchopen ~ #ac-gn-curtain,#ac-globalnav.searchhide ~ #ac-gn-curtain{display:none}}

#ac-globalnav.searchshow ~ #ac-gn-curtain{-webkit-animation:ac-gn-curtain-show .2s both;animation:ac-gn-curtain-show .2s both}

#ac-globalnav.searchhide ~ #ac-gn-curtain{animation:ac-gn-curtain-show .2s reverse both}

#ac-globalnav .ac-gn-content{margin:0 auto;max-width:980px;padding:0 22px;position:relative;z-index:2;padding-left:calc(22px + constant(safe-area-inset-left));padding-right:calc(22px + constant(safe-area-inset-right))}

@supports (padding:calc(max(0px))){#ac-globalnav .ac-gn-content{padding-left:calc(max(22px,env(safe-area-inset-left)));padding-right:calc(max(22px,env(safe-area-inset-right)))}}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-content{padding:0;position:absolute;top:0;width:100%;height:100%}}

#ac-globalnav .ac-gn-header{display:none;position:absolute;z-index:5;top:0;left:0;width:100%;height:48px;overflow:hidden}

#ac-globalnav .ac-gn-header .ac-gn-item,#ac-globalnav .ac-gn-header .ac-gn-link{height:48px}

#ac-globalnav .ac-gn-header .ac-gn-link{line-height:2.82353em}

#ac-globalnav .ac-gn-header .ac-gn-apple{position:absolute;width:48px;top:0;left:50%;margin-left:-24px;text-align:center;z-index:1}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-header{display:block}#ac-globalnav.searchshow .ac-gn-header{-webkit-animation:ac-gn-header-slideup-searchshow .36s cubic-bezier(0.32,0.08,0.24,1) both;animation:ac-gn-header-slideup-searchshow .36s cubic-bezier(0.32,0.08,0.24,1) both}#ac-globalnav.searchopen .ac-gn-header{display:none}#ac-globalnav.searchhide .ac-gn-header{animation:ac-gn-header-slideup-searchshow .36s cubic-bezier(0.8,0,0.68,0.92) reverse both}#ac-globalnav .ac-gn-header .ac-gn-apple{display:block}#ac-globalnav .ac-gn-header .ac-gn-bag-small{display:block;visibility:visible;-webkit-transition:opacity 0.28s 0.36s cubic-bezier(0.52,0.16,0.24,1),-webkit-transform 0.44s 0.2s cubic-bezier(0.04,0.04,0.12,0.96);transition:opacity 0.28s 0.36s cubic-bezier(0.52,0.16,0.24,1),-webkit-transform 0.44s 0.2s cubic-bezier(0.04,0.04,0.12,0.96);transition:transform 0.44s 0.2s cubic-bezier(0.04,0.04,0.12,0.96),opacity 0.28s 0.36s cubic-bezier(0.52,0.16,0.24,1);transition:transform 0.44s 0.2s cubic-bezier(0.04,0.04,0.12,0.96),opacity 0.28s 0.36s cubic-bezier(0.52,0.16,0.24,1),-webkit-transform 0.44s 0.2s cubic-bezier(0.04,0.04,0.12,0.96)}#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-header .ac-gn-bag-small,#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-header .ac-gn-bag-small{-webkit-transform:translateY(8px);transform:translateY(8px);opacity:0;visibility:hidden;-webkit-transition:opacity 0.3s cubic-bezier(0.32,0.08,0.24,1),visibility 0s linear .64s,-webkit-transform 0.36s cubic-bezier(0.54,0.12,0.88,0.64);transition:opacity 0.3s cubic-bezier(0.32,0.08,0.24,1),visibility 0s linear .64s,-webkit-transform 0.36s cubic-bezier(0.54,0.12,0.88,0.64);transition:transform 0.36s cubic-bezier(0.54,0.12,0.88,0.64),opacity 0.3s cubic-bezier(0.32,0.08,0.24,1),visibility 0s linear .64s;transition:transform 0.36s cubic-bezier(0.54,0.12,0.88,0.64),opacity 0.3s cubic-bezier(0.32,0.08,0.24,1),visibility 0s linear .64s,-webkit-transform 0.36s cubic-bezier(0.54,0.12,0.88,0.64)}}

@-webkit-keyframes ac-gn-list-searchshow{0%{-webkit-transform:none;transform:none;opacity:1}100%{-webkit-transform:translateY(44px);transform:translateY(44px);opacity:0}}

@keyframes ac-gn-list-searchshow{0%{-webkit-transform:none;transform:none;opacity:1}100%{-webkit-transform:translateY(44px);transform:translateY(44px);opacity:0}}

#ac-globalnav .ac-gn-header+.ac-gn-list{top:48px}

#ac-globalnav .ac-gn-list{cursor:default;margin:0 -10px;width:auto;height:44px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-list{display:block;position:absolute;z-index:1;top:3.52941em;right:0;bottom:0;left:0;max-width:664px;margin:0 auto;padding:45px 40px 8px;height:auto;-webkit-box-sizing:border-box;box-sizing:border-box;overflow-y:auto;-webkit-overflow-scrolling:touch;visibility:hidden;-webkit-transition:visibility 0s linear 1s;transition:visibility 0s linear 1s}#ac-globalnav.menu-opening .ac-gn-list,#ac-globalnav.menu-closing .ac-gn-list{overflow:hidden}#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-list,#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-list{visibility:visible;-webkit-transition-delay:0s;transition-delay:0s}#ac-gn-menustate:checked ~ #ac-globalnav.searchshow .ac-gn-list,#ac-gn-menustate:target ~ #ac-globalnav.searchshow .ac-gn-list{-webkit-animation:ac-gn-list-searchshow .36s cubic-bezier(0.32,0.08,0.24,1) both;animation:ac-gn-list-searchshow .36s cubic-bezier(0.32,0.08,0.24,1) both}#ac-gn-menustate:checked ~ #ac-globalnav.searchopen .ac-gn-list,#ac-gn-menustate:target ~ #ac-globalnav.searchopen .ac-gn-list{visibility:hidden;-webkit-transform:translateY(44px);transform:translateY(44px);opacity:0}#ac-gn-menustate:checked ~ #ac-globalnav.searchhide .ac-gn-list,#ac-gn-menustate:target ~ #ac-globalnav.searchhide .ac-gn-list{animation:ac-gn-list-searchshow .36s cubic-bezier(0.8,0,0.68,0.92) reverse both}}

@-webkit-keyframes ac-gn-item-searchshow{0%{opacity:1;-webkit-transform:none;transform:none;-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 ac-gn-item-searchshow{0%{opacity:1;-webkit-transform:none;transform:none;-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 ac-gn-item-searchhide{0%{opacity:0;-webkit-transform:scale(0.7);transform:scale(0.7)}60%{opacity:1}100%{opacity:1;-webkit-transform:none;transform:none;-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 ac-gn-item-searchhide{0%{opacity:0;-webkit-transform:scale(0.7);transform:scale(0.7)}60%{opacity:1}100%{opacity:1;-webkit-transform:none;transform:none;-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 ac-gn-search-placeholder-searchshow{0%{opacity:1;-webkit-animation-timing-function:ease;animation-timing-function:ease}100%{opacity:0.4}}

@keyframes ac-gn-search-placeholder-searchshow{0%{opacity:1;-webkit-animation-timing-function:ease;animation-timing-function:ease}100%{opacity:0.4}}

@-webkit-keyframes ac-gn-bag-searchshow{0%{opacity:1;-webkit-animation-timing-function:ease;animation-timing-function:ease}100%{opacity:0}}

@keyframes ac-gn-bag-searchshow{0%{opacity:1;-webkit-animation-timing-function:ease;animation-timing-function:ease}100%{opacity:0}}

#ac-globalnav .ac-gn-item{-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;position:relative;height:44px;z-index:1;vertical-align:top}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-item{width:100%;height:44px}}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-apple{display:none}}

#ac-globalnav.searchshow .ac-gn-bag{-webkit-animation:ac-gn-bag-searchshow .3s both;animation:ac-gn-bag-searchshow .3s both;-webkit-transform:translateZ(0);transform:translateZ(0)}

#ac-globalnav.searchopen .ac-gn-bag{visibility:hidden}

#ac-globalnav.searchhide .ac-gn-bag{animation:ac-gn-bag-searchshow .3s reverse both;-webkit-transform:translateZ(0);transform:translateZ(0)}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-bag{right:0;display:none;position:absolute;top:0;width:auto;z-index:1}}

#ac-globalnav.searchshow .ac-gn-item-menu,#ac-globalnav.searchopen .ac-gn-item-menu,#ac-globalnav.searchhide .ac-gn-item-menu{pointer-events:none}

#ac-globalnav.searchshow .ac-gn-item-menu{-webkit-animation:ac-gn-item-searchshow .4s both;animation:ac-gn-item-searchshow .4s both}

#ac-globalnav.searchshow .ac-gn-item-menu:nth-child(2){-webkit-animation-delay:.28s;animation-delay:.28s}

#ac-globalnav.searchshow .ac-gn-item-menu:nth-child(3){-webkit-animation-delay:.245s;animation-delay:.245s}

#ac-globalnav.searchshow .ac-gn-item-menu:nth-child(4){-webkit-animation-delay:.21s;animation-delay:.21s}

#ac-globalnav.searchshow .ac-gn-item-menu:nth-child(5){-webkit-animation-delay:.175s;animation-delay:.175s}

#ac-globalnav.searchshow .ac-gn-item-menu:nth-child(6){-webkit-animation-delay:.14s;animation-delay:.14s}

#ac-globalnav.searchshow .ac-gn-item-menu:nth-child(7){-webkit-animation-delay:.105s;animation-delay:.105s}

#ac-globalnav.searchshow .ac-gn-item-menu:nth-child(8){-webkit-animation-delay:.07s;animation-delay:.07s}

#ac-globalnav.searchshow .ac-gn-item-menu:nth-child(9){-webkit-animation-delay:.035s;animation-delay:.035s}

#ac-globalnav.searchopen .ac-gn-item-menu{visibility:hidden}

#ac-globalnav.searchhide .ac-gn-item-menu{-webkit-animation:ac-gn-item-searchhide .4s both;animation:ac-gn-item-searchhide .4s both}

#ac-globalnav.searchhide .ac-gn-item-menu:nth-child(2){-webkit-animation-delay:0s;animation-delay:0s}

#ac-globalnav.searchhide .ac-gn-item-menu:nth-child(3){-webkit-animation-delay:.035s;animation-delay:.035s}

#ac-globalnav.searchhide .ac-gn-item-menu:nth-child(4){-webkit-animation-delay:.07s;animation-delay:.07s}

#ac-globalnav.searchhide .ac-gn-item-menu:nth-child(5){-webkit-animation-delay:.105s;animation-delay:.105s}

#ac-globalnav.searchhide .ac-gn-item-menu:nth-child(6){-webkit-animation-delay:.14s;animation-delay:.14s}

#ac-globalnav.searchhide .ac-gn-item-menu:nth-child(7){-webkit-animation-delay:.175s;animation-delay:.175s}

#ac-globalnav.searchhide .ac-gn-item-menu:nth-child(8){-webkit-animation-delay:.21s;animation-delay:.21s}

#ac-globalnav.searchhide .ac-gn-item-menu:nth-child(9){-webkit-animation-delay:.245s;animation-delay:.245s}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-item-menu{opacity:0;pointer-events:none}#ac-globalnav .ac-gn-item-menu:nth-child(2){-webkit-transform:translateY(-44px);transform:translateY(-44px);-webkit-transition:opacity .3345s cubic-bezier(0.52,0.16,0.52,0.84) .15s,-webkit-transform .4669s cubic-bezier(0.52,0.16,0.52,0.84) .108s;transition:opacity .3345s cubic-bezier(0.52,0.16,0.52,0.84) .15s,-webkit-transform .4669s cubic-bezier(0.52,0.16,0.52,0.84) .108s;transition:opacity .3345s cubic-bezier(0.52,0.16,0.52,0.84) .15s,transform .4669s cubic-bezier(0.52,0.16,0.52,0.84) .108s;transition:opacity .3345s cubic-bezier(0.52,0.16,0.52,0.84) .15s,transform .4669s cubic-bezier(0.52,0.16,0.52,0.84) .108s,-webkit-transform .4669s cubic-bezier(0.52,0.16,0.52,0.84) .108s;padding-top:1px}#ac-globalnav .ac-gn-item-menu:nth-child(3){-webkit-transform:translateY(-40px);transform:translateY(-40px);-webkit-transition:opacity .29294s cubic-bezier(0.52,0.16,0.52,0.84) .13s,-webkit-transform .45043s cubic-bezier(0.52,0.16,0.52,0.84) .095s;transition:opacity .29294s cubic-bezier(0.52,0.16,0.52,0.84) .13s,-webkit-transform .45043s cubic-bezier(0.52,0.16,0.52,0.84) .095s;transition:opacity .29294s cubic-bezier(0.52,0.16,0.52,0.84) .13s,transform .45043s cubic-bezier(0.52,0.16,0.52,0.84) .095s;transition:opacity .29294s cubic-bezier(0.52,0.16,0.52,0.84) .13s,transform .45043s cubic-bezier(0.52,0.16,0.52,0.84) .095s,-webkit-transform .45043s cubic-bezier(0.52,0.16,0.52,0.84) .095s}#ac-globalnav .ac-gn-item-menu:nth-child(3)::before{content:'';display:block;width:100%;height:1px;background:#282828}#ac-globalnav .ac-gn-item-menu:nth-child(4){-webkit-transform:translateY(-36px);transform:translateY(-36px);-webkit-transition:opacity .26098s cubic-bezier(0.52,0.16,0.52,0.84) .11s,-webkit-transform .43756s cubic-bezier(0.52,0.16,0.52,0.84) .082s;transition:opacity .26098s cubic-bezier(0.52,0.16,0.52,0.84) .11s,-webkit-transform .43756s cubic-bezier(0.52,0.16,0.52,0.84) .082s;transition:opacity .26098s cubic-bezier(0.52,0.16,0.52,0.84) .11s,transform .43756s cubic-bezier(0.52,0.16,0.52,0.84) .082s;transition:opacity .26098s cubic-bezier(0.52,0.16,0.52,0.84) .11s,transform .43756s cubic-bezier(0.52,0.16,0.52,0.84) .082s,-webkit-transform .43756s cubic-bezier(0.52,0.16,0.52,0.84) .082s}#ac-globalnav .ac-gn-item-menu:nth-child(4)::before{content:'';display:block;width:100%;height:1px;background:#282828}#ac-globalnav .ac-gn-item-menu:nth-child(5){-webkit-transform:translateY(-32px);transform:translateY(-32px);-webkit-transition:opacity .2386s cubic-bezier(0.52,0.16,0.52,0.84) .09s,-webkit-transform .42827s cubic-bezier(0.52,0.16,0.52,0.84) .069s;transition:opacity .2386s cubic-bezier(0.52,0.16,0.52,0.84) .09s,-webkit-transform .42827s cubic-bezier(0.52,0.16,0.52,0.84) .069s;transition:opacity .2386s cubic-bezier(0.52,0.16,0.52,0.84) .09s,transform .42827s cubic-bezier(0.52,0.16,0.52,0.84) .069s;transition:opacity .2386s cubic-bezier(0.52,0.16,0.52,0.84) .09s,transform .42827s cubic-bezier(0.52,0.16,0.52,0.84) .069s,-webkit-transform .42827s cubic-bezier(0.52,0.16,0.52,0.84) .069s}#ac-globalnav .ac-gn-item-menu:nth-child(5)::before{content:'';display:block;width:100%;height:1px;background:#282828}#ac-globalnav .ac-gn-item-menu:nth-child(6){-webkit-transform:translateY(-28px);transform:translateY(-28px);-webkit-transition:opacity .22581s cubic-bezier(0.52,0.16,0.52,0.84) .07s,-webkit-transform .42259s cubic-bezier(0.52,0.16,0.52,0.84) .056s;transition:opacity .22581s cubic-bezier(0.52,0.16,0.52,0.84) .07s,-webkit-transform .42259s cubic-bezier(0.52,0.16,0.52,0.84) .056s;transition:opacity .22581s cubic-bezier(0.52,0.16,0.52,0.84) .07s,transform .42259s cubic-bezier(0.52,0.16,0.52,0.84) .056s;transition:opacity .22581s cubic-bezier(0.52,0.16,0.52,0.84) .07s,transform .42259s cubic-bezier(0.52,0.16,0.52,0.84) .056s,-webkit-transform .42259s cubic-bezier(0.52,0.16,0.52,0.84) .056s}#ac-globalnav .ac-gn-item-menu:nth-child(6)::before{content:'';display:block;width:100%;height:1px;background:#282828}#ac-globalnav .ac-gn-item-menu:nth-child(7){-webkit-transform:translateY(-24px);transform:translateY(-24px);-webkit-transition:opacity .22261s cubic-bezier(0.52,0.16,0.52,0.84) .05s,-webkit-transform .4205s cubic-bezier(0.52,0.16,0.52,0.84) .043s;transition:opacity .22261s cubic-bezier(0.52,0.16,0.52,0.84) .05s,-webkit-transform .4205s cubic-bezier(0.52,0.16,0.52,0.84) .043s;transition:opacity .22261s cubic-bezier(0.52,0.16,0.52,0.84) .05s,transform .4205s cubic-bezier(0.52,0.16,0.52,0.84) .043s;transition:opacity .22261s cubic-bezier(0.52,0.16,0.52,0.84) .05s,transform .4205s cubic-bezier(0.52,0.16,0.52,0.84) .043s,-webkit-transform .4205s cubic-bezier(0.52,0.16,0.52,0.84) .043s}#ac-globalnav .ac-gn-item-menu:nth-child(7)::before{content:'';display:block;width:100%;height:1px;background:#282828}#ac-globalnav .ac-gn-item-menu:nth-child(8){-webkit-transform:translateY(-20px);transform:translateY(-20px);-webkit-transition:opacity .229s cubic-bezier(0.52,0.16,0.52,0.84) .03s,-webkit-transform .422s cubic-bezier(0.52,0.16,0.52,0.84) .03s;transition:opacity .229s cubic-bezier(0.52,0.16,0.52,0.84) .03s,-webkit-transform .422s cubic-bezier(0.52,0.16,0.52,0.84) .03s;transition:opacity .229s cubic-bezier(0.52,0.16,0.52,0.84) .03s,transform .422s cubic-bezier(0.52,0.16,0.52,0.84) .03s;transition:opacity .229s cubic-bezier(0.52,0.16,0.52,0.84) .03s,transform .422s cubic-bezier(0.52,0.16,0.52,0.84) .03s,-webkit-transform .422s cubic-bezier(0.52,0.16,0.52,0.84) .03s}#ac-globalnav .ac-gn-item-menu:nth-child(8)::before{content:'';display:block;width:100%;height:1px;background:#282828}#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-item-menu,#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-item-menu{opacity:1;pointer-events:auto;-webkit-transform:none;transform:none}#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-item-menu:nth-child(2),#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-item-menu:nth-child(2){-webkit-transition:opacity .3091s cubic-bezier(0.32,0.08,0.24,1) .03s,-webkit-transform .3455s cubic-bezier(0.32,0.08,0.24,1) .02s;transition:opacity .3091s cubic-bezier(0.32,0.08,0.24,1) .03s,-webkit-transform .3455s cubic-bezier(0.32,0.08,0.24,1) .02s;transition:opacity .3091s cubic-bezier(0.32,0.08,0.24,1) .03s,transform .3455s cubic-bezier(0.32,0.08,0.24,1) .02s;transition:opacity .3091s cubic-bezier(0.32,0.08,0.24,1) .03s,transform .3455s cubic-bezier(0.32,0.08,0.24,1) .02s,-webkit-transform .3455s cubic-bezier(0.32,0.08,0.24,1) .02s}#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-item-menu:nth-child(3),#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-item-menu:nth-child(3){-webkit-transition:opacity .32244s cubic-bezier(0.32,0.08,0.24,1) .05s,-webkit-transform .35825s cubic-bezier(0.32,0.08,0.24,1) .04s;transition:opacity .32244s cubic-bezier(0.32,0.08,0.24,1) .05s,-webkit-transform .35825s cubic-bezier(0.32,0.08,0.24,1) .04s;transition:opacity .32244s cubic-bezier(0.32,0.08,0.24,1) .05s,transform .35825s cubic-bezier(0.32,0.08,0.24,1) .04s;transition:opacity .32244s cubic-bezier(0.32,0.08,0.24,1) .05s,transform .35825s cubic-bezier(0.32,0.08,0.24,1) .04s,-webkit-transform .35825s cubic-bezier(0.32,0.08,0.24,1) .04s}#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-item-menu:nth-child(4),#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-item-menu:nth-child(4){-webkit-transition:opacity .33467s cubic-bezier(0.32,0.08,0.24,1) .07s,-webkit-transform .37539s cubic-bezier(0.32,0.08,0.24,1) .06s;transition:opacity .33467s cubic-bezier(0.32,0.08,0.24,1) .07s,-webkit-transform .37539s cubic-bezier(0.32,0.08,0.24,1) .06s;transition:opacity .33467s cubic-bezier(0.32,0.08,0.24,1) .07s,transform .37539s cubic-bezier(0.32,0.08,0.24,1) .06s;transition:opacity .33467s cubic-bezier(0.32,0.08,0.24,1) .07s,transform .37539s cubic-bezier(0.32,0.08,0.24,1) .06s,-webkit-transform .37539s cubic-bezier(0.32,0.08,0.24,1) .06s}#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-item-menu:nth-child(5),#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-item-menu:nth-child(5){-webkit-transition:opacity .34577s cubic-bezier(0.32,0.08,0.24,1) .09s,-webkit-transform .39692s cubic-bezier(0.32,0.08,0.24,1) .08s;transition:opacity .34577s cubic-bezier(0.32,0.08,0.24,1) .09s,-webkit-transform .39692s cubic-bezier(0.32,0.08,0.24,1) .08s;transition:opacity .34577s cubic-bezier(0.32,0.08,0.24,1) .09s,transform .39692s cubic-bezier(0.32,0.08,0.24,1) .08s;transition:opacity .34577s cubic-bezier(0.32,0.08,0.24,1) .09s,transform .39692s cubic-bezier(0.32,0.08,0.24,1) .08s,-webkit-transform .39692s cubic-bezier(0.32,0.08,0.24,1) .08s}#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-item-menu:nth-child(6),#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-item-menu:nth-child(6){-webkit-transition:opacity .35577s cubic-bezier(0.32,0.08,0.24,1) .11s,-webkit-transform .42286s cubic-bezier(0.32,0.08,0.24,1) .1s;transition:opacity .35577s cubic-bezier(0.32,0.08,0.24,1) .11s,-webkit-transform .42286s cubic-bezier(0.32,0.08,0.24,1) .1s;transition:opacity .35577s cubic-bezier(0.32,0.08,0.24,1) .11s,transform .42286s cubic-bezier(0.32,0.08,0.24,1) .1s;transition:opacity .35577s cubic-bezier(0.32,0.08,0.24,1) .11s,transform .42286s cubic-bezier(0.32,0.08,0.24,1) .1s,-webkit-transform .42286s cubic-bezier(0.32,0.08,0.24,1) .1s}#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-item-menu:nth-child(7),#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-item-menu:nth-child(7){-webkit-transition:opacity .36464s cubic-bezier(0.32,0.08,0.24,1) .13s,-webkit-transform .45318s cubic-bezier(0.32,0.08,0.24,1) .12s;transition:opacity .36464s cubic-bezier(0.32,0.08,0.24,1) .13s,-webkit-transform .45318s cubic-bezier(0.32,0.08,0.24,1) .12s;transition:opacity .36464s cubic-bezier(0.32,0.08,0.24,1) .13s,transform .45318s cubic-bezier(0.32,0.08,0.24,1) .12s;transition:opacity .36464s cubic-bezier(0.32,0.08,0.24,1) .13s,transform .45318s cubic-bezier(0.32,0.08,0.24,1) .12s,-webkit-transform .45318s cubic-bezier(0.32,0.08,0.24,1) .12s}#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-item-menu:nth-child(8),#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-item-menu:nth-child(8){-webkit-transition:opacity .3724s cubic-bezier(0.32,0.08,0.24,1) .15s,-webkit-transform .4879s cubic-bezier(0.32,0.08,0.24,1) .14s;transition:opacity .3724s cubic-bezier(0.32,0.08,0.24,1) .15s,-webkit-transform .4879s cubic-bezier(0.32,0.08,0.24,1) .14s;transition:opacity .3724s cubic-bezier(0.32,0.08,0.24,1) .15s,transform .4879s cubic-bezier(0.32,0.08,0.24,1) .14s;transition:opacity .3724s cubic-bezier(0.32,0.08,0.24,1) .15s,transform .4879s cubic-bezier(0.32,0.08,0.24,1) .14s,-webkit-transform .4879s cubic-bezier(0.32,0.08,0.24,1) .14s}#ac-globalnav.searchshow .ac-gn-item-menu,#ac-globalnav.searchopen .ac-gn-item-menu,#ac-globalnav.searchhide .ac-gn-item-menu{-webkit-animation:none;animation:none}}

#ac-globalnav .ac-gn-search-small{display:none}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-search{display:none}#ac-globalnav.searchshow .ac-gn-search,#ac-globalnav.searchopen .ac-gn-search,#ac-globalnav.searchhide .ac-gn-search{-webkit-animation:none;animation:none}#ac-globalnav .ac-gn-search-small{display:block}}

#ac-globalnav .ac-gn-link{font-size:14px;line-height:3.14286;font-weight:400;letter-spacing:-.01em;font-family:"SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;color:#fff;position:relative;z-index:1;display:inline-block;padding:0 10px;height:44px;opacity:1;background:no-repeat;outline:none;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}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-link{font-size:17px;letter-spacing:-.022em;font-family:"SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif}}

#ac-globalnav .ac-gn-link:hover{opacity:.65}

#ac-globalnav .ac-gn-link-text{position:absolute;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(0px 0 99.9% 99.9%);clip-path:inset(0px 0 99.9% 99.9%);overflow:hidden;height:1px;width:1px;padding:0;border:0;top:50%}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-link-bag{padding:0 16px;opacity:1}}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-item-menu .ac-gn-link{background-position:left center;display:block;outline-offset:0;padding:0;width:auto;max-width:none}}

#ac-globalnav .ac-gn-link-apple{background-size:16px 44px;background-repeat:no-repeat;background-image:url("https://www.apple.com/ac/globalnav/4/en_US/images/globalnav/apple/image_large.svg");background-position:center center;width:16px}

#ac-globalnav.no-svg .ac-gn-link-apple{background-image:url("https://www.apple.com/ac/globalnav/4/en_US/images/globalnav/apple/image_large.png")}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-link-apple{background-size:18px 48px;background-repeat:no-repeat;background-image:url("https://www.apple.com/ac/globalnav/4/en_US/images/globalnav/apple/image_small.svg")}#ac-globalnav.no-svg .ac-gn-link-apple{background-image:url("https://www.apple.com/ac/globalnav/4/en_US/images/globalnav/apple/image_small.png")}}

.ac-gn-current-apple #ac-globalnav .ac-gn-link-apple{opacity:.65}

#ac-globalnav .ac-gn-link-mac{background-size:26px 44px;background-repeat:no-repeat;background-image:url("https://www.apple.com/ac/globalnav/4/en_US/images/globalnav/links/mac/image_large.svg");background-position:center center;background-origin:content-box;background-size:cover;width:1.85714em;max-width:44.2px}

#ac-globalnav .ac-gn-link-search{background-size:16px 44px;background-repeat:no-repeat;background-image:url(https://www.apple.com/ac/globalnav/4/en_US/images/globalnav/search/image_large.svg);background-position:center center;width:16px}

#ac-globalnav.no-svg .ac-gn-link-search{background-image:url("https://www.apple.com/ac/globalnav/4/en_US/images/globalnav/search/image_large.png")}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-link-search{background-size:16px 16px;background-repeat:no-repeat;background-image:url("https://www.apple.com/ac/globalnav/4/en_US/images/globalnav/search/image_small.svg")}#ac-globalnav.no-svg .ac-gn-link-search{background-image:url("https://www.apple.com/ac/globalnav/4/en_US/images/globalnav/search/image_small.png")}}

.ac-gn-current-search #ac-globalnav .ac-gn-link-search{opacity:.65}

#ac-globalnav .ac-gn-link-bag{background-size:14px 44px;background-repeat:no-repeat;background-image:url("https://www.apple.com/ac/globalnav/4/en_US/images/globalnav/bag/image_large.svg");background-position:center center;width:14px}

#ac-globalnav.no-svg .ac-gn-link-bag{background-image:url("https://www.apple.com/ac/globalnav/4/en_US/images/globalnav/bag/image_large.png")}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-link-bag{background-size:16px 48px;background-repeat:no-repeat;background-image:url("https://www.apple.com/ac/globalnav/4/en_US/images/globalnav/bag/image_small.svg")}#ac-globalnav.no-svg .ac-gn-link-bag{background-image:url("https://www.apple.com/ac/globalnav/4/en_US/images/globalnav/bag/image_small.png")}}

.ac-gn-current-bag #ac-globalnav .ac-gn-link-bag{opacity:.65}

#ac-globalnav .ac-gn-link.current{opacity:.65}

#ac-globalnav .ac-gn-menuicon{left:0;position:absolute;z-index:2;top:0;width:48px;border-bottom:none}

#ac-globalnav .ac-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);transition:opacity 0.2s cubic-bezier(0.645,0.045,0.355,1);-webkit-tap-highlight-color:transparent}

#ac-globalnav .ac-gn-menuicon-label:hover,#ac-globalnav .ac-gn-menuicon-label:focus,#ac-globalnav .ac-gn-menuicon-label:active{opacity:.65}

#ac-globalnav.touch .ac-gn-menuicon-label{opacity:1;-webkit-transition:none;transition:none}

#ac-globalnav .ac-gn-menuicon-bread{position:absolute;z-index:3;top:9px;left:9px;width:30px;height:30px;-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)}

#ac-globalnav .ac-gn-menuicon-bread-top{-webkit-transition:-webkit-transform .1806s cubic-bezier(0.04,0.04,0.12,0.96);transition:-webkit-transform .1806s cubic-bezier(0.04,0.04,0.12,0.96);transition:transform .1806s cubic-bezier(0.04,0.04,0.12,0.96);transition:transform .1806s cubic-bezier(0.04,0.04,0.12,0.96),-webkit-transform .1806s cubic-bezier(0.04,0.04,0.12,0.96);-webkit-transform:none;transform:none;z-index:4}

#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-menuicon-bread-top,#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-menuicon-bread-top{-webkit-transition:-webkit-transform .3192s cubic-bezier(0.04,0.04,0.12,0.96) .1008s;transition:-webkit-transform .3192s cubic-bezier(0.04,0.04,0.12,0.96) .1008s;transition:transform .3192s cubic-bezier(0.04,0.04,0.12,0.96) .1008s;transition:transform .3192s cubic-bezier(0.04,0.04,0.12,0.96) .1008s,-webkit-transform .3192s cubic-bezier(0.04,0.04,0.12,0.96) .1008s;-webkit-transform:rotate(45deg);transform:rotate(45deg)}

#ac-globalnav .ac-gn-menuicon-bread-bottom{-webkit-transition:-webkit-transform .1806s cubic-bezier(0.04,0.04,0.12,0.96);transition:-webkit-transform .1806s cubic-bezier(0.04,0.04,0.12,0.96);transition:transform .1806s cubic-bezier(0.04,0.04,0.12,0.96);transition:transform .1806s cubic-bezier(0.04,0.04,0.12,0.96),-webkit-transform .1806s cubic-bezier(0.04,0.04,0.12,0.96);-webkit-transform:none;transform:none}

#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-menuicon-bread-bottom,#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-menuicon-bread-bottom{-webkit-transition:-webkit-transform .3192s cubic-bezier(0.04,0.04,0.12,0.96) .1008s;transition:-webkit-transform .3192s cubic-bezier(0.04,0.04,0.12,0.96) .1008s;transition:transform .3192s cubic-bezier(0.04,0.04,0.12,0.96) .1008s;transition:transform .3192s cubic-bezier(0.04,0.04,0.12,0.96) .1008s,-webkit-transform .3192s cubic-bezier(0.04,0.04,0.12,0.96) .1008s;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}

#ac-globalnav.searchopen .ac-gn-menuicon-bread{visibility:hidden}

#ac-globalnav .ac-gn-menuicon-bread-crust{display:block;width:17px;height:1px;background:#fff;position:absolute;left:7px;z-index:1}

#ac-globalnav .ac-gn-menuicon-bread-crust-top{top:14px;-webkit-transform:translateY(-3px);transform:translateY(-3px);-webkit-transition:-webkit-transform .1596s cubic-bezier(0.52,0.16,0.52,0.84) .1008s;transition:-webkit-transform .1596s cubic-bezier(0.52,0.16,0.52,0.84) .1008s;transition:transform .1596s cubic-bezier(0.52,0.16,0.52,0.84) .1008s;transition:transform .1596s cubic-bezier(0.52,0.16,0.52,0.84) .1008s,-webkit-transform .1596s cubic-bezier(0.52,0.16,0.52,0.84) .1008s}

#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-menuicon-bread-crust-top,#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-menuicon-bread-crust-top{-webkit-transition:-webkit-transform .1806s cubic-bezier(0.04,0.04,0.12,0.96);transition:-webkit-transform .1806s cubic-bezier(0.04,0.04,0.12,0.96);transition:transform .1806s cubic-bezier(0.04,0.04,0.12,0.96);transition:transform .1806s cubic-bezier(0.04,0.04,0.12,0.96),-webkit-transform .1806s cubic-bezier(0.04,0.04,0.12,0.96);-webkit-transform:none;transform:none}

#ac-globalnav .ac-gn-menuicon-bread-crust-bottom{bottom:14px;-webkit-transform:translateY(3px);transform:translateY(3px);-webkit-transition:-webkit-transform .1596s cubic-bezier(0.52,0.16,0.52,0.84) .1008s;transition:-webkit-transform .1596s cubic-bezier(0.52,0.16,0.52,0.84) .1008s;transition:transform .1596s cubic-bezier(0.52,0.16,0.52,0.84) .1008s;transition:transform .1596s cubic-bezier(0.52,0.16,0.52,0.84) .1008s,-webkit-transform .1596s cubic-bezier(0.52,0.16,0.52,0.84) .1008s}

#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-menuicon-bread-crust-bottom,#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-menuicon-bread-crust-bottom{-webkit-transition:-webkit-transform .1806s cubic-bezier(0.04,0.04,0.12,0.96);transition:-webkit-transform .1806s cubic-bezier(0.04,0.04,0.12,0.96);transition:transform .1806s cubic-bezier(0.04,0.04,0.12,0.96);transition:transform .1806s cubic-bezier(0.04,0.04,0.12,0.96),-webkit-transform .1806s cubic-bezier(0.04,0.04,0.12,0.96);-webkit-transform:none;transform:none}

#ac-globalnav .ac-gn-menuanchor{left:0;color:#fff;position:absolute;top:0;width:1px;height:1px;z-index:10}

#ac-globalnav .ac-gn-menuanchor:focus{outline-offset:-8px;width:48px;height:48px}

#ac-globalnav .ac-gn-menuanchor-close{display:none}

#ac-globalnav .ac-gn-menuanchor-label{position:absolute;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(0px 0 99.9% 99.9%);clip-path:inset(0px 0 99.9% 99.9%);overflow:hidden;height:1px;width:1px;padding:0;border:0}

#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-menuanchor-open,#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-menuanchor-open{display:none}

#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-menuanchor-close,#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-menuanchor-close{display:block}

#ac-globalnav .ac-gn-bag-badge{border-radius:6px;margin-top:-3px;margin-left:-3px;width:6px;height:6px;background:#6bf;display:none;position:absolute;top:50%;left:50%;z-index:1}

#ac-globalnav .ac-gn-bag.with-badge .ac-gn-bag-badge{display:block}

#ac-globalnav .ac-gn-bagview,#ac-globalnav .ac-gn-notification{margin-right:-116px;right:0;position:absolute;top:48px;z-index:1}

@media only screen and (max-width:1268px){#ac-globalnav .ac-gn-bagview,#ac-globalnav .ac-gn-notification{margin-right:calc(512px - 50vw);right:5px}@supports (right:calc(max(0px))){#ac-globalnav .ac-gn-bagview,#ac-globalnav .ac-gn-notification{right:calc(max(5px,calc(env(safe-area-inset-right) - 4px)))}}

}

@media only screen and (max-width:1024px){#ac-globalnav .ac-gn-bagview,#ac-globalnav .ac-gn-notification{margin-right:0}}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-bagview,#ac-globalnav .ac-gn-notification{margin-right:0;right:5px;top:52px}}

#ac-globalnav .ac-gn-bagview-caret,#ac-globalnav .ac-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){#ac-globalnav .ac-gn-bagview-caret,#ac-globalnav .ac-gn-notification-caret{bottom:100%}}

@media only screen and (max-width:419px){#ac-globalnav .ac-gn-bagview-caret,#ac-globalnav .ac-gn-notification-caret{height:9px;margin-bottom:0}}

#ac-globalnav .ac-gn-bagview-caret:after,#ac-globalnav .ac-gn-notification-caret:after{left:50%;border:1px solid;content:"";display:block;position:absolute;top:0;width:12px;height:12px;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:0% 0;transform-origin:0% 0;z-index:1}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-bagview-caret:after,#ac-globalnav .ac-gn-notification-caret:after{left:auto;right:3px}}

#ac-globalnav .ac-gn-bagview{font-size:14px;line-height:1.35722;font-weight:400;letter-spacing:-.01em;font-family:"SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;background:#fff;border:1px solid #d6d6d6;border-radius:2px;display:none;width:288px}

#ac-globalnav.with-bagview .ac-gn-bagview{display:block}

@media only screen and (max-width:419px){#ac-globalnav .ac-gn-bagview{border-radius:0;border-width:0 0 1px 0;top:48px;left:0;right:0;width:100%}}

#ac-globalnav .ac-gn-bagview-content{margin:0 auto;min-height:90px;padding:0 20px;position:relative;z-index:2}

@media only screen and (max-width:419px){#ac-globalnav .ac-gn-bagview-content{padding:0 48px}}

#ac-globalnav .ac-gn-bagview-caret{display:none}

#ac-globalnav.with-bagview .ac-gn-bagview-caret{display:block}

#ac-globalnav.with-bagview .ac-gn-bagview-caret-small{display:none}

@media only screen and (max-width:767px){#ac-globalnav.with-bagview .ac-gn-bagview-caret-small{display:block}}

@media only screen and (max-width:767px){#ac-globalnav.with-bagview .ac-gn-bagview-caret-large{display:none}}

#ac-globalnav .ac-gn-bagview-caret:after{background:#fff;border-color:#d6d6d6}

@media only screen and (max-width:419px){#ac-globalnav .ac-gn-bagview-caret:after{right:9px;border-color:#fff}}

#ac-globalnav .ac-gn-bag{z-index:2}

#ac-globalnav .ac-gn-bagview{font-size:15px;line-height:1.16667;font-weight:400;letter-spacing:-.014em;font-family:"SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;background:#fff}

#ac-globalnav .ac-gn-bagview-message{color:#888;padding:35px 0;margin:0;text-align:center}

#ac-globalnav .ac-gn-bagview-linemessage{margin:-9px 0 0 0;color:#888;font-size:12px;line-height:1.33341;font-weight:400;letter-spacing:.036em;font-family:"SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;text-align:center}

#ac-globalnav .ac-gn-bagview-linemessage-text{padding:0 6px 0 6px;background:#fff}

#ac-globalnav .ac-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)}}

#ac-globalnav .ac-gn-bagview-loader{background:no-repeat center/40px url("../assets/ac-store/spinner.svg");margin-top:-20px;margin-left:-20px;width:40px;height:40px;background:url("../assets/ac-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}

#ac-globalnav .ac-gn-bagview _:-ms-input-placeholder,:root #ac-globalnav .ac-gn-bagview-loader{background:none,no-repeat center/40px url("../assets/ac-store/spinner.svg")}

#ac-globalnav .ac-gn-bagview-bag{list-style:none}

#ac-globalnav .ac-gn-bagview-bagitem{border-bottom:1px solid #e3e3e3}

#ac-globalnav .ac-gn-bagview-bagitem-last{border-bottom-style:none}

#ac-globalnav .ac-gn-bagview-bagitem-link{margin:0;padding:0;display:table;min-height:92px;width:100%;color:#333;text-decoration:none}

#ac-globalnav .ac-gn-bagview-bagitem-column1,#ac-globalnav .ac-gn-bagview-bagitem-column2{display:table-cell;vertical-align:middle;min-height:70px}

#ac-globalnav .ac-gn-bagview-bagitem-column1{padding:0 5px 0 0;width:25%}

#ac-globalnav .ac-gn-bagview-bagitem-column2{padding:19px 0;width:75%}

#ac-globalnav .ac-gn-bagview-bagitem-picture{max-width:70px;height:auto}

#ac-globalnav .ac-gn-bagview-bagitem-qty{font-size:12px;line-height:1.33341;font-weight:400;letter-spacing:.036em;font-family:"SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;color:#888}

#ac-globalnav .ac-gn-bagview-bagitem-qty:before{content:"\2715";font-size:0.75em}

#ac-globalnav .ac-gn-bagview-nav{margin-bottom:2px}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-bagview-nav{margin-bottom:8px}}

#ac-globalnav .ac-gn-bagview-nav-list{margin:0;padding:0;list-style:none}

#ac-globalnav .ac-gn-bagview-nav-item{margin:0;padding:0;border-top:1px solid #e3e3e3}

#ac-globalnav .ac-gn-bagview-nav-item:first-child{border-top-style:none}

#ac-globalnav .ac-gn-bagview-nav-nobtn{border-top:1px solid #e3e3e3}

#ac-globalnav .ac-gn-bagview-nav-link{color:#0070c9;display:block;line-height:43px;padding:0 30px;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#ac-globalnav .ac-gn-bagview-nav-link:hover{text-decoration:underline}

#ac-globalnav.touch .ac-gn-bagview-nav-link:hover{text-decoration:none}

#ac-globalnav .ac-gn-bagview-nav-link-bag{background-image:url("https://www.apple.com/ac/globalnav/4/en_US/assets/ac-store/bag.png");background-image:none,url("https://www.apple.com/ac/globalnav/4/en_US/assets/ac-store/bag.svg");background-position:1px center;background-repeat:no-repeat}

#ac-globalnav .ac-gn-bagview-nav-link-favorites{background-image:url("https://www.apple.com/ac/globalnav/4/en_US/assets/ac-store/favorites.png");background-image:none,url("https://www.apple.com/ac/globalnav/4/en_US/assets/ac-store/favorites.svg");background-position:1px center;background-repeat:no-repeat}

#ac-globalnav .ac-gn-bagview-nav-link-orders{background-image:url("https://www.apple.com/ac/globalnav/4/en_US/assets/ac-store/orders.png");background-image:none,url("https://www.apple.com/ac/globalnav/4/en_US/assets/ac-store/orders.svg");background-position:1px center;background-repeat:no-repeat}

#ac-globalnav .ac-gn-bagview-nav-link-account{background-image:url("https://www.apple.com/ac/globalnav/4/en_US/assets/ac-store/account.png");background-image:none,url("https://www.apple.com/ac/globalnav/4/en_US/assets/ac-store/account.svg");background-position:1px center;background-repeat:no-repeat}

#ac-globalnav .ac-gn-bagview-nav-link-signIn{background-image:url("https://www.apple.com/ac/globalnav/4/en_US/assets/ac-store/signIn.png");background-image:none,url("https://www.apple.com/ac/globalnav/4/en_US/assets/ac-store/signIn.svg");background-position:1px center;background-repeat:no-repeat}

#ac-globalnav .ac-gn-bagview-nav-link-signOut{background-image:url("https://www.apple.com/ac/globalnav/4/en_US/assets/ac-store/signIn.png");background-image:none,url("https://www.apple.com/ac/globalnav/4/en_US/assets/ac-store/signIn.svg");background-position:1px center;background-repeat:no-repeat}

#ac-globalnav .ac-gn-bagview-nav-link-bag{background-position:3px 45%}

#ac-globalnav .ac-gn-bagview-nav-link-orders{background-position:2px center}

#ac-globalnav .ac-gn-bagview-nav-link-favorites{background-position:1px center}

#ac-globalnav .ac-gn-bagview-button{font-size:17px;line-height:1.47059;font-weight:400;letter-spacing:-.022em;font-family:"SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;background-color:#0070c9;background:-webkit-gradient(linear,left top,left bottom,from(#42a1ec),to(#0070c9));background:-webkit-linear-gradient(#42a1ec,#0070c9);background:linear-gradient(#42a1ec,#0070c9);border-color:#07c;border-width:1px;border-style:solid;border-radius:4px;color:#fff;cursor:pointer;display:inline-block;min-width:30px;padding-left:15px;padding-right:15px;padding-top:4px;padding-bottom:4px;text-align:center;white-space:nowrap}

#ac-globalnav .ac-gn-bagview-button:hover{background-color:#147bcd;background:-webkit-gradient(linear,left top,left bottom,from(#51a9ee),to(#147bcd));background:-webkit-linear-gradient(#51a9ee,#147bcd);background:linear-gradient(#51a9ee,#147bcd);border-color:#1482d0;text-decoration:none}

#ac-globalnav .ac-gn-bagview-button:focus{-webkit-box-shadow:0 0 0 3px rgba(131,192,253,0.5);box-shadow:0 0 0 3px rgba(131,192,253,0.5);outline:none}

#ac-globalnav .ac-gn-bagview-button:focus[data-focus-method="mouse"]:not(input):not(textarea):not(select),#ac-globalnav .ac-gn-bagview-button:focus[data-focus-method="touch"]:not(input):not(textarea):not(select){-webkit-box-shadow:none;box-shadow:none}

#ac-globalnav .ac-gn-bagview-button:active{background-color:#0067b9;background:-webkit-gradient(linear,left top,left bottom,from(#3d94d9),to(#0067b9));background:-webkit-linear-gradient(#3d94d9,#0067b9);background:linear-gradient(#3d94d9,#0067b9);border-color:#006dbc;outline:none}

#ac-globalnav .ac-gn-bagview-button:disabled,#ac-globalnav .ac-gn-bagview-button.disabled{background-color:#0070c9;background:-webkit-gradient(linear,left top,left bottom,from(#42a1ec),to(#0070c9));background:-webkit-linear-gradient(#42a1ec,#0070c9);background:linear-gradient(#42a1ec,#0070c9);border-color:#07c;color:#fff;cursor:default;opacity:.3}

#ac-globalnav .ac-gn-bagview-button-compact{font-size:12px;line-height:1.33341;font-weight:400;letter-spacing:-.01em;font-family:"SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;min-width:20px;padding-left:10px;padding-right:10px;padding-top:2px;padding-bottom:2px}

#ac-globalnav .ac-gn-bagview-button-block{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;width:100%}

#ac-globalnav .ac-gn-bagview-button-secondary{background-color:#e3e3e3;background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#e3e3e3));background:-webkit-linear-gradient(#fff,#e3e3e3);background:linear-gradient(#fff,#e3e3e3);border-color:#d6d6d6;color:#0070c9}

#ac-globalnav .ac-gn-bagview-button-secondary:hover{background-color:#eee;background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#eee));background:-webkit-linear-gradient(#fff,#eee);background:linear-gradient(#fff,#eee);border-color:#d9d9d9}

#ac-globalnav .ac-gn-bagview-button-secondary:active{background-color:#dcdcdc;background:-webkit-gradient(linear,left top,left bottom,from(#f7f7f7),to(#dcdcdc));background:-webkit-linear-gradient(#f7f7f7,#dcdcdc);background:linear-gradient(#f7f7f7,#dcdcdc);border-color:#d0d0d0}

#ac-globalnav .ac-gn-bagview-button-secondary:disabled,#ac-globalnav .ac-gn-bagview-button-secondary.disabled{background-color:#e3e3e3;background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#e3e3e3));background:-webkit-linear-gradient(#fff,#e3e3e3);background:linear-gradient(#fff,#e3e3e3);border-color:#d6d6d6;color:#0070c9}

#ac-globalnav .ac-gn-bagview-button-applemusic{background-color:#da0f47;background:-webkit-gradient(linear,left top,left bottom,from(#f82752),to(#da0f47));background:-webkit-linear-gradient(#f82752,#da0f47);background:linear-gradient(#f82752,#da0f47);border-color:#da0f47;color:#fff}

#ac-globalnav .ac-gn-bagview-button-applemusic:hover{background-color:#dd2256;background:-webkit-gradient(linear,left top,left bottom,from(#f93860),to(#dd2256));background:-webkit-linear-gradient(#f93860,#dd2256);background:linear-gradient(#f93860,#dd2256);border-color:#dd2256}

#ac-globalnav .ac-gn-bagview-button-applemusic:active{background-color:#cf0e43;background:-webkit-gradient(linear,left top,left bottom,from(#ec254e),to(#cf0e43));background:-webkit-linear-gradient(#ec254e,#cf0e43);background:linear-gradient(#ec254e,#cf0e43);border-color:#cf0e43}

#ac-globalnav .ac-gn-bagview-button-applemusic:disabled,#ac-globalnav .ac-gn-bagview-button-applemusic.disabled{background-color:#da0f47;background:-webkit-gradient(linear,left top,left bottom,from(#f82752),to(#da0f47));background:-webkit-linear-gradient(#f82752,#da0f47);background:linear-gradient(#f82752,#da0f47);border-color:#da0f47;color:#fff}

#ac-globalnav .ac-gn-bagview-button{display:block;margin:17px 0;text-decoration:none}

#ac-globalnav .ac-gn-bagview-bag-one+.ac-gn-bagview-button{margin:7px 0 17px 0}

#ac-globalnav #ac-gn-bagview-content .ac-gn-bagview-button.ac-gn-bagview-button-checkout{display:block}

#ac-globalnav .ac-gn-bagview-nav-item-preregistration{padding:10px 0!important;border-bottom:1px solid #e3e3e3!important;text-align:center!important}

#ac-globalnav .ac-gn-bagview-nav-link-preregistration{padding:0 12px!important}

#ac-globalnav li.prereg-promo-links-list{display:inline-block}

@-webkit-keyframes ac-gn-search-placeholder-cancel-show{0%{-webkit-transform:translateX(8px);transform:translateX(8px);opacity:0}100%{-webkit-transform:none;transform:none;opacity:1}}

@keyframes ac-gn-search-placeholder-cancel-show{0%{-webkit-transform:translateX(8px);transform:translateX(8px);opacity:0}100%{-webkit-transform:none;transform:none;opacity:1}}

@-webkit-keyframes ac-gn-search-placeholder-mask-searchshow-transform{0%{-webkit-transform:none;transform:none}100%{-webkit-transform:translateX(calc(-100% + 4px));transform:translateX(calc(-100% + 4px))}}

@keyframes ac-gn-search-placeholder-mask-searchshow-transform{0%{-webkit-transform:none;transform:none}100%{-webkit-transform:translateX(calc(-100% + 4px));transform:translateX(calc(-100% + 4px))}}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-search-placeholder-container{display:block;position:absolute;z-index:4;top:48px;right:0;bottom:0;left:0;padding:0 10px 0 10px;-webkit-box-sizing:border-box;box-sizing:border-box;height:3.11765em;background:transparent;visibility:hidden;-webkit-transition:background .44s cubic-bezier(0.52,0.16,0.24,1) .1s,visibility 0s linear .5s;transition:background .44s cubic-bezier(0.52,0.16,0.24,1) .1s,visibility 0s linear .5s}#ac-globalnav .ac-gn-search-placeholder-container:after{content:'';display:block;height:1px;background:#282828;position:absolute;z-index:2;right:0;bottom:0;left:0;opacity:0;-webkit-transform:translateY(-46px);transform:translateY(-46px);-webkit-transition:opacity .2s cubic-bezier(0.52,0.16,0.52,0.84) .3s,-webkit-transform 0.38s cubic-bezier(0.52,0.16,0.52,0.84) 0.15s;transition:opacity .2s cubic-bezier(0.52,0.16,0.52,0.84) .3s,-webkit-transform 0.38s cubic-bezier(0.52,0.16,0.52,0.84) 0.15s;transition:opacity .2s cubic-bezier(0.52,0.16,0.52,0.84) .3s,transform 0.38s cubic-bezier(0.52,0.16,0.52,0.84) 0.15s;transition:opacity .2s cubic-bezier(0.52,0.16,0.52,0.84) .3s,transform 0.38s cubic-bezier(0.52,0.16,0.52,0.84) 0.15s,-webkit-transform 0.38s cubic-bezier(0.52,0.16,0.52,0.84) 0.15s}#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-search-placeholder-container,#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-search-placeholder-container{background:#000;visibility:visible;-webkit-transition:background .18s cubic-bezier(0.32,0.08,0.24,1) .18s,visibility 0s linear 0s;transition:background .18s cubic-bezier(0.32,0.08,0.24,1) .18s,visibility 0s linear 0s}#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-search-placeholder-container:after,#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-search-placeholder-container:after{opacity:1;-webkit-transform:none;transform:none;-webkit-transition:opacity 0.31s cubic-bezier(0.52,0.16,0.52,0.84) 0.03s,-webkit-transform 0.34s cubic-bezier(0.32,0.08,0.24,1) 0.02s;transition:opacity 0.31s cubic-bezier(0.52,0.16,0.52,0.84) 0.03s,-webkit-transform 0.34s cubic-bezier(0.32,0.08,0.24,1) 0.02s;transition:opacity 0.31s cubic-bezier(0.52,0.16,0.52,0.84) 0.03s,transform 0.34s cubic-bezier(0.32,0.08,0.24,1) 0.02s;transition:opacity 0.31s cubic-bezier(0.52,0.16,0.52,0.84) 0.03s,transform 0.34s cubic-bezier(0.32,0.08,0.24,1) 0.02s,-webkit-transform 0.34s cubic-bezier(0.32,0.08,0.24,1) 0.02s}#ac-globalnav.searchshow .ac-gn-search-placeholder-container{-webkit-animation:ac-gn-header-slideup-searchshow .36s cubic-bezier(0.32,0.08,0.24,1) both;animation:ac-gn-header-slideup-searchshow .36s cubic-bezier(0.32,0.08,0.24,1) both}#ac-globalnav.searchopen .ac-gn-search-placeholder-container{display:none}#ac-globalnav.searchhide .ac-gn-search-placeholder-container{animation:ac-gn-header-slideup-searchshow .36s cubic-bezier(0.8,0,0.68,0.92) reverse both}#ac-globalnav .ac-gn-search-placeholder-container .ac-gn-search-small{margin:0;padding:0;height:2.11765em}#ac-globalnav .ac-gn-search-placeholder-container .ac-gn-search-small .ac-gn-link{display:block;height:2.11765em;max-width:584px;margin:0 auto;padding:0;outline-offset:0;opacity:1}#ac-globalnav .ac-gn-search-placeholder-container .ac-gn-search-small .ac-gn-link:focus{-webkit-box-shadow:0 0 0 3px rgba(131,192,253,0.5);box-shadow:0 0 0 3px rgba(131,192,253,0.5);outline:none;border-radius:4px}#ac-globalnav .ac-gn-search-placeholder-container .ac-gn-search-small .ac-gn-link:focus[data-focus-method="mouse"]:not(input):not(textarea):not(select),#ac-globalnav .ac-gn-search-placeholder-container .ac-gn-search-small .ac-gn-link:focus[data-focus-method="touch"]:not(input):not(textarea):not(select){-webkit-box-shadow:none;box-shadow:none}#ac-globalnav.searchhide .ac-gn-search-placeholder-container .ac-gn-search-small .ac-gn-link{-webkit-box-shadow:none;box-shadow:none}#ac-globalnav .ac-gn-search-placeholder-container .ac-gn-search-small .ac-gn-link-search{left:0;position:absolute;width:32px;height:2.11765em;background-position:left 8px center}#ac-globalnav .ac-gn-search-placeholder-container .ac-gn-searchview-close{z-index:2;height:2.11765em;line-height:2.11765em}#ac-globalnav .ac-gn-search-placeholder-container .ac-gn-searchview-close:hover,#ac-globalnav .ac-gn-search-placeholder-container .ac-gn-searchview-close:active{opacity:1;cursor:text}#ac-globalnav .ac-gn-search-placeholder-container .ac-gn-searchview-close:before{right:0;content:'';display:block;position:absolute;z-index:1;top:0;width:calc(100% + 18px);height:100%;border-radius:0 4px 4px 0}#ac-globalnav.searchshow .ac-gn-search-placeholder-container .ac-gn-searchview-close:before,#ac-globalnav.searchopen .ac-gn-search-placeholder-container .ac-gn-searchview-close:before,#ac-globalnav.searchhide .ac-gn-search-placeholder-container .ac-gn-searchview-close:before{background-color:#282828}#ac-globalnav.searchshow .ac-gn-search-placeholder-container .ac-gn-searchview-close:before{-webkit-animation:ac-gn-search-placeholder-mask-searchshow-transform .36s cubic-bezier(0.32,0.08,0.24,1) both;animation:ac-gn-search-placeholder-mask-searchshow-transform .36s cubic-bezier(0.32,0.08,0.24,1) both}#ac-globalnav.searchhide .ac-gn-search-placeholder-container .ac-gn-searchview-close:before{animation:ac-gn-search-placeholder-mask-searchshow-transform .36s cubic-bezier(0.8,0,0.68,0.92) reverse both}#ac-globalnav .ac-gn-search-placeholder-container .ac-gn-searchview-close-cancel{opacity:0}#ac-globalnav.searchshow .ac-gn-search-placeholder-container .ac-gn-searchview-close-cancel,#ac-globalnav.searchopen .ac-gn-search-placeholder-container .ac-gn-searchview-close-cancel,#ac-globalnav.searchhide .ac-gn-search-placeholder-container .ac-gn-searchview-close-cancel{display:inline-block}#ac-globalnav.searchshow .ac-gn-search-placeholder-container .ac-gn-searchview-close-cancel{-webkit-animation:ac-gn-search-placeholder-cancel-show .36s cubic-bezier(0.32,0.08,0.24,1) both;animation:ac-gn-search-placeholder-cancel-show .36s cubic-bezier(0.32,0.08,0.24,1) both}#ac-globalnav.searchhide .ac-gn-search-placeholder-container .ac-gn-searchview-close-cancel{animation:ac-gn-search-placeholder-cancel-show .36s cubic-bezier(0.8,0,0.68,0.92) reverse both}}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-search-placeholder-bar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;z-index:1;max-width:584px;margin:0 auto}#ac-globalnav .ac-gn-search-placeholder-bar:after{left:0;content:'';display:block;position:absolute;z-index:1;top:0;width:100%;height:2.11765em;background-color:#282828;border-radius:4px;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(0);transform:scaleY(0);opacity:0;-webkit-transition:opacity 0.1s cubic-bezier(0.52,0.16,0.52,0.84) 0.42s,-webkit-transform 0.38s cubic-bezier(0.52,0.16,0.52,0.84) 0.15s;transition:opacity 0.1s cubic-bezier(0.52,0.16,0.52,0.84) 0.42s,-webkit-transform 0.38s cubic-bezier(0.52,0.16,0.52,0.84) 0.15s;transition:transform 0.38s cubic-bezier(0.52,0.16,0.52,0.84) 0.15s,opacity 0.1s cubic-bezier(0.52,0.16,0.52,0.84) 0.42s;transition:transform 0.38s cubic-bezier(0.52,0.16,0.52,0.84) 0.15s,opacity 0.1s cubic-bezier(0.52,0.16,0.52,0.84) 0.42s,-webkit-transform 0.38s cubic-bezier(0.52,0.16,0.52,0.84) 0.15s}#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-search-placeholder-bar:after,#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-search-placeholder-bar:after{-webkit-transform:none;transform:none;opacity:1;-webkit-transition:opacity 0.06s cubic-bezier(0.32,0.08,0.24,1) 0.04s,-webkit-transform 0.36s cubic-bezier(0.32,0.08,0.24,1);transition:opacity 0.06s cubic-bezier(0.32,0.08,0.24,1) 0.04s,-webkit-transform 0.36s cubic-bezier(0.32,0.08,0.24,1);transition:transform 0.36s cubic-bezier(0.32,0.08,0.24,1),opacity 0.06s cubic-bezier(0.32,0.08,0.24,1) 0.04s;transition:transform 0.36s cubic-bezier(0.32,0.08,0.24,1),opacity 0.06s cubic-bezier(0.32,0.08,0.24,1) 0.04s,-webkit-transform 0.36s cubic-bezier(0.32,0.08,0.24,1)}#ac-globalnav.searchshow .ac-gn-search-placeholder-bar:after,#ac-globalnav.searchopen .ac-gn-search-placeholder-bar:after,#ac-globalnav.searchhide .ac-gn-search-placeholder-bar:after{background-color:transparent}}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-search-placeholder-input{position:relative;z-index:3;-webkit-box-flex:1;-ms-flex:1;flex:1;line-height:2.11765em;padding:0;overflow:hidden;border-radius:4px}#ac-globalnav.searchshow .ac-gn-search-placeholder-input,#ac-globalnav.searchopen .ac-gn-search-placeholder-input,#ac-globalnav.searchhide .ac-gn-search-placeholder-input{background-color:#282828}}

#ac-globalnav .ac-gn-search-placeholder,#ac-globalnav .ac-gn-search-placeholder-input-text{font-size:14px;line-height:3.14286;font-weight:400;letter-spacing:-.01em;font-family:"SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-search-placeholder,#ac-globalnav .ac-gn-search-placeholder-input-text{font-size:17px;line-height:1.23543;font-weight:400;letter-spacing:-.022em;font-family:"SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif}}

#ac-globalnav .ac-gn-search-placeholder-input-text{display:none;border-bottom:none;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:2.11765em;color:#999;cursor:text}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-search-placeholder-input-text{padding-left:30px;display:block;line-height:2.11765em;-webkit-transform:translateY(-8px);transform:translateY(-8px);opacity:0;-webkit-transition:opacity 0.2s cubic-bezier(0.52,0.16,0.52,0.84) 0.16s,-webkit-transform .49s cubic-bezier(0.32,0.08,0.24,1) 0.15s;transition:opacity 0.2s cubic-bezier(0.52,0.16,0.52,0.84) 0.16s,-webkit-transform .49s cubic-bezier(0.32,0.08,0.24,1) 0.15s;transition:transform .49s cubic-bezier(0.32,0.08,0.24,1) 0.15s,opacity 0.2s cubic-bezier(0.52,0.16,0.52,0.84) 0.16s;transition:transform .49s cubic-bezier(0.32,0.08,0.24,1) 0.15s,opacity 0.2s cubic-bezier(0.52,0.16,0.52,0.84) 0.16s,-webkit-transform .49s cubic-bezier(0.32,0.08,0.24,1) 0.15s}#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-search-placeholder-input-text,#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-search-placeholder-input-text{-webkit-transform:none;transform:none;opacity:1;-webkit-transition:opacity 0.26s cubic-bezier(0.32,0.08,0.24,1) 0.1s,-webkit-transform 0.28s cubic-bezier(0.32,0.08,0.24,1) 0.08s;transition:opacity 0.26s cubic-bezier(0.32,0.08,0.24,1) 0.1s,-webkit-transform 0.28s cubic-bezier(0.32,0.08,0.24,1) 0.08s;transition:transform 0.28s cubic-bezier(0.32,0.08,0.24,1) 0.08s,opacity 0.26s cubic-bezier(0.32,0.08,0.24,1) 0.1s;transition:transform 0.28s cubic-bezier(0.32,0.08,0.24,1) 0.08s,opacity 0.26s cubic-bezier(0.32,0.08,0.24,1) 0.1s,-webkit-transform 0.28s cubic-bezier(0.32,0.08,0.24,1) 0.08s}}

@-webkit-keyframes ac-gn-searchview-searchhide{0%{opacity:1;-webkit-animation-timing-function:ease;animation-timing-function:ease}100%{opacity:0}}

@keyframes ac-gn-searchview-searchhide{0%{opacity:1;-webkit-animation-timing-function:ease;animation-timing-function:ease}100%{opacity:0}}

@-webkit-keyframes ac-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 ac-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 ac-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 ac-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 ac-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 ac-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 ac-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 ac-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)}}

#ac-globalnav .ac-gn-searchview{display:none}

#ac-globalnav.searchshow .ac-gn-searchview,#ac-globalnav.searchopen .ac-gn-searchview,#ac-globalnav.searchhide .ac-gn-searchview{display:block}

#ac-globalnav .ac-gn-searchview-content{position:absolute;top:0;left:16.66667%;width:66.66667%;height:100vh;z-index:3;pointer-events:none}

#ac-globalnav.searchhide .ac-gn-searchview-content{-webkit-animation:ac-gn-searchview-searchhide .2s both;animation:ac-gn-searchview-searchhide .2s both}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchview-content{top:0;left:0;bottom:0;right:0;width:100%;height:auto}#ac-globalnav.searchshow .ac-gn-searchview-content,#ac-globalnav.searchopen .ac-gn-searchview-content,#ac-globalnav.searchhide .ac-gn-searchview-content{-webkit-animation:none;animation:none}}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchview-bar{background:#000;border-bottom:1px solid #282828;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:auto;padding:.94118em 10px;position:relative;z-index:2;opacity:0}#ac-globalnav.searchopen .ac-gn-searchview-bar{opacity:1}}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchview-bar-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;max-width:584px;margin:0 auto}}

#ac-globalnav .ac-gn-searchview-close{right:9px;right:calc(9px + constant(safe-area-inset-right));position:absolute;z-index:3;width:38px;height:44px;top:0;opacity:1;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}

@supports (right:calc(max(0px))){#ac-globalnav .ac-gn-searchview-close{right:calc(max(9px,calc((env(safe-area-inset-right) - 9px) - ((env(safe-area-inset-right) - 38px) / 2))))}}

#ac-globalnav .ac-gn-searchview-close:hover,#ac-globalnav .ac-gn-searchview-close:active{opacity:.65}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchview-close:hover,#ac-globalnav .ac-gn-searchview-close:active{opacity:.8}}

#ac-globalnav.touch .ac-gn-searchview-close:hover,#ac-globalnav.touch .ac-gn-searchview-close:active{opacity:1}

#ac-globalnav .ac-gn-searchview-close:focus{outline-offset:-7px}

#ac-globalnav .ac-gn-searchview-close:focus:active{outline:none}

#ac-globalnav.searchshow .ac-gn-searchview-close{-webkit-transform:translateZ(0);transform:translateZ(0)}

#ac-globalnav.searchhide .ac-gn-searchview-close{-webkit-transform:translateZ(0);transform:translateZ(0)}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchview-close{display:none}}

#ac-globalnav .ac-gn-searchview-close-small{display:none}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchview-close-small{display:block;right:auto;position:relative;width:auto;height:36px;padding:0 8px;margin-left:10px}#ac-globalnav .ac-gn-searchview-close-small:focus{-webkit-box-shadow:inset 0 0 0 3px rgba(131,192,253,0.5);box-shadow:inset 0 0 0 3px rgba(131,192,253,0.5);outline:none;border-radius:5px}#ac-globalnav .ac-gn-searchview-close-small:focus[data-focus-method="mouse"]:not(input):not(textarea):not(select),#ac-globalnav .ac-gn-searchview-close-small:focus[data-focus-method="touch"]:not(input):not(textarea):not(select){-webkit-box-shadow:none;box-shadow:none}}

#ac-globalnav .ac-gn-searchview-close-cancel{font-size:17px;line-height:1.23543;font-weight:400;letter-spacing:-.022em;font-family:"SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;color:#6bf}

#ac-globalnav .ac-gn-searchview-close-wrapper{display:block;width:100%;height:100%}

#ac-globalnav .ac-gn-searchview-close-left,#ac-globalnav .ac-gn-searchview-close-right{height:18px;width:1px;background:#fff;position:absolute;display:block;top:11px;z-index:1}

#ac-globalnav .ac-gn-searchview-close-left{right:12px;-webkit-transform:scale3d(1,0.65,1);transform:scale3d(1,0.65,1);-webkit-transform-origin:0 100%;transform-origin:0 100%}

#ac-globalnav.searchshow .ac-gn-searchview-close-left{-webkit-animation:ac-gn-searchview-close-left-searchshow .3s both;animation:ac-gn-searchview-close-left-searchshow .3s both}

#ac-globalnav.searchopen .ac-gn-searchview-close-left{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}

#ac-globalnav.searchhide .ac-gn-searchview-close-left{-webkit-animation:ac-gn-searchview-close-left-searchhide .3s both;animation:ac-gn-searchview-close-left-searchhide .3s both}

#ac-globalnav .ac-gn-searchview-close-right{left:12px;-webkit-transform:scale3d(1,0.65,1);transform:scale3d(1,0.65,1);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}

#ac-globalnav.searchshow .ac-gn-searchview-close-right{-webkit-animation:ac-gn-searchview-close-right-searchshow .3s both;animation:ac-gn-searchview-close-right-searchshow .3s both}

#ac-globalnav.searchopen .ac-gn-searchview-close-right{-webkit-transform:rotate(45deg);transform:rotate(45deg)}

#ac-globalnav.searchhide .ac-gn-searchview-close-right{-webkit-animation:ac-gn-searchview-close-right-searchhide .3s both;animation:ac-gn-searchview-close-right-searchhide .3s both}

@-webkit-keyframes ac-gn-searchform-slide{0%{-webkit-transform:translate3d(100px,0,0);transform:translate3d(100px,0,0);-webkit-animation-timing-function:cubic-bezier(0.12,0.87,0.15,1);animation-timing-function:cubic-bezier(0.12,0.87,0.15,1)}100%{-webkit-transform:translateZ(0);transform:translateZ(0)}}

@keyframes ac-gn-searchform-slide{0%{-webkit-transform:translate3d(100px,0,0);transform:translate3d(100px,0,0);-webkit-animation-timing-function:cubic-bezier(0.12,0.87,0.15,1);animation-timing-function:cubic-bezier(0.12,0.87,0.15,1)}100%{-webkit-transform:translateZ(0);transform:translateZ(0)}}

@-webkit-keyframes ac-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 ac-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 ac-gn-searchinput-fade{0%{opacity:0}100%{opacity:1}}

@keyframes ac-gn-searchinput-fade{0%{opacity:0}100%{opacity:1}}

#ac-globalnav input,#ac-globalnav button{outline:none;border:none;background-color:transparent}

#ac-globalnav .ac-gn-searchform{height:44px;line-height:44px}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchform{-webkit-box-flex:1;-ms-flex:1;flex:1;height:2.11765em;line-height:2.11765em;padding:0}}

#ac-globalnav.searchshow .ac-gn-searchform{-webkit-animation:ac-gn-searchform-fade 0.4s 0.4s both;animation:ac-gn-searchform-fade 0.4s 0.4s both}

@media only screen and (max-width:767px){#ac-globalnav.searchshow .ac-gn-searchform{-webkit-animation:none;animation:none}}

#ac-globalnav .ac-gn-searchform-wrapper{position:relative;z-index:2}

#ac-globalnav.searchshow .ac-gn-searchform-wrapper{-webkit-animation:ac-gn-searchform-slide 1s 0.4s both;animation:ac-gn-searchform-slide 1s 0.4s both}

@media only screen and (max-width:767px){#ac-globalnav.searchshow .ac-gn-searchform-wrapper{-webkit-animation:none;animation:none}}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchform-wrapper{right:200%;background:#282828;border-radius:4px;padding:0;height:2.11765em}#ac-globalnav.searchopen .ac-gn-searchform-wrapper{right:auto}}

#ac-globalnav .ac-gn-searchform-input{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:17px;line-height:1.29412;letter-spacing:-.021em;font-family:"SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;color:#fff;outline:none;width:calc(100% - 42px - 16px);height:44px;position:absolute;padding:0 17px 0 42px}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchform-input{font-size:17px;line-height:1.23543;font-weight:400;letter-spacing:-.022em;font-family:"SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif}}

#ac-globalnav .ac-gn-searchform-input:focus[data-focus-method="key"]{-webkit-box-shadow:inset 0 0 0 3px rgba(131,192,253,0.5);box-shadow:inset 0 0 0 3px rgba(131,192,253,0.5);outline:none;border-radius:4px}

#ac-globalnav .ac-gn-searchform-input:focus[data-focus-method="key"][data-focus-method="mouse"]:not(input):not(textarea):not(select),#ac-globalnav .ac-gn-searchform-input:focus[data-focus-method="key"][data-focus-method="touch"]:not(input):not(textarea):not(select){-webkit-box-shadow:none;box-shadow:none}

.touch#ac-globalnav.searchshow .ac-gn-searchform-input{-webkit-transform:translateY(-200px);transform:translateY(-200px)}

.touch#ac-globalnav.searchopen .ac-gn-searchform-input{-webkit-animation:ac-gn-searchinput-fade 0.2s both;animation:ac-gn-searchinput-fade 0.2s both}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchform-input{height:1.71409em;padding:3px 30px 4px;width:calc(100% - (30px * 2));position:relative}#ac-globalnav .ac-gn-searchform-input:focus[data-focus-method="key"]{-webkit-box-shadow:0 0 0 3px rgba(131,192,253,0.5);box-shadow:0 0 0 3px rgba(131,192,253,0.5);outline:none;border-radius:4px}#ac-globalnav .ac-gn-searchform-input:focus[data-focus-method="key"][data-focus-method="mouse"]:not(input):not(textarea):not(select),#ac-globalnav .ac-gn-searchform-input:focus[data-focus-method="key"][data-focus-method="touch"]:not(input):not(textarea):not(select){-webkit-box-shadow:none;box-shadow:none}.touch#ac-globalnav.searchshow .ac-gn-searchform-input{-webkit-transform:none;transform:none}.touch#ac-globalnav.searchopen .ac-gn-searchform-input{-webkit-animation:none;animation:none}}

#ac-globalnav .ac-gn-searchform-input::-webkit-input-placeholder{color:#888;opacity:1}

#ac-globalnav .ac-gn-searchform-input:-ms-input-placeholder{color:#888;opacity:1}

#ac-globalnav .ac-gn-searchform-input::-ms-input-placeholder{color:#888;opacity:1}

#ac-globalnav .ac-gn-searchform-input::placeholder{color:#888;opacity:1}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchform-input::-webkit-input-placeholder{color:#999}#ac-globalnav .ac-gn-searchform-input:-ms-input-placeholder{color:#999}#ac-globalnav .ac-gn-searchform-input::-ms-input-placeholder{color:#999}#ac-globalnav .ac-gn-searchform-input::placeholder{color:#999}}

#ac-globalnav .ac-gn-searchform-input::-ms-clear{display:none;width:0;height:0}

#ac-globalnav .ac-gn-searchform-submit{left:0;position:absolute;z-index:1;top:0;width:40px;height:44px;cursor:pointer;background-repeat:no-repeat;background-image:url("https://www.apple.com/ac/globalnav/4/en_US/images/globalnav/search/image_large.svg");background-position:50% 50%;background-repeat:no-repeat;-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)}

#ac-globalnav.no-svg .ac-gn-searchform-submit{background-image:url("https://www.apple.com/ac/globalnav/4/en_US/images/globalnav/search/image_large.png")}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchform-submit{background-repeat:no-repeat;background-image:url("https://www.apple.com/ac/globalnav/4/en_US/images/globalnav/search/image_small.svg")}#ac-globalnav.no-svg .ac-gn-searchform-submit{background-image:url("https://www.apple.com/ac/globalnav/4/en_US/images/globalnav/search/image_small.png")}}

#ac-globalnav .ac-gn-searchform-submit:hover,#ac-globalnav .ac-gn-searchform-submit:active{opacity:.65}

#ac-globalnav.touch .ac-gn-searchform-submit:hover,#ac-globalnav.touch .ac-gn-searchform-submit:active{opacity:1}

#ac-globalnav .ac-gn-searchform-submit:focus{outline-offset:-7px}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchform-submit:focus{-webkit-box-shadow:0 0 0 3px rgba(131,192,253,0.5);box-shadow:0 0 0 3px rgba(131,192,253,0.5);outline:none;border-radius:4px}#ac-globalnav .ac-gn-searchform-submit:focus[data-focus-method="mouse"]:not(input):not(textarea):not(select),#ac-globalnav .ac-gn-searchform-submit:focus[data-focus-method="touch"]:not(input):not(textarea):not(select){-webkit-box-shadow:none;box-shadow:none}}

#ac-globalnav .ac-gn-searchform-submit[disabled]{opacity:1;cursor:default}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchform-submit{width:26px;height:2.11765em;background-position:left 8px center}}

#ac-globalnav .ac-gn-searchform-reset{display:none;position:absolute;z-index:1;top:0;cursor:pointer}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchform-reset{right:0;cursor:default;display:block;opacity:0;height:2.11765em;width:30px;height:100%;pointer-events:none;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease}#ac-globalnav .ac-gn-searchform-reset:focus{outline:none}#ac-globalnav .ac-gn-searchform-reset:focus .ac-gn-searchform-reset-background{-webkit-box-shadow:0 0 0 3px rgba(131,192,253,0.5);box-shadow:0 0 0 3px rgba(131,192,253,0.5);outline:none;border-radius:50%}#ac-globalnav .ac-gn-searchform-reset:focus .ac-gn-searchform-reset-background[data-focus-method="mouse"]:not(input):not(textarea):not(select),#ac-globalnav .ac-gn-searchform-reset:focus .ac-gn-searchform-reset-background[data-focus-method="touch"]:not(input):not(textarea):not(select){-webkit-box-shadow:none;box-shadow:none}#ac-globalnav .ac-gn-searchform-reset:focus:active .ac-gn-searchform-reset-background{-webkit-box-shadow:none;box-shadow:none}}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchform-reset-background{right:8px;display:block;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);position:absolute}}

@media only screen and (max-width:767px) and (max-width:767px){#ac-globalnav .ac-gn-searchform-reset-background{width:15px;height:16px;background-size:15px 16px;background-repeat:no-repeat;background-image:url("https://www.apple.com/ac/globalnav/4/en_US/images/globalnav/search/reset_small.svg")}#ac-globalnav.no-svg .ac-gn-searchform-reset-background{background-image:url("https://www.apple.com/ac/globalnav/4/en_US/images/globalnav/search/reset_small.png")}}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchform.with-reset .ac-gn-searchform-reset{cursor:pointer;opacity:1;pointer-events:auto}}

@-webkit-keyframes ac-gn-searchresults-show{0%{opacity:0;-webkit-animation-timing-function:ease;animation-timing-function:ease}100%{opacity:1}}

@keyframes ac-gn-searchresults-show{0%{opacity:0;-webkit-animation-timing-function:ease;animation-timing-function:ease}100%{opacity:1}}

@-webkit-keyframes ac-gn-searchresults-show-small{0%{-webkit-transform:translateY(-44px);transform:translateY(-44px);opacity:0}100%{-webkit-transform:none;transform:none;opacity:1}}

@keyframes ac-gn-searchresults-show-small{0%{-webkit-transform:translateY(-44px);transform:translateY(-44px);opacity:0}100%{-webkit-transform:none;transform:none;opacity:1}}

@-webkit-keyframes ac-gn-searchresults-items-show{0%{opacity:0;-webkit-transform:translateX(100px);transform:translateX(100px);-webkit-animation-timing-function:ease;animation-timing-function:ease}100%{opacity:1;-webkit-transform:none;transform:none}}

@keyframes ac-gn-searchresults-items-show{0%{opacity:0;-webkit-transform:translateX(100px);transform:translateX(100px);-webkit-animation-timing-function:ease;animation-timing-function:ease}100%{opacity:1;-webkit-transform:none;transform:none}}

#ac-globalnav .ac-gn-searchresults{font-size:14px;line-height:2;font-weight:400;letter-spacing:-.01em;font-family:"SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;display:none;background:#fff;border-top:none;color:#888;max-height:calc(100% - 44px);overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchresults{font-size:14px;line-height:3.07143;letter-spacing:-.016em;font-family:"SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif}}

#ac-globalnav.searchshow .ac-gn-searchresults,#ac-globalnav.searchopen .ac-gn-searchresults,#ac-globalnav.searchhide .ac-gn-searchresults{display:block}

#ac-globalnav.searchshow .ac-gn-searchresults{-webkit-animation:ac-gn-searchresults-show .2s .2s both;animation:ac-gn-searchresults-show .2s .2s both}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchresults{background:transparent;border:none;color:#999;max-height:none;padding-bottom:0;position:absolute;top:4.85714em;left:0;bottom:0;right:0;z-index:1}#ac-globalnav.searchshow .ac-gn-searchresults{-webkit-animation:ac-gn-searchresults-show-small .36s cubic-bezier(0.32,0.08,0.24,1) both;animation:ac-gn-searchresults-show-small .36s cubic-bezier(0.32,0.08,0.24,1) both}#ac-globalnav.searchopen .ac-gn-searchresults{opacity:1;-webkit-transform:none;transform:none}#ac-globalnav.searchhide .ac-gn-searchresults{animation:ac-gn-searchresults-show-small .36s cubic-bezier(0.8,0,0.68,0.92) reverse both}}

#ac-globalnav .ac-gn-searchresults-section{border-top:1px solid #d6d6d6;margin:0 40px;padding:24px 0 18px}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchresults-section{border-color:#282828;margin:0;padding:19px 0 15px}}

#ac-globalnav .ac-gn-searchresults-section:first-child{border-top:none}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchresults-section-wrapper{padding:0 40px;max-width:584px;margin:0 auto}}

#ac-globalnav .ac-gn-searchresults-header{font-size:11px;line-height:1;letter-spacing:-.008em;font-family:"SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;text-transform:uppercase;color:#888}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchresults-header{color:#999}}

#ac-globalnav .ac-gn-searchresults-list{list-style:none;padding-top:5px}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchresults-list{padding-top:8px}}

#ac-globalnav .ac-gn-searchresults-item{margin:6px -32px}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchresults-item{margin:0;border-top:1px solid #282828}#ac-globalnav .ac-gn-searchresults-item:first-child{border-top:none}}

#ac-globalnav .ac-gn-searchresults-link{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#888;display:block;padding:0 48px;text-decoration:none}

#ac-globalnav .ac-gn-searchresults-link b{color:#333}

#ac-globalnav .ac-gn-searchresults-link.current{background-color:#f2f2f2}

#ac-globalnav .ac-gn-searchresults-link.current,#ac-globalnav .ac-gn-searchresults-link.current b{color:#0070c9}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchresults-link{color:#999;padding:0}#ac-globalnav .ac-gn-searchresults-link b{color:#fff}#ac-globalnav .ac-gn-searchresults-link.current{background-color:transparent}#ac-globalnav .ac-gn-searchresults-link.current,#ac-globalnav .ac-gn-searchresults-link.current b{color:#6bf}}

#ac-globalnav .ac-gn-searchresults-link-suggestions{background-repeat:no-repeat;background-image:url("https://www.apple.com/ac/globalnav/4/en_US/images/globalnav/search/suggestions_large.svg");padding-left:70px;background-position:48px -1px}

#ac-globalnav.no-svg .ac-gn-searchresults-link-suggestions{background-image:url("https://www.apple.com/ac/globalnav/4/en_US/images/globalnav/search/suggestions_large.png")}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchresults-link-suggestions{background-repeat:no-repeat;background-image:url("https://www.apple.com/ac/globalnav/4/en_US/images/globalnav/search/suggestions_small.svg")}#ac-globalnav.no-svg .ac-gn-searchresults-link-suggestions{background-image:url("https://www.apple.com/ac/globalnav/4/en_US/images/globalnav/search/suggestions_small.png")}}

#ac-globalnav .ac-gn-searchresults-link-suggestions.current{background-position:48px -33px}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchresults-link-suggestions{background-position:left -1px;padding-left:18px}#ac-globalnav .ac-gn-searchresults-link-suggestions.current{background-position:left -44px}}

#ac-globalnav .ac-gn-searchresults-link-defaultlinks{color:#333}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchresults-link-defaultlinks{color:#fff}}

#ac-globalnav .ac-gn-searchresults-animated{-webkit-animation:ac-gn-searchresults-items-show 0.4s both;animation:ac-gn-searchresults-items-show 0.4s both}

#ac-globalnav.searchhide .ac-gn-searchresults-animated{-webkit-animation:none;animation:none}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchresults-animated{-webkit-animation:none;animation:none}}

#ac-globalnav .ac-gn-searchresults-animated:nth-child(1){-webkit-animation-delay:.22s;animation-delay:.22s}

#ac-globalnav .ac-gn-searchresults-animated:nth-child(2){-webkit-animation-delay:.24s;animation-delay:.24s}

#ac-globalnav .ac-gn-searchresults-animated:nth-child(3){-webkit-animation-delay:.26s;animation-delay:.26s}

#ac-globalnav .ac-gn-searchresults-animated:nth-child(4){-webkit-animation-delay:.28s;animation-delay:.28s}

#ac-globalnav .ac-gn-searchresults-animated:nth-child(5){-webkit-animation-delay:.3s;animation-delay:.3s}

#ac-globalnav .ac-gn-searchresults-animated:nth-child(6){-webkit-animation-delay:.32s;animation-delay:.32s}

#ac-globalnav .ac-gn-searchresults-animated:nth-child(7){-webkit-animation-delay:.34s;animation-delay:.34s}

#ac-globalnav .ac-gn-searchresults-animated:nth-child(8){-webkit-animation-delay:.36s;animation-delay:.36s}

#ac-globalnav .ac-gn-searchresults-animated:nth-child(9){-webkit-animation-delay:.38s;animation-delay:.38s}

#ac-globalnav .ac-gn-searchresults-animated:nth-child(10){-webkit-animation-delay:.4s;animation-delay:.4s}

#ac-globalnav .ac-gn-searchresults-animated.ac-gn-searchresults-header{-webkit-animation-delay:.2s;animation-delay:.2s}

#ac-globalnav .ac-gn-searchresults-noresults{display:block;padding:0 32px;color:#888;line-height:1.25;white-space:normal}

@media only screen and (max-width:767px){#ac-globalnav .ac-gn-searchresults-noresults{color:#ccc;padding:0}}

#ac-globalnav .ac-gn-searchresults-count{position:absolute;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(0px 0 99.9% 99.9%);clip-path:inset(0px 0 99.9% 99.9%);overflow:hidden;height:1px;width:1px;padding:0;border:0}

3. Code script chèn trước </body>

Copy

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>

<script>//<![CDATA[

$('.ac-gn-link-search').click(function(e) {

  e.stopPropagation();

  $('#ac-globalnav').addClass('searchshow').delay(1000).queue(function() {

    $(this).removeClass('searchshow').addClass('searchopen')

    $('#ac-globalnav .ac-gn-searchform-input').focus();

    $(this).dequeue();

  });

});

$('.ac-gn-searchform-input').click(function(e) {

  e.stopPropagation();

});

$('html,.ac-gn-searchview-close').click(function() {

  if ($('#ac-globalnav').hasClass('searchopen')) {

    $('#ac-globalnav').removeClass('searchopen');

    $('#ac-globalnav').addClass('searchhide').delay(1000).queue(function() {

      $(this).removeClass('searchhide');

      $(this).dequeue();

    });

  }

})

$('#ac-globalnav .ac-gn-bag').click(function(e) {

  e.stopPropagation();

  $('#ac-globalnav').toggleClass('with-bagview');

});

$('#ac-globalnav .ac-gn-bagview-content').click(function(e) {

  e.stopPropagation();

});

$('html').click(function() {

  $('#ac-globalnav').removeClass('with-bagview');

})

$('.ac-gn-search-placeholder-container').click(function(e) {

  e.stopPropagation();

  $('#ac-globalnav').addClass('searchshow').delay(1000).queue(function() {

    $(this).removeClass('searchshow').addClass('searchopen');

    $('#ac-globalnav .ac-gn-searchform-input').focus();

    $(this).dequeue();

  });

});

$('.ac-gn-searchview-close').click(function() {

  $('#ac-globalnav').removeClass('searchopen');

  $('#ac-globalnav').addClass('searchhide').delay(1000).queue(function() {

    $(this).removeClass('searchhide');

    $(this).dequeue();

  });

});

//]]></script>

Xem demo tại: https://vietdailymotion.blogspot.com

Nội dung chính