@import "normalize.css";

@font-face {
	font-family: 'cinzel';
	src: url('../font/Cinzel-Bold-webfont.eot');
	src: url('../font/Cinzel-Bold-webfont.eot?#iefix') format('embedded-opentype'),
	     url('../font/Cinzel-Bold-webfont.woff') format('woff'),
	     url('../font/Cinzel-Bold-webfont.ttf') format('truetype'),
	     url('../font/Cinzel-Bold-webfont.svg#cinzelbold') format('svg');
	font-weight: bold;
	font-style: normal;
}

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	font-size: 10px;
}

body {
	background: #fbf8ec;
	color: #535353;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 1.4rem;
}

.container {
	max-width: 48em;
	margin: 0 auto;
	padding: 0 2em;
}

header, main {
	display: block;
}

a {
	color: #673520;
}

a:hover {
	text-decoration: none;
}

h1 {
	margin: 0 0 1.5em;
	font-family: cinzel, serif;
	color: #673520;
	font-size: 3rem;
	font-weight: bold;
	text-align: center;
}

h1::before {
	content: '';
	display: block;
	width: 180px;
	height: 200px;
	margin: 0 auto 1.5em;
	background: url('logo.jpg') no-repeat center;
}

h2 {
	margin: 0 0 1em;
	font-family: cinzel, serif;
	color: #673520;
	font-size: 2rem;
	font-weight: bold;
}

h3 {
	margin: 0 0 1em;
	font-family: cinzel, serif;
	color: #673520;
	font-size: 1.6rem;
	font-weight: bold;
}

form {
	margin: 2em 3.5em;
}

.note {
	font-size: 1.2rem;
}

label {
	display: block;
	margin-bottom: 1em;
}


input[type="text"], .input {
	display: block;
	width: 100%;
	padding: 3px 5px;
	background: #fff;
	border: 1px solid #c9cbb6;
	color: #535353;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 1.4rem;
}

.input {
	background: #eee;
}

button {
	margin-top: 1em;
	padding: 3px 20px;
	background: #000;
	border: 1px solid #bdbdbd;
	color: #fff;
	font-size: 14px;
	text-transform: uppercase;
	cursor: pointer;
}

button[disabled] {
	background: #bbb;
	cursor: default;
}

.box {
	margin: 2em 2.5em;
}

.margin-bottom {
	margin-bottom: 3em;
}

.error {
	color: #c00;
	font-weight: bold;
}

#error {
	display: none;
	margin-top: 1.5em;
}

sup {
	color: #c00;
	font-weight: bold;
}

table {
	margin-bottom: 1em;
}

th, td {
	padding: 2px 5px;
}

caption {
	padding-left: 3px;
	text-align: left;
}

ol {
	counter-reset: item;
	list-style: none;
}

ol > li {
	position: relative;
	counter-increment: item;
}

ol > li::before {
	position: absolute;
	top: 1px;
	left: -25px;
	content: counter(item) ".";
	color: #673520;
	font-size: 1.8rem;
	font-weight: bold;
}

ol > li > ol {
	counter-reset: subitem;
}

ol > li > ol > li  {
	counter-increment: subitem;
}

ol > li > ol > li::before {
	top: 1px;
	left: -32px;
	content: counter(item) "." counter(subitem) ".";
	font-size: 1.4rem;
}

ol > li > ol > li > ol {
	counter-reset: subsubitem;
}

ol > li > ol > li > ol > li  {
	counter-increment: subsubitem;
}

ol > li > ol > li > ol > li::before {
	top: 3px;
	left: -38px;
	content: counter(item) "." counter(subitem) "."  counter(subsubitem) ".";
	font-size: 1.4rem;
}
ol.abc {
	list-style-type: lower-latin;
}

ol.abc li:before {
	content: '';
}

@media (max-width: 767px) {
	body {
		font-size: 1.6rem;
	}

	h1 {
		font-size: 2rem;
	}

	input[type="text"], .input {
		padding: 5px 10px;
		font-size: 1.8rem;
	}

	label.checkbox {
		position: relative;
		padding-left: 25px;
	}

	input[type="checkbox"] {
		position: absolute;
		top: 3px;
		left: 0;
		-webkit-transform: scale(2);
		transform: scale(2);
	}

	button {
		padding: 10px 30px;
		font-size: 1.8rem;
	}

	form {
		margin: 2em 1em;
	}

	.box {
		margin: 2em 1em;
	}
}