﻿
/***********************************************************************************************/
/* TYPOGRAPH */
/***********************************************************************************************/

h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
}

h1 {
	font-size: 1.8rem;
}

h2 {
	font-size: 1.6rem;
}

h3 {
	font-size: 1.4rem;
}

h4 {
	font-size: 1.2rem;
}

h5 {
	font-size: 1rem;
}

/***********************************************************************************************/
/* FORM */
/***********************************************************************************************/

[type="radio"]:checked,
[type="radio"]:not(:checked) {
	position: absolute;
	left: -9999px;
}

	[type="radio"]:checked + label,
	[type="radio"]:not(:checked) + label {
		position: relative;
		padding-left: 1.5rem;
		padding-right: 0.5rem;
		cursor: pointer;
		line-height: 20px;
		display: inline-block;
		color: #666;
	}

		[type="radio"]:checked + label:before,
		[type="radio"]:not(:checked) + label:before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 18px;
			height: 18px;
			border: 1px solid #ddd;
			border-radius: 100%;
			background: #fff;
		}

		[type="radio"]:checked + label:after,
		[type="radio"]:not(:checked) + label:after {
			content: '';
			width: 8px;
			height: 8px;
			background: #999;
			position: absolute;
			top: 5px;
			left: 5px;
			border-radius: 100%;
			-webkit-transition: all 0.2s ease;
			transition: all 0.2s ease;
		}

		[type="radio"]:not(:checked) + label:after {
			opacity: 0;
			-webkit-transform: scale(0);
			transform: scale(0);
		}

		[type="radio"]:checked + label:after {
			opacity: 1;
			-webkit-transform: scale(1);
			transform: scale(1);
		}
