.header-top__cta { align-items: center; display: none; height: 50%; padding: 9px 9px 9px; position: absolute; right: 0; top: 0; } @media all and (min-width: 425px) { .header-top__cta { display: flex; } } /* Overrides The Keyword styles to match Cloud org designs */ .h-c-header__company-logo-img, .h-c-header__drawer-company-logo-img { width: 181px; height: 28px; } .h-c-header.h-c-header--corporate-initiative { z-index: 102; position: relative; } .h-c-header--corporate-initiative .h-c-header__nav { margin-left: 36px; } .h-c-header__initiative-logo-text { font-size: 16px; } @media screen and (min-width: 900px) { .h-c-header__initiative-logo-text { font-size: 22px; } } .uni-header-search-button__icon { fill: rgba(0, 0, 0, 0.54); height: 22px; top: 10px; } .h-c-header__nav-li { margin-left: 28px; } .h-c-header__nav-li:first-child { margin-left: 0; } .h-c-header__initiative-logo { clear: both; } .h-c-header__bar { border-bottom: 1px solid #ddd; } .h-c-header__bar--no-shadow { box-shadow: none; } /* Mobile menu dropdown */ .mobile-drawer { background: #fff; position: fixed; width: 100%; top: 0; transform: translateY(-350px); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .mobile-drawer.h-is-visible { transform: translateY(112px); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .mobile-drawer__nav { clear: both; } .mobile-drawer__nav-list { margin: 0; padding: 0; } .mobile-drawer__nav-li { padding: 12px 16px; font-family: "Google Sans", Helvetica, Arial, sans-serif; } .mobile-drawer__nav-li:last-child { margin-bottom: 20px; } .mobile-drawer__nav-li a { display: block; } .h-c-header-menu-dropdown__button { display: flex; float: right; height: 56px; cursor: pointer; } @media screen and (min-width: 900px) { .h-c-header-menu-dropdown__button { display: none; } } .h-c-header-menu-dropdown__label { display: flex; flex-direction: column; justify-content: center; margin-right: 8px; font-size: 14px; font-family: "Google Sans", Helvetica, Arial, sans-serif; letter-spacing: .2px; color: rgba(0, 0, 0, 0.54); } .h-c-header-menu-dropdown__svg { display: flex; flex-direction: column; justify-content: center; width: 12px; height: 100%; margin: 1px 20px 0 0; fill: rgba(0, 0, 0, 0.4); transform: rotate(180deg); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .h-c-header-menu-dropdown__svg--up { transform: rotate(0); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .h-c-header__nav-li { position: relative; display: flex; align-items: center; } .h-c-header__nav-li a { margin-right: 10px; } .h-c-header__nav-li:hover svg { transform: scaleY(-1); } .h-c-header__nav-li:hover .sub-nav { display: block; } .sub-nav { width: 240px; height: auto; position: absolute; left: 0; top: 85%; z-index: 100; background: #fff; border: .0625rem solid #e0e0e0; padding: .875rem 1.1875rem; display: none; border-radius: 7px; } .sub-nav__item { width: 100%; margin-bottom: 5px; } .sub-nav__item.h-c-header__nav-li { margin-left: 12px; } .sub-nav__item.h-c-header__nav-li:first-child { margin-left: 12px; } .sub-nav__item a { text-decoraion: none; color: #5f6368; cursor: pointer; } .sub-nav__item a:hover { color: #000; } .sub-nav__item:nth-child(5) { height: 20px; } .sub-nav__item:nth-child(5) svg { transform: rotate(-90deg); margin-left: 100px; } .sub-nav__item:nth-child(5):hover .sub-nav__third-level { display: block; } .sub-nav__item:nth-child(5):hover svg { float: right; } .sub-nav__item .sub-nav__third-level { position: absolute; top: -10px; left: 90%; width: 240px; z-index: 100; background: #fff; border: .0625rem solid #e0e0e0; padding: .875rem 1.1875rem; border-radius: 7px; display: none; } .sub-nav__item .sub-nav__third-level li { margin-bottom: 5px; }