.subNav { display: flex; flex-direction: row; font-family: 'Orbitron-Medium', sans-serif; line-height: 1.6; margin: .5em 0; padding: 0; border: 1px solid #a2a2a2; background-color: #FF8100; border-radius: .25em; } .subNav > a { color: #34495e; text-decoration: none; padding: .25em .5em; text-transform: uppercase; text-align: center; display: block; color: #34495e; } .subNav > a:last-child{ margin-left: auto; } .subNav > a > amp-img{ max-width: 1em; } .subNav > a > img{ height: 1.75em; width: auto; display: block; } .subNav > a > span{ display: none; } .subNav a:hover { background-color: #FFAE00; color: #718daa; } /* ================================= Media Queries ==================================== */ @media (min-width: 640px) { .subNav { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; } .subNav > a:last-child{ display: none; } .subNav > a{ display: flex; justify-content: flex-end; align-items: center; } .subNav > a > amp-img, .subNav > a > img{ display: none; } .subNav > a > span{ display: initial; text-align: right; } } @media (min-width: 1280px) { .subNav{ justify-content: center; } .subNav > a > amp-img, .subNav > a > img{ display: initial; } .subNav > a{ justify-content: flex-start; } .subNav > a > span{ text-align: initial; } }