header {
margin-top: 100px; margin-bottom: 20px; .title { display: block; font-weight: 300; font-size: 6.0rem; letter-spacing: -.1rem; line-height: 1.2; margin-bottom: 0; .subtitle { font-size: 50%; } } .description { display: block; font-size: 22px; font-weight: 300; letter-spacing: -0.8px; line-height: 29.7px; margin-bottom: 10px; } .social-links { display: block; text-align: center; li { display: inline; margin-left: 20px; margin-right: 20px; } @media (min-width: 40.0rem) { display: inline-block; list-style: none; margin: 0; padding: 0; float: right; } } .header-nav { ul { list-style: none; margin: 0; padding: 0; li { display: inline; text-transform: lowercase; font-size: 2.2rem; margin-right: 20px; } } } &.small { position: static; @media (min-width: 40.0rem) { position: relative; } .title { display: inline-block; font-weight: 300; font-size: 3.4rem; letter-spacing: -.1rem; line-height: 1.2; margin-bottom: 0; .subtitle { font-size: 50%; } } .header-nav { font-size: 2.0rem; @media (min-width: 40.0rem) { position: absolute; display: inline-block; bottom: 0; right: 0; text-align: right; } } }
}