///
/// 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;
			}
		}
	}
}