/// /// Future Imperfect by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) ///
/* Intro */
#intro { .logo { border-bottom: 0; display: inline-block; margin: 0 0 (_size(element-margin) * 0.5) 0; overflow: hidden; position: relative; width: 4em; &:before { background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100" preserveAspectRatio="none" zoomAndPan="disable"><polygon points="0,0 100,0 100,25 50,0 0,25" style="fill:#{_palette(bg-alt)}" /><polygon points="0,100 100,100 100,75 50,100 0,75" style="fill:#{_palette(bg-alt)}" /></svg>'); background-position: top left; background-repeat: no-repeat; background-size: 100% 100%; content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } img { display: block; margin-left: -0.25em; width: 4.5em; } } header { h2 { font-size: 2em; font-weight: _font(weight-heading-extrabold); } p { font-size: 0.8em; } } @include breakpoint(large) { margin: 0 0 _size(section-spacing) 0; text-align: center; header { h2 { font-size: 2em; } p { font-size: 0.7em; } } } @include breakpoint(small) { margin: 0 0 _size(section-spacing-small) 0; padding: 1.25em 0; > :last-child { margin-bottom: 0; } .logo { margin: 0 0 (_size(element-margin) * 0.25) 0; } header { h2 { font-size: 1.25em; } > :last-child { margin-bottom: 0; } } } }