html , body { width: 100%; height: 100%; margin: 0; padding: 0; font-family: 'Roboto', sans-serif; font-size: 14px; }
		* { box-sizing: border-box; }
		h1 { font-size: 2.5em; font-weight: 400; line-height: 1.6em; }
     h1 a { text-decoration: none; background-color: #e91e63; box-shadow: 0 0 10px rgba(0,0,0,0.2); border-radius: 0.5em; color: #FFF; padding: 0.1em 0.3em; border: 2px solid #FFF; }
		article { padding: 4em 3em; }
		label { display: block; line-height: 2em; }
		label input { width: 1.3em; height: 1.3em; margin: 0 0.5em 0 0; vertical-align: middle; }
		fieldset { border: 0; border-top: 2px solid #3f51b5; margin: 0; padding: 1em; }
		legend { font-size: 1.7em; color: #3f51b5; }
		.row { margin: 0 -1em; overflow: hidden; }
		.col50 { float: left; width: 50%; padding: 0 1em; }
		header { background-color: #3f51b5; padding: 6em 3em 3em 3em; color: #FFF; box-shadow: 0 0 10px rgba(0,0,0,0.2); position: relative; }
		header > h1 { margin: 0; }
		header > .btn { position: absolute; bottom: -2em; right: 1.5em; font-size: 1.5em; }
		header.small > .btn { font-size: 1.2em; }
		header.large > .btn { font-size: 1.8em; }
		header.xl > .btn { font-size: 3em; }
		.btn { display: inline-block; width: 4em; height: 4em; background-color: #FFF; color: #9e9e9e; box-shadow: 0 0 10px rgba(0,0,0,0.2); border-radius: 2em; overflow: hidden; transition: all 0.5s ease; }
		.btn:hover { box-shadow: 0 0 10px rgba(0,0,0,0.4); }
		.btn:active { transform: scale(1.1,1.1); }
		.btn > span { display: block; position: relative; width: 2em; height: 2em; transition: transform 0.5s ease; overflow: hidden; margin: 1em; }
		.btn > span > span { display: block; background-color: #9e9e9e; position: absolute; top: 0; left: 0; width: 2em; height: 2em; transition: all 0.5s ease; }
		.btn.play > span { transform: translate(1em,0) scale(1.6,1); }
		.btn.play > span > span { transform: rotate(-45deg) translate(-1em, -1em) scale(1,1); }
		.btn.pause > span > span { transform: scale(0.4,1) translate(-1.6em, 0); }
		.btn.pause > span > span.s3 { transform: scale(0.4,1) translate(1.6em, 0); }
		.btn.stop > span { transform: scale(0.8,0.8); }
		.btn.menu > span > span { transform: scale(1,0.2) translate(0,-3em); }
		.btn.menu > span > span.s2 { transform: scale(1,0.2) translate(0,0); }
		.btn.menu > span > span.s3 { transform: scale(1,0.2) translate(0,3em); }
		.btn.close > span  { transform: rotate(45deg); }
		.btn.close > span > span , .btn.plus > span > span { transform: scale(1,0.2); }
		.btn.close > span > span.s3 , .btn.plus > span > span.s3 { transform: scale(0.2,1); }
		.btn.minus > span > span { transform: scale(1,0.2); }
		.btn.more > span > span { transform: scale(0.2,0.2) translate(-3em,0); border-radius: 2em; }
		.btn.more > span > span.s2 { transform: scale(0.2,0.2) translate(0,0); }
		.btn.more > span > span.s3 { transform: scale(0.2,0.2) translate(3em,0); }
		.btn.topArrow > span > span { width: 0.4em; height: 1.8em; transform: translate(0.8em,0.2em); }
		.btn.topArrow > span > span.s2 { transform-origin: 0 0; height: 1.4em; transform: translate(1em,0) rotate(45deg); }
		.btn.topArrow > span > span.s3 { transform-origin: 100% 0; height: 1.4em; transform: translate(0.6em,0) rotate(-45deg); }
		.btn.bottomArrow > span > span { width: 0.4em; height: 1.8em; transform: translate(0.8em,0); }
		.btn.bottomArrow > span > span.s2 { transform-origin: 100% 100%; height: 1.4em; transform: translate(0.6em,0.6em) rotate(45deg); }
		.btn.bottomArrow > span > span.s3 { transform-origin: 0 100%; height: 1.4em; transform: translate(1em,0.6em) rotate(-45deg); }
		.btn.rightArrow > span > span { width: 1.8em; height: 0.4em; transform: translate(0,0.8em); }
		.btn.rightArrow > span > span.s2 { transform-origin: 100% 0; width: 1.4em; transform: translate(0.6em,1em) rotate(45deg); }
		.btn.rightArrow > span > span.s3 { transform-origin: 100% 100%; width: 1.4em; transform: translate(0.6em,0.6em) rotate(-45deg); }
		.btn.leftArrow > span > span { width: 1.8em; height: 0.4em; transform: translate(0.2em,0.8em); }
		.btn.leftArrow > span > span.s2 { transform-origin: 0 100%; width: 1.4em; transform: translate(0,0.6em) rotate(45deg); }
		.btn.leftArrow > span > span.s3 { transform-origin: 0 0; width: 1.4em; transform: translate(0,1em) rotate(-45deg); }
		.btn.checked > span > span { width: 1em; height: 0.4em; transform-origin: 100% 100%; transform: translate(-0.3em,1.4em) rotate(45deg); }
		.btn.checked > span > span.s3 { width: 1.8em; transform-origin: 0 100%; transform: translate(0.7em,1.4em) rotate(-45deg); }