header { width: 100%; background-color: #00b24f; padding: 0 10px } header .header-content { height: 105px; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; align-items: center; -webkit-align-items: center; margin: 0 10px } header .header-content--logo { position: relative; top: 3px; left: 4px } header .header-content--logo img { max-width: 132px; width: 100%; height: 53px; } header .header-content--search-bar { max-width: 520px; width: 100%; height: 55px; position: relative; cursor: pointer; left: -29px; border: 1px solid #ccc; border-radius: 4px } header .header-content--search-bar input { width: 100%; height: 100%; pointer-events: none; border-radius: 5px; outline: none; border: none; border-radius: 4px } header .header-content--search-bar .placeholder-text { position: absolute; top: 53%; transform: translateY(-50%) } header .header-content--search-bar i { position: absolute; top: 50%; transform: translateY(-50%) } header .header-content--search-bar .placeholder-text { left: 10px; color: #ccc; font-family: RobotoLight } header .header-content--search-bar:hover .placeholder-text { color: #666 } header .header-content--search-bar i { right: 15px; color: #1eade9; font-size: 2.1rem } header .header-content--mobile-cta .mobile-search i { color: #fff; font-size: 2.1rem; cursor: pointer } header .header-content--cta { position: relative; top: 5px; right: 15px } header .header-content--cta a { color: #fff; text-decoration: none; font-family: RobotoRegular } header .header-content--cta .divider { color: #fff; margin: 0 1.5rem 0 1.3rem; pointer-events: none; position: relative } header .header-content--cta .divider:before { content: ""; pointer-events: none; position: absolute; width: 1px; background-color: #fff; height: 20px; top: 0; left: -1px } header .header-content--mobile-cta { display: none } header .header-content--mobile-cta .burger-menu { cursor: pointer; margin: 0 0 0 2rem } header .header-content--mobile-cta .burger-menu .line { width: 25px; height: 3px; background-color: #fff; margin: .5rem auto; pointer-events: none } header .header-content--mobile-cta .burger-menu-dropdown { position: fixed; width: 100%; height: 100vh; top: 0; right: -100%; background-color: #fff; z-index: 2021; transition: right .25s ease-in-out } header .header-content--mobile-cta .burger-menu-dropdown.open { right: 0 } header .header-content--mobile-cta .burger-menu-dropdown li { padding: 2rem } header .header-content--mobile-cta .burger-menu-dropdown li a { font-size: 1.6rem; text-decoration: none } header .header-content--mobile-cta .burger-menu-dropdown li:first-child { background-color: #00b24f; display: flex; display: -webkit-flex; justify-content: space-between; align-items: center; -webkit-align-items: center } header .header-content--mobile-cta .burger-menu-dropdown li:first-child img { cursor: pointer; max-width: 132px; width: 100%; height: 53px; } header .header-content--mobile-cta .burger-menu-dropdown li:first-child .burger-menu .line:first-child { -webkit-transform: translateY(8px) rotate(45deg); transform: translateY(8px) rotate(45deg) } header .header-content--mobile-cta .burger-menu-dropdown li:first-child .burger-menu .line:nth-child(2) { opacity: 0 } header .header-content--mobile-cta .burger-menu-dropdown li:first-child .burger-menu .line:last-child { -webkit-transform: translateY(-8px) rotate(-45deg); transform: translateY(-8px) rotate(-45deg) } @media screen and (max-width: 991px) { header .header-content { height: 78px; margin: 0 } header .header-content--search-bar { max-width: 320px; width: 100%; height: 40px } } @media screen and (max-width: 768px) { header .header-content--search-bar, header .header-content--cta { display: none } header .header-content--mobile-cta { display: block; display: -webkit-flex; align-items: center; -webkit-align-items: center } } @-webkit-keyframes showFadeIn { from { opacity: 0; z-index: -1 } to { opacity: 1; z-index: 3000 } } @keyframes showFadeIn { from { opacity: 0; z-index: -1 } to { opacity: 1; z-index: 3000 } }