body, html{
	margin:0;
	background:#FFF;
	font-family: 'Source Sans Pro', sans-serif;
}

h1, h2{
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	font-weight: 400;
	margin: 0;
	color: #111;
	font-size:32px;
	line-height: 32px;
	span{
		font-size:15px;
	}
}

h2{
	font-size:15px;
	margin-bottom:5px;
	color:#2d2d2d;
}

.textarea{
	min-height:100px;
	box-sizing: border-box;
}

.container{
	background-color:#FFF;
	width:600px;
	margin:50px auto;
	box-sizing: border-box;
	.header{
		padding:40px 0px;
	}
	.header{
		border-bottom: solid 1px #e9e9e9;
	}
}

.content{
	.bloc{
		border-bottom: solid 1px #e9e9e9;
		padding: 40px 0px;
		padding-bottom:50px;
		margin:0;
		&:last-child{
			border-bottom:0;
		}
		input[type="text"], .textarea, select{
			display: block;
			width: 100%;
			padding: 8px 12px;
			font-size: 13px;
			line-height: 1.42857143;
			color: #555;
			background-color: #fff;
			background-image: none;
			border: 1px solid #ccc;
			border-radius: 1px;
			box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
			margin-top:15px;
			font-family: 'Source Sans Pro', sans-serif;
			transition: all 0.2s ease-in-out;
			&.loading{
				pointer-events: none;
				opacity: 0.5;
			}
			&.fail{
				border-bottom:solid 1px #e74c3c;
				margin-bottom:5px;
			}
		}
		label{
			font-size:13px;
			color:#666;
			padding:3px 0px;
			display:block;
			input{
				margin-right:10px;
			}
		}
		.retry{
			color:#e74c3c;
			font-size: 13px;
			a{
				color:#e74c3c;
			}
		}
		.output{
			background-color: #f6f8fa;
			padding:20px;
			margin-bottom:0;
			margin-top:20px;
			h3{
				font-size: 11px;
				font-weight: 300;
				margin: 0;
				margin-bottom: 20px;
				margin-top:30px;
				color: #7a7a7a;
				text-shadow: 0px 0px 2px #FFF;
				text-transform: uppercase;
				&:first-child{
					margin-top:0;
				}
			}
			code{
				background-color: #f6f8fa;
				color:#515151;
				padding:0;
			}
			pre{
				margin:0;
			}
		}
	}
}

.field{
	position:relative;
	.checkmark{
		position:absolute;
		right: -35px;
		top:0;
		bottom:0;
		margin:auto;
	}
}

.checkmark {
	width: 22px;
	height: 22px;
}

.success {
	.checkmark__circle {
		stroke-dasharray: 166;
		stroke-dashoffset: 166;
		stroke-width: 2;
		stroke-miterlimit: 10;
		stroke: #7ac142;
		fill: none;
		animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
	}

	.checkmark {
		width: 22px;
		height: 22px;
		display: block;
		stroke-width: 2;
		stroke: #fff;
		stroke-miterlimit: 10;
		border-radius: 50%;
		box-shadow: inset 0px 0px 0px #7ac142;
		animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
	}

	.checkmark__check {
		transform-origin: 50% 50%;
		stroke-dasharray: 48;
		stroke-dashoffset: 48;
		animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
	}
}

@keyframes stroke {
	100% {
		stroke-dashoffset: 0;
	}
}

@keyframes scale {
	0%, 100% {
		transform: none;
	}
	50% {
		transform: scale3d(1.1, 1.1, 1);
	}
}

@keyframes fill {
	100% {
		box-shadow: inset 0px 0px 0px 30px #7ac142;
	}
}