body { 
	position: relative;
	
	background: white;
	font-family: 'Montserrat', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 14px;
	/*line-height: 18px;*/
	color: #222222;

	background: #f5f7f9 url(/playground/img/page-bg.png) left top fixed;
	background-size: 98px;

	margin: 0;
}

h1 {
	margin: 10px 0;
}

h2 {
	margin: 20px 0;

	font-family: 'Montserrat', sans-serif;
	font-size: 32px;
}

.header h2 {
	margin: 29px 0 15px;
}

h3 {
	margin: 14px 0;
}



p,
pre {
	margin: 14px 0;
}

ol,
ul {
	margin: 14px 0;
}

ol,
ul {
	padding: 0 0 0 40px;
}

.header {
	background: #949aa6 url(/playground/img/header-bg.jpg) left top fixed;
	background-size: 200px;

	padding: 30px 0 0;
	color: #fff;

	text-shadow: 0 -1px 0 rgba(41, 52, 63, .2);
	-webkit-font-smoothing: antialiased;
}

.header + .divider {
	margin-top: 0;
}

.headline {
}

.header h1 {
	display: inline-block;
	margin: 0 20px 0 0;

	font-family: 'Changa One', Arial, sans-serif;
	font-size: 69px;
	text-transform: uppercase;
	line-height: 61px;
}

.header h3 {
	margin: 10px 0;
	font-weight:400;
}

.headline > .icon {
	display: inline-block;
	margin-right: 9px;
	vertical-align: -7px;
}

.instructions {
	list-style-type: none;
	margin-bottom: 60px;
	margin-top: -5px;
}

.instructions li {
	padding: 7px 0;
	font-size: 17px;
}

.instructions .bullet {
	float: left;
	margin: -3px 0 0 -39px;
}

.header .container {
	background: url(/playground/img/header-tools.png) left bottom / 492px no-repeat;
}

img.csshtml {

}

img.logo {
	margin-top: 1px;
}

.faded {
	color: rgba(255,255,255,0.8);
	font-style:italic;
}

li a {
	color: rgba(255,255,255,0.8);
}

.example-label {
	display: inline-block;
	padding: 4px 8px;

	background-color: #b5bfc9;
	border-radius: 3px;
	color: #fff;
	font-size: 12px;
	text-shadow: 0px -1px 0 rgba(0,0,0,.2);

	text-transform: uppercase;
}

.example {
	padding: 1px 0;
}

.example h2.title {
	margin-top: 6px;
}


.divider {
	height: 10px;
	background: url(/playground/img/page-divider.png) repeat-x left top;
	background-size: 10px;

	margin: 50px 0;
}

.code-heading {
}

.code-sheet {
}

/* Example 1: Buttons */

.button-well {
	background: #fff;

	border: 1px solid #D9E1E6;
	border-radius: 6px;
	padding: 50px 20px 20px;

	text-align: center;
}

.button-well .button {
	display: inline-block;
	padding: 22px 39px 20px 39px;
	margin-bottom: 30px;

	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 23px;
	line-height: 20px;

	color: #fff;
	text-align: left;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.27);

	vertical-align: middle;
	cursor: pointer;

	background-color: #555555;
	border: solid 1px rgba(73, 73, 73, 1);
	border-radius: 5px;

	background-image:  -webkit-linear-gradient(bottom, #525252, #696969);
	background-image:  linear-gradient(to top, #525252, #696969);

	text-decoration: none;

	margin-right: 5px;
	margin-left: 5px;


	box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px 0px inset,
				rgba(255, 255, 255, 0.2) 0px 0px 5px 0px inset,
				rgba(255, 255, 255, 0.0) 0px 67px 67px -40px inset,
				rgba(46, 46, 46, 1) 0px 2px 0px 0px, 
				rgba(0, 0, 0, 0.4) 0px 3px 6px 0px;

	-webkit-transition: box-shadow 230ms ease-in-out, -webkit-transform 230ms ease-in-out, border-color 230ms ease-in-out;
	transition: box-shadow 230ms ease-in-out, -webkit-transform 230ms ease-in-out, border-color 230ms ease-in-out;
}

.button-well .button:hover {
	box-shadow: rgba(255, 255, 255, 0.6) 0px 1px 0px 0px inset,
				rgba(255, 255, 255, 0.2) 0px 0px 5px 0px inset,
				rgba(255, 255, 255, 0.3) 0px 67px 67px -40px inset,
				rgba(46, 46, 46, 1) 0px 2px 0px 0px, 
				rgba(0, 0, 0, 0.4) 0px 3px 8px 0px;

	border-color:rgba(73, 73, 73, 0.5);
}

.button-well .button:active {
	box-shadow: rgba(255, 255, 255, 0.0) 0px 1px 0px 0px inset,
				rgba(0,0,0, 0.35) 0px 1px 7px -1px inset,
				rgba(255, 255, 255, 0.0) 0px 67px 67px -40px inset,
				rgba(46, 46, 46, 1) 0px 2px 0px 0px, 
				rgba(0, 0, 0, 0.0) 0px 3px 8px 0px;

	-webkit-transform: translate(0px,2px) translateZ(0px);
}

.button-well .button.cart {
	padding-left: 64px;

	background-color: #00c67c;
	background-repeat: no-repeat, no-repeat;
	background-position: 24px 53%, 50% 50%;
	background-size: 20px, auto;

	border: solid 1px rgba(0, 158, 98, 1);

	box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px 0px inset,
				rgba(255, 255, 255, 0.2) 0px 0px 5px 0px inset,
				rgba(255, 255, 255, 0.0) 0px 67px 67px -40px inset,
				#008f5a 0px 2px 0px 0px, 
				rgba(0,0,0, 0.4) 0px 3px 6px 0px;


	background-image: url(/playground/img/cart-icon.png), -webkit-linear-gradient(bottom, #00b772, #00d486);
	background-image: url(/playground/img/cart-icon.png), linear-gradient(to top, #00b772, #00d486);

	background-position: 22px 47%, 50% 50%;
	background-size: 26px, auto;
}

.button-well .button.cart:hover {
	box-shadow: rgba(255, 255, 255, 0.6) 0px 1px 0px 0px inset,
				rgba(255, 255, 255, 0.2) 0px 0px 5px 0px inset,
				rgba(255, 255, 255, 0.3) 0px 67px 67px -40px inset,
				#008f5a 0px 2px 0px 0px, 
				0px 3px 8px 0px rgba(0,0,0, 0.4);

	border-color: rgba(0, 158, 98, 0.5);
}

.button-well .button.cart:active {
	box-shadow: rgba(255, 255, 255, 0.0) 0px 1px 0px 0px inset,
				rgba(0,0,0, 0.35) 0px 1px 7px -1px inset,
				rgba(255, 255, 255, 0.0) 0px 67px 67px -40px inset,
				rgba(79, 111, 168, 0) 0px 2px 0px 0px, 
				0px 4px 7px 0px rgba(0,0,0, 0.0);

	-webkit-transform: translate(0px,2px) translateZ(0px);
}

/* Example 2: Text Effects */
.effect-box {
	border-radius: 6px;
	text-align: center;

	padding-top: 48px;
	min-height: 220px;

	box-shadow: 0 0 15px -5px rgba(0, 0, 0, 0.6) inset;
}

.effect-box.vintage {
	background-color: #575757;

	background-image: url(/playground/img/vintage-bg.png), -webkit-radial-gradient(50% -140%, circle closest-corner, white, rgba(255,255,255,0.0));
	background-image: url(/playground/img/vintage-bg.png), radial-gradient(circle closest-corner at 50% -140%, white, rgba(255,255,255,0.0));

	background-repeat: repeat, no-repeat;
	background-size: 40px, auto;
	background-position: 50%, 50%;
}

.effect-box.vintage > h1 {
	font-family: 'Oswald';
	font-size: 80px;
	text-transform: uppercase;
	margin:0;

	color: #909E67;

	text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.6),
				 2px 2px 0 #575757,
				 4px 4px 0 #6C7553;	
}

.effect-box.seattle {
	padding-top: 56px;

	background-color: #00CC9D;

	background-image: -webkit-repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 7%, rgba(255,255,255,0) 7%, rgba(255,255,255,0) 14%);
	background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 7%, rgba(255,255,255,0) 7%, rgba(255,255,255,0) 14%);
}

.effect-box.seattle > h1 {
	font-family: 'Changa One';
	font-size: 78px;
	font-weight: normal;
	color: #fff;
	margin: 0;

	text-shadow: 0 1px 0 #E3E3E3,
				 0 3px 0 #C9C9C9,
				 0 5px 0 #B8B8B8,
				 0 7px 0 #ABABAB,
				 0 9px 0 #A1A1A1,
				 0 11px 0 #969696,
				 0 0px 10px rgba(0, 0, 0, 0.15),
				 0 7px 10px rgba(0, 0, 0, 0.1),
				 0 11px 10px rgba(0, 0, 0, 0.45);

}

/* Example 3: Text Layout */

.text-layout {
	min-height: 566px;

	background: #fff;
	border: 1px solid #D9E1E6;
	padding: 15px;

	border-radius: 6px;
}

.text-layout.news {
	font-family: 'PT Serif';
}

.text-layout.news .breaking {
	display: inline-block;
	padding: 8px;
	margin: 5px 0;
	
	background-color: #D74700;
	
	color: #fff;
	font-family: 'Oswald';
	font-size: 19px;
	font-weight: 400;
	text-transform: uppercase;
}

.text-layout.news h1 {
	font-size: 54px;
	line-height: 55px;
}


.text-layout.news p {
	font-size: 14px;
	line-height: 19px;
}

.text-layout.news .subhead {
	padding-bottom: 10px;

	font-family: 'Merriweather';
	font-size: 17px;
	line-height: 22px;
	border-bottom: 1px solid #efefef;
}

.text-layout.lakewood {
	padding: 18px;

	background-image: url(/playground/img/mountains.png), url(/playground/img/grunge-bg.jpg);
	background-repeat: no-repeat, repeat;
	background-size: 82%, 260px;
	background-position: 50% 25px, 50% 50%;

	color: #C2B385;
	text-align: center;
}

.text-layout.lakewood h1 {
	margin: 85px 0 30px;

	font-family: 'Oswald';
	text-transform: uppercase;
	font-size: 58px;

	text-shadow: 0 0 8px rgba(0,0,0,0.8);
}

.text-layout.lakewood h2 {
	margin-bottom: 30px;

	font-family: 'Great Vibes';
	font-size: 28px;
	font-weight: normal;
	color: #fff;
}

.text-layout.lakewood p {
	font-family: 'Bitter';
	line-height: 22px;
}

.text-layout.lakewood p.quote {
	margin-bottom: 0;

	font-family: 'Vollkorn';
	font-style: italic;
	font-size: 23px;
	line-height: 27px;
}

.text-layout.lakewood p.quote .signature {
	display: block;

	font-family: 'Bitter';
	font-size: 12px;
	font-style: normal;	
	text-transform: uppercase;
}

/* Example 4: Polaroid pictures */

.polaroid {
	position: relative;
	margin-top: 0px;
	padding: 10px;

	border: 1px solid #BFBFBF;
	background-color: #F8F8F8;

	box-shadow: 0 0 0 1px white inset,
				0 0 6px 0 rgba(0,0,0,0.15);

	-webkit-transition: box-shadow 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
	transition: box-shadow 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
}

.polaroid:hover {
	position: relative;
	padding: 10px;

	border: 1px solid #BFBFBF;
	background-color: #F8F8F8;

	box-shadow: 0 0 0 1px white inset, 
				0 6px 19px 0 rgba(0,0,0,0.2);

	-webkit-transform: translate(0px,-3px) translateZ(0);
	transform: translate(0px,-3px) translateZ(0);
	
}

.polaroid > .photo {
	border: 1px solid rgba(0,0,0,0.3);
	width: 100%;
}

.polaroid > .title {
	font-family: 'Varela Round';
	font-size: 15px;
	padding: 12px 0 4px;
}

.polaroid > .byline {
	color: #9C9C9C;
	font-family: Arial;
	font-style: italic;
	font-size: 12px;
}

.polaroid > .shadow {
	background: url(/playground/img/img-shadow.png) no-repeat 50% top;
	background-size: 218px;

	height: 11px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -11px;
}

/* Example 5: Feature columns */

.column {
	border-radius: 4px;
	min-height: 200px;
	background-color: #FCDFD6;

	border: 1px solid rgba(249, 89, 42, 0.4);
	border-radius: 4px;
	padding: 20px 15px 15px 15px;

	text-align: center;

	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 65%, rgba(255, 255, 255, 0.8) 95%, rgba(255, 255, 255, 0) 100%);
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 65%, rgba(255, 255, 255, 0.8) 95%, rgba(255, 255, 255, 0) 100%);

	box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.4),
				0 1px 1px 1px rgba(255, 255, 255, 0.8) inset;
}

.column .illustration {
}

.column h3 {
	margin: 15px 0;
	font-size: 33px;
	font-weight: normal;
}

.column p {
	font-family: 'Varela Round', sans-serif;
	font-size: 15px;
	line-height: 20px;
	color: #4A4A4A;
	min-height: 100px;
}

.column.design h3 {
	color: #F1592A;
}

.column.export {
	background-color: #CEF1FA;
	border-color: rgba(0, 137, 184, 0.4);
}

.column.export h3 {
	color: #00ACE6;
}

.column.launch {
	background-color: #CEEEE2;
	border-color: rgba(0, 158, 99, 0.4);
}

.column.launch h3 {
	color: #00C27A;
}




/* Example 6: Newsletter */

.newsletter {
	padding: 45px 35px 50px;

	border: 1px solid #C2C2C2;
	border-radius: 5px;

	background-color: #F6F6F6;
	background-image: url(/playground/img/newsletter-stamp.png),
					  url(/playground/img/newsletter-stripes.png),
					  url(/playground/img/newsletter-stripes.png),
					  url(/playground/img/newsletter-bg1.png);

	background-position: 98% 34px, 50% 97%, 50% 10px, left top;
	background-repeat: no-repeat, no-repeat, no-repeat, repeat;
	background-size: 173px, 922px, 922px, 33px;

	box-shadow: 0 0px 15px -1px rgba(0,0,0,0.1) inset, 
				0 3px 0 -1px rgba(240, 240, 240, 1), 
				0 3px 0 0 #c9c9c9, 
				0 3px 7px -1px rgba(0,0,0,0.25);

	color: #404040;
}

.newsletter > h1 {
	font-family: 'Bitter';
	font-weight: normal;
}

.newsletter > p {
	width: 70%;
	
	font-family: 'Varela Round';
	font-size: 17px;
	line-height: 22px;
}

.newsletter input.form-field {
	width: 100%;
	padding: 14px;

	font-family: 'Varela';
	font-size: 15px;
	font-style: normal;

	background-color: #FCFCFC;

	border: 1px solid #D4D4D4;
	border-radius: 4px;

	box-shadow: 0 1px 0 0 rgba(255, 255, 255, 1.0), 
				0 3px 10px -5px rgba(0,0,0,0.4) inset;

	-webkit-transition: box-shadow 150ms ease-in-out, border 150ms ease-in-out;
	transition: box-shadow 150ms ease-in-out, border 150ms ease-in-out;
}

.newsletter input.form-field:focus {
	border: 1px solid rgba(0, 150, 255, .5);

	box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0), 
				0 3px 10px -5px rgba(0,0,0,0.4) inset, 
				0 0px 16px 0 rgba(0, 150, 255, .5);

	outline-width: 0;

}

.newsletter .button {
	display: inline-block;
	padding: 16px 45px;
	margin-top: 2px;

	border: 1px solid #1F7CBD;
	border-radius: 4px;

	color: #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
	text-decoration: none;

	background-color: #2899D1;
	background-image: -webkit-linear-gradient(top, #2BA3DE, #258EC0);
	background-image: linear-gradient(to bottom, #2BA3DE, #258EC0);

	box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4) inset, 
				0 80px 57px -60px rgba(255, 255, 255, 0.0) inset;

	-webkit-transition: box-shadow 150ms ease-in-out;
	transition: box-shadow 150ms ease-in-out;
}

.newsletter .button:hover {
	box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6) inset, 
				0 80px 57px -60px rgba(255, 255, 255, 0.3) inset;
}


/* Example 7: Sign In */

.sign-in {
	padding: 35px 0;

	background-color: #7E5769;
	background-image: url(/playground/img/signin-bg.jpg);
	background-position: 50% 0px;
	background-size: cover;

	border-radius: 5px;

	box-shadow: 0 0 4px 0 rgba(0,0,0,0.2) inset;
}

.sign-in .popup {
	border: 1px solid rgba(0, 0, 0, 0.5);
	border-radius: 8px;

	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) inset, 
				0 3px 15px -1px rgba(0,0,0, 0.5);

	background-color: rgba(0,0,0,0.3);
}

.sign-in .popup-title {
	padding: 14px;

	background-color: rgba(0, 0, 0, 0.1);

	color: #fff;
	font-size: 18px;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
	text-align: center;

	border-radius: 7px 7px 0 0;

	border-bottom: 1px solid rgba(0,0,0,0.15);
	box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);

	margin: 1px 1px;
}

.sign-in .close-link {
	float: right;
	text-decoration: none;

	width: 20px;
	height: 20px;

	background: url(/playground/img/signin-x.png) 50% 50% / 13px no-repeat;

	opacity: 0.5;

	-webkit-transition: opacity 150ms ease-in-out;
	transition: opacity 150ms ease-in-out;
}

.sign-in .close-link:hover {
	opacity: 1.0;
}

.sign-in .close-link span {
	display: none;
}

.sign-in .sign-in-form {
	padding: 18px;
	border-right: 1px solid rgba(0,0,0,0.15);
	box-shadow: 1px 0 0 0 rgba(255, 255, 255, 0.1);
}


.sign-in .form-field {
	width: 100%;
	padding: 13px 15px 13px 40px;
	margin-bottom: 10px;

	font-family: 'Varela';
	font-size: 16px;
	font-style: normal;

	color: white;

	background-color: rgba(0,0,0,0.15);
	background-repeat: no-repeat;

	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 4px;

	box-shadow: 0 0 15px -2px rgba(0, 0, 0, 0.3) inset;

	-webkit-transition: box-shadow 150ms ease-in-out, border 150ms ease-in-out, background-color 150ms ease-in-out;
	transition: box-shadow 150ms ease-in-out, border 150ms ease-in-out, background-color 150ms ease-in-out;
}

.sign-in .form-field:focus {
	border: 1px solid rgba(201, 66, 116, .70);
	outline-width: 0;
	background-color: rgba(0,0,0,0.3);

	box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0) inset, 
				0 3px 10px -5px rgba(0,0,0,0.4) inset, 
				0 0px 16px 0 rgba(201, 66, 116, .6);
}

.sign-in .form-field.username {
	background-image: url(/playground/img/signin-user.png);
	background-size: 15px;
	background-position: 15px 48%;
}

.sign-in .form-field.password {
	background-image: url(/playground/img/signin-password.png);
	background-size: 11px;
	background-position: 17px 46%;
}

.sign-in .forgot-password {
	padding-bottom: 10px;

	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;

	font-family: Arial;
	font-size: 12px;

	display: block;

	-webkit-transition: color 150ms ease-in-out;
	transition: color 150ms ease-in-out;
}

.sign-in .forgot-password:hover {
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
}

.sign-in .external-auth {
	padding: 40px 18px 18px 10px;
}

.sign-in .external-auth .intro {
	color: #C7C7C7;
	text-align: center;
	font-family: 'Georgia', sans-serif;
	font-style: italic;
}

.sign-in .button {
	display: block;

	background-color: #AF426B;

	padding: 15px;
	margin: 16px 0 0 0;

	color: rgba(255,255,255,0.9);
	font-weight: 400;
	text-decoration: none;
	text-align: center;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);

	border-radius: 3px;

	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset,
				0 4px 7px -4px rgba(255, 255, 255, 0.7) inset,
				0 56px 47px -41px rgba(255, 255, 255, 0.0) inset,
				0 0 8px -1px rgba(0, 0, 0, 0.5);

	background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.4), transparent);
	background-image: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);

	-webkit-transition: box-shadow 150ms ease-in-out;
	transition: box-shadow 150ms ease-in-out;
}

.sign-in .button:hover {
	box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.15) inset, 
				0 4px 7px -4px rgba(255, 255, 255, 0.7) inset, 
				0 56px 47px -41px rgba(255, 255, 255, 0.2) inset, 
				0 0 8px -1px rgba(0, 0, 0, 0.85);
}

.sign-in .button.social {
	text-align: left;
	padding-left: 44px;
	background-repeat: no-repeat, no-repeat;
}

.sign-in .button.social.facebook {
	background-color: #4364AA;
	background-size: 12px, auto;
	background-image: url(/playground/img/signin-fb.png), -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.4), transparent);
	background-image: url(/playground/img/signin-fb.png), linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
	background-position: 18px 50%, left top;

}

.sign-in .button.social.twitter {
	background-color: #279BCE;
	background-size: 24px, auto;
	background-image: url(/playground/img/signin-twitter.png), -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.4), transparent);
	background-image: url(/playground/img/signin-twitter.png), linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
	background-position: 12px 50%, left top;
}

/* Example 8: Testimonials */
.testimonial {
}

.testimonial .quote {
	padding: 45px 50px 45px 65px;

	border: 1px solid #CCCCCC;
	border-radius: 5px;

	background-color: #fff;
	background-image: url(/playground/img/quote.png);
	background-repeat: no-repeat;
	background-position: -14px 36px;
	background-size: 85px;

	font-family: 'Lato', sans-serif;
	font-size: 15px; 
	line-height: 26px;

	box-shadow: 0 2px 8px -3px rgba(0,0,0,0.3);
}

.testimonial .triangle {
	height: 28px;
	margin-top: -2px;
	margin-left: 85px;
	width: 40px;
	background: url(/playground/img/quote-triangle.png) left / 49px no-repeat;
}

.testimonial .photo {
	float: left;
	margin-right: 20px;

	border: 4px solid #FDFDFD;
	border-radius: 4px;

	box-shadow: 0 0 0 1px #CCCCCC, 
				0 1px 6px -1px rgba(0,0,0,0.3);
}

.testimonial .name {
	color: #D6843E;
	font-size: 19px;
	padding-top: 13px;
	padding-bottom: 7px;
}

.testimonial .byline {
	font-family: 'Vollkorn', serif;
	font-style: italic;
	color: #7A7A7A;
	font-size: 17px;
}


/* Example 9: Albums */

.album {
	position: relative;
	width: 170px;
}

.album .cover {
	position: relative;
	width: 150px;
	height: 150px;
	margin-bottom: 10px;

	background-repeat: no-repeat;
	background-size: 150px;
	background-position: left top;

	z-index: 2;

	border-radius: 3px 2px 2px 3px;

	box-shadow: 0 0 8px -1px rgba(0, 0, 0, 0.8);

	cursor: pointer;
}

.album.clogs .cover {
	background-image: url(/playground/img/transitions-clogs.png);
}

.album.gallows .cover {
	background-image: url(/playground/img/transitions-gallows.png);
}

.album.vhs .cover {
	background-image: url(/playground/img/transitions-vhs.png);
}

.album.apparat .cover {
	background-image: url(/playground/img/transitions-apparat.png);
}

.album .play-button {
	position: absolute;
	width: 50px;
	height: 50px;
	left: 50px;
	top: 50px;

	border-radius: 50px;

	background-image: url(/playground/img/transitions-play.png), -webkit-linear-gradient(top, #313131, #0D0D0D);
	background-image: url(/playground/img/transitions-play.png), linear-gradient(to bottom, #313131, #0D0D0D);

	background-repeat: no-repeat, no-repeat;
	background-size: 16px, 100%;
	background-position: 57% 49%, 50% 50%;

	border: 1px solid rgba(255, 255, 255, 0.3);

	box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.5) inset,
				0 0 4px 1px rgba(0, 0, 0, 0.6),
				0 30px 30px -20px rgba(255,255,255, 0.0) inset;

	opacity: 0;
	-webkit-transition: opacity 350ms ease, box-shadow 150ms ease-in-out;
	transition: opacity 350ms ease, box-shadow 150ms ease-in-out;

	-webkit-backface-visibility: hidden;
	backface-visibility:hidden;
}

.album:hover .play-button {
	opacity: 1.0;
}

.album .play-button:hover {
	box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.5) inset,
				0 0 4px 1px rgba(0, 0, 0, 0.7),
				0 30px 30px -20px rgba(255,255,255, 0.1) inset;
}

.album .play-button span {
	display: none;
}

.album .record {
	width: 147px;
	height: 147px;
	position: absolute;
	left: 35px;
	top: 3px;

	z-index: 1;

	background: url(/playground/img/transitions-vinyl.png) left top / 100% no-repeat;

	-webkit-transition: left 400ms ease-in-out, -webkit-transform 400ms ease-in-out;
	transition: left 400ms ease-in-out, transform 400ms ease-in-out;
}

.album:hover .record {
	left: 75px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.album .name {
	font-size: 12px;
	font-weight: bold;
	line-height: 26px;
}

.album .byline {
	font-family: 'Bitter';
	font-style: italic;
	font-size: 12px;
	color: #808080;
}



/* Example 10: Map */

.map {
	position: relative;
	min-height: 280px;

	border-radius: 5px;

	background-image: url(/playground/img/map.png), url(/playground/img/grunge-bg.jpg);
	background-repeat: no-repeat, repeat;
	background-size: 1098px, 260px;
	background-position: -82px -129px, 50% 50%;
}

.map .city {
	position: absolute;
	width: 14px;
	height: 14px;

	border-radius: 0 7px 7px 7px;

	background-color: rgba(236, 213, 140, 0.8);

	box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.4); 

	-webkit-transition: box-shadow 400ms ease;
	transition: box-shadow 400ms ease;

	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.map .city:hover {
	box-shadow: 0 0 20px 5px rgba(236, 213, 140, 0.9),
				0 0 5px 0 rgba(255, 255, 255, 0.9) inset; 
}

.map .city.san-francisco {
	left: 148px;
	top: 132px;
}

.map .city.lakewood {
	left: 225px;
	top: 136px;
}

.map .city.chicago {
	left: 303px;
	top: 113px;
}

.map .city.manhattan {
	left: 366px;
	top: 122px;

	box-shadow: 0 0 20px 5px rgba(236, 213, 140, 0.9),
				0 0 5px 0 rgba(255, 255, 255, 0.9) inset; 
}

.map .city.austin {
	left: 248px;
	top: 183px;
}

.map .city.san-diego {
	left: 168px;
	top: 161px;
}

.map .city.havana {
	left: 332px;
	top: 217px;
}

.map .title {
	margin-top: 90px;
	margin-bottom: 10px;

	font-family: 'Oswald';
	font-weight: normal;
	text-transform: uppercase;
	color: #C2B385;
	font-size: 37px;
}

.map p {
	color: #fff;
	font-family: 'Varela';
	font-size: 15px;
	line-height: 20px;

	width: 80%;
}


/* Example 11: Skateboards */

.skateboard {
	text-align: center;
	padding: 15px;

	border: 1px solid #C7C7C7;
	border-radius: 5px;

	background: #fff;

	box-shadow: 0 1px 7px -2px rgba(0,0,0,0.35);
}

.skateboard.new {
	background: white url(/playground/img/product-new.png);
	background-size: 29px 67px;
	background-position: 12px 0px;
	background-repeat: no-repeat;
}

.skateboard .photo-wrapper {
	height: 300px;
	width: 75px;
	margin: 0 auto;
	position: relative;
}

.skateboard .photo {
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index: 2;

	-webkit-transition: bottom 350ms ease;
	transition: bottom 350ms ease;

	backface-visibility: hidden;
}

.skateboard:hover .photo {
	bottom: 10px;
}

.skateboard .shadow {
	width: 140px;
	height: 38px;
	margin: -5px 0 15px -15px;

	background: url(/playground/img/product-shadow.png) 50% 50% / 100% no-repeat;

	-webkit-transition: -webkit-transform 350ms ease;
	transition: transform 350ms ease;
}

.skateboard:hover .shadow {
	-webkit-transform: scale(0.75);
	transform: scale(0.75);
}

.skateboard .name {
	font-family: 'Varela Round', sans-serif;
	font-size: 15px;
	padding: 2px 0 7px;
}

.skateboard .rating {
}

.skateboard .price {
	font-weight: bold;
	font-size: 17px;
	padding: 22px 0;
}

.skateboard .buy-button {
	display: block;
	padding: 8px 30px 6px 16px;

	border: 1px solid #B1B1B1;
	border-radius: 25px;

	background-color: #F4F4F4;

	background-image: url(/playground/img/product-arrow.png), -webkit-linear-gradient(top, white 0%, white 53%, #F4F4F4 53%, #E4E4E4);
	background-image: url(/playground/img/product-arrow.png), linear-gradient(to bottom, white 0%, white 53%, #F4F4F4 53%, #E4E4E4);
	background-repeat: no-repeat, no-repeat;
	background-position: 94% 50%, 50% 50%;
	background-size: 15px, auto;

	color: #595959;
	font-size: 11px;
	text-transform: uppercase;
	text-decoration: none;

	box-shadow: 0 1px 7px -2px rgba(0, 0, 0, 0.5), 
				0 0 7px -1px rgba(0, 0, 0, 0.3) inset;

	-webkit-transition: box-shadow 350ms ease, text-shadow 350ms ease, color 350ms ease, border-color 350ms ease;
	transition: box-shadow 350ms ease, text-shadow 350ms ease, color 350ms ease, border-color 350ms ease;
}


.skateboard:hover .buy-button {

	box-shadow: 0 1px 7px -2px rgba(0, 0, 0, 0.5), 
				0 0 7px -1px rgba(47, 147, 235, .5) inset;

	color: #2f93eb;
	border-color: rgba(47, 147, 235, 0.8);

	text-shadow: 0 1px 0 rgba(255,255,255,1);

}

/* Example 12: Complex Footer */

.content-bottom {
	border-top: 1px solid rgba(0, 0, 0, 0.15);

	background-image: url(/playground/img/footer-stitch.png), url(/playground/img/footer-bg-stripes.jpg);
	background-repeat: repeat-x, repeat;
	background-position: 50% bottom, 50% bottom;
	background-size: 240px, 256px;

	height: 100px;
}

.footer {
	background-image: url(/playground/img/footer-bg.png), url(/playground/img/footer-bg-dark.jpg);

	padding-bottom: 30px;

	font-family: 'Bitter', serif;

	background-repeat: repeat-x, repeat;
	background-position: 50% bottom, 50% top;
	background-size: 1024px, 300px;
}

.footer .emblem {
	height: 136px;
	margin-top: -80px;

	background: url(/playground/img/footer-emblem.png) 50% 50% / 136px no-repeat;
}

.footer h3 {
	color: #D3D3D3;
	font-family: 'Oswald', sans-serif;
	font-size: 20px;
	font-weight: normal;
	text-transform: uppercase;
}

.footer ul.nav {
	list-style-type: none;
	padding-left: 0;
}

.footer ul.nav a {
	text-decoration: none;
	color: #949083;
	line-height: 29px;
	font-size: 16px;
}

.footer ul.nav a:hover {
	text-decoration: none;
	color: #d4cebc;
}

.footer .email-field {
	padding: 10px;
	display: inline-block;

	background-color: rgba(0, 0, 0, 0.15);

	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 3px;

	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5) inset;

	font-family: 'Bitter', serif;
	font-size:13px;

	-webkit-transition: box-shadow 150ms ease-in-out, border 150ms ease-in-out;
	transition: box-shadow 150ms ease-in-out, border 150ms ease-in-out;

	color: white;
}

.footer .email-field:focus {
	border: 1px solid rgba(0, 150, 255, .5);

	box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0), 
				0 3px 10px -5px rgba(0,0,0,0.4) inset, 
				0 0px 16px 0 rgba(0, 150, 255, .5);

	outline-width: 0;
}


.footer .ok-button {
	padding: 10px 11px 10px 9px;
	display: inline-block;

	font-weight: bold;
	text-decoration: none;
	color: #fff;

	background-color: #988E68;

	border-radius: 2px;

	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset,
				0 56px 47px -41px rgba(255, 255, 255, 0.0) inset,
				0 0 8px -1px rgba(0, 0, 0, 0.5);
	opacity:.9;

	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);

	-webkit-transition: box-shadow 150ms ease, opacity 150ms ease;
	transition: box-shadow 150ms ease, opacity 150ms ease;
}

.footer .ok-button:hover {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset,
				0 56px 47px -41px rgba(255, 255, 255, 0.2) inset,
				0 0 8px -1px rgba(0, 0, 0, 0.9);
	opacity:1;

}

.footer .social-link {
	width: 35px;
	height: 35px;
	margin: 10px 10px 0 0;

	float: left;

	background-color: #9E926C;
	background-repeat: no-repeat;
	background-position: 50% 50%;

	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset,
				0 56px 47px -41px rgba(255, 255, 255, 0.0) inset,
				0 0 8px -1px rgba(0, 0, 0, 0.5);
	opacity:.9;

	border-radius: 40px;

	-webkit-transition: box-shadow 150ms ease, opacity 150ms ease;
	transition: box-shadow 150ms ease, opacity 150ms ease;
}

.footer .social-link:hover {

	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset,
				0 56px 47px -41px rgba(255, 255, 255, 0.2) inset,
				0 0 8px -1px rgba(0, 0, 0, 0.9);

	opacity: 1;

}

.footer .social-link.facebook {
	background-image: url(/playground/img/signin-fb.png);
	background-size: 11px;
}

.footer .social-link.twitter {
	background-image: url(/playground/img/signin-twitter.png);
	background-size: 20px;
}

.footer .signature {
	text-align: center;
	font-size: 22px;
	font-family: 'Oswald', sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	color: #C2B385;

	padding-top: 15px;
	padding-bottom: 11px;

	text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}

.footer .drink-up {
	font-family: 'Great Vibes', cursive;
	font-size: 21px;
	color: #fff;
	text-align: center;
}

/* Example 13: Memes */

.meme {
	position: relative;

	background-repeat: none;
	background-size: cover;
	background-position: 50% top;

	text-align: center;

	min-height: 270px;
}

.meme.grumpy-cat {
	background-image: url(/playground/img/grumpy-cat.jpg);
}

.meme.boromir {
	background-image: url(/playground/img/boromir.jpg);
}

.meme.interesting-man {
	background-image: url(/playground/img/interesting-man.jpg);
}

.meme .text {
	position: absolute;
	width: 100%;
	padding: 15px;

	font-family: Impact, Arial, sans-serif;
	font-size: 20px;
	line-height: 22px;
	text-transform: uppercase;
	color: #fff;

	text-shadow: 0px 0 4px black, 
				 -1px 0 4px black, 
				 1px 0 4px black;
}

.meme .text.top {
	left: 0;
	top: 0;
}

.meme .text.bottom {
	left: 0;
	bottom: 0;
}


.button-well.blank {
	padding: 30px;

}

.button-well.blank .blank-button{

	display:inline-block;
	text-decoration:none;
	padding: 10px 20px;
	background: black;
	color:white;
	border-radius:5px;
	font-size: 16px;

}

.button-well.blank .blank-button:hover{

	background:gray;

}

.button-well.blank .blank-button:active{

}


.text-layout.blank {
}

.text-layout.blank h1{
	font-size:30px;
}

.text-layout.blank h2 {
	font-size:24px;

}

.text-layout.blank p {
	font-family: 'Varela Round', sans-serif;
	font-size:14px;
	line-height: 17px;

}

.text-layout.blank p.quote {
	font-style: italic;
	text-align:center;
}

.text-layout.blank p.quote .signature {
	display: block;

	margin-top:10px;
	font-size: 12px;
	font-style: normal;	
	text-transform: uppercase;
}



@media (min-width: 768px) and (max-width: 979px) {
	.header {
		padding: 30px 20px 0px;
	}

	.polaroid > .title {
		font-size: 14px;
	}

	.column {
		min-height: 428px;
	}

	.column p {
		min-height: 0px;
	}

	.column img {
		width: 92%;
	}

	.text-layout.news h1 {
		font-size: 43px;
		line-height: 49px;
	}

	.text-layout.lakewood h1 {
		font-size: 42px;
		margin-bottom:0px;

	}

	.text-layout.lakewood h2 {
		margin-bottom: 0px;
		margin-top: 16px;
	}

	.sign-in .popup {
		margin-left: -62px;
		margin-right: -62px;
	}

	.sign-in .button.social {
		padding-left: 35px;
		font-size: 13px;
	}

	.sign-in .button.social.facebook {
		background-size: 9px, auto;
		background-position: 14px 50%, left top;
	}

	.sign-in .button.social.twitter {
		background-size: 18px, auto;
		background-position: 10px 50%, left top;
	}

	.map {
		background-position: -162px -139px, 50% 50%;
	}

	.map .city {
		margin-left: -79px;
		margin-top: -11px;
	}

	.skateboard .photo-wrapper {
		height: 264px;
		width: 65px;
	}

	.skateboard .shadow {
		width: 101px;
		margin: -5px 0 5px -15px;
	}

	.footer ul li {
		margin-bottom: 12px;
	}

	.footer ul.nav a {
		line-height: 15px;
		}


	.footer .email-field {
		width: 119px;
	}
}

@media (max-width: 767px) {
	.header {
		padding: 30px 20px 0px;
	}

	.header h1 {
		line-height: 58px;
	}

	ul.instructions {
		margin-bottom: 24px;
	}

	.full-width {
		margin-left: -20px;
		margin-right: -20px;
	}

	.button-well {
		background: #fff;
		padding: 50px 0px 20px;
	}

	.button-well .button {
		padding-left: 19px;
		padding-right: 19px;
		font-size: 20px;
		background-position: 16px 53%, 50% 50%;

	}

	.button-well .button.action {
        padding-left: 56px;
        background-position: 16px center, left top;
    }

	.text-layout.news {
		min-height: 0px;
	}

	.text-layout.news h1 {
		font-size: 52px;
	}

	.text-layout.lakewood h1 {
		margin: 58px 0 0px;
	}

	.text-layout.lakewood p.quote {
		margin-bottom: 37px;
	}


	.column {
		min-height: 276px;
		background-color: #f2f2f2;
		border: 1px solid rgba(0,0,0, 0.2);
		margin-bottom: 20px;
		text-align:left;
	}

	.column.export {
		background-color: #f2f2f2;
		border: 1px solid rgba(0,0,0, 0.2);
	}

	.column.launch{
		background-color: #f2f2f2;
		border: 1px solid rgba(0,0,0, 0.2);
	}


	.column img {
		float: left;
	}

	.column h3 {
		margin: 60px 0px 0px 239px;
	}

	.column p {
		margin-left: 241px;
	}


	.polaroid {
		margin-bottom: 18px;
	}

	.newsletter input.form-field {
		width: 70%;
		margin-bottom: 9px;
	}

	.sign-in {
		padding: 35px 77px;
	}


	.sign-in .external-auth {
		text-align:center;
	}

	.sign-in .button.social {
		width: 131px;
		display: inline-block;
		margin-left: 10px;
		}

	.sign-in .external-auth {
		padding: 18px 18px 18px 10px;
	}

	.sign-in .sign-in-form {
		padding: 18px;
		border-bottom: 1px solid rgba(0,0,0,0.15);
		border-right: 1px solid transparent;
		box-shadow: 0px 1px 0 0 rgba(255, 255, 255, 0.1);
	}

	.testimonial {
		margin-bottom: 37px;
	}

	.album {
		margin-bottom: 24px;
	}
	
	.map {
		background-position: -162px -109px, 50% 50%;
		padding:50px;
	}

	.map .city {
		margin-left: -77px;
		margin-top: 18px;
	}

	.map .title {
		margin-top: 290px;
		margin-left: 0;
	}

	.map p {
		width: 100%;
		display: inline-block;
		margin-bottom: 10px;
		margin-top:0px;
	}	

	.skateboard .shadow {
		margin: -5px 0 15px 0px;
		display:inline-block;
	}

	.skateboard {
		margin-bottom: 20px;
	}

	.footer {
		text-align:center;
	}

	.footer .social-link {
		float: none;
		display: inline-block;
		margin-bottom: 30px;
	}

	.meme {
		margin-bottom: 20px;
		background-position: left 38%;
		}
}


@media (max-width: 480px) {

	.header h1 {
		font-size: 45px;
		line-height: 37px;
	}

	h2 {
		font-size: 28px;
	}

	.instructions ul li {
		font-size: 15px;
	}

	.text-layout.lakewood h1 {
		font-size: 55px;
	}

	.effect-box.vintage > h1 {
		font-size: 65px;
	}

	.effect-box.seattle > h1 {
		font-size: 65px;
	}

	.effect-box {
		padding-top: 71px;
	}

	.effect-box.seattle {
		padding-top: 63px;
	}

	.polaroid img {
		width: 100%;
	}

	.polaroid:hover {
		margin-top: 0px;
	}

	.column {
		min-height: 0px;
		text-align: center;
	}

	.column h3 {
		margin: 14px 0px;
	}

	.column p {
		margin-left: 0px;
	}

	.column img {
		float: none;
	}

	.sign-in {
		padding: 21px 22px;
	}

	.newsletter > p {
		width: 100%;
		font-size: 15px;
	}

	.newsletter input.form-field {
		width: 100%;
	}

	.testimonial .quote {
		padding: 37px 31px 38px 33px;
	}

	.map {
		background-position: -162px -109px, 50% 50%;
		padding:50px;
	}

	.map .city {
	}

	.footer h3 {
		margin-top: 26px;
		margin-bottom: 11px;
	}

	.footer ul.nav {
		margin: 0px;
	}

	.meme.boromir {
        background-position: center top;
    }
}