header { box-shadow: 0 1px 10px -6px rgba(0,0,0,.42),0 1px 10px 0 rgba(0,0,0,.12),0 4px 5px -2px rgba(0,0,0,.1); position: fixed; left: 0; top: 0; width: 100%; z-index: 2000; background: $color-white; .inside { padding: 1.5rem 3rem 0 3rem; height: 6.5rem; display: flex; justify-content: space-between; @media (max-width: 412px) { padding-left: 2rem; padding-right: 2rem; } @media (max-width: 500px) { height: 11rem; display: block; } @media (max-width: 412px) { height: 12rem; } .logo { display: flex; @media (min-width: 501px) and (max-width: 768px) { display: block; } a.home { font-weight: bold; color: #3c4952; margin-top: -5px; padding: 0 0 0 30px; text-decoration: none; @media (min-width: 501px) and (max-width: 768px) { display: block; padding: 10px 0 0 12px; } &:before { color: #3c4952 !important; content: "|"; padding: 0 20px 0 0; @media (min-width: 501px) and (max-width: 768px) { content: ""; display: none; } } &:hover { color: #788187; } } } .status { @media (max-width: 500px) { padding-top: 20px; } } } img { height: 3rem; @media (max-width: 800px) { height: 2rem; } } form { margin-top: -0.375rem; } .status { } }