/* Fonts */

@font-face { font-weight: normal; font-style: normal; font-family: 'Proba Pro'; src: url('../fonts/probapro-regular-webfont.woff2') format('woff2'), url('../fonts/probapro-regular-webfont.woff') format('woff'); }
@font-face { font-weight: normal; font-style: italic; font-family: 'Proba Pro'; src: url('../fonts/probapro-italic-webfont.woff2') format('woff2'), url('../fonts/probapro-italic-webfont.woff') format('woff'); }
@font-face { font-weight: normal; font-style: normal; font-family: 'Icons'; src: url('../fonts/icons.woff') format('woff'); }

/* Reset/Normalization */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}main,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}button,input,textarea,select{font-size:inherit;font-family:inherit;}

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

img { display: block; width: 100%; height: 100%; }
input, textarea { color: inherit; font: inherit; }


/* Basics */

html { 
	font-size: 12px;
	font-size: calc( 0.426vw + 10.636px );
}
@media screen and ( min-width: 1024px ) {
	html { 
		font-size: calc( 0.868vw + 6.111px );
	}
}
@media screen and ( min-width: 1600px ) {
	html { 
		font-size: 20px;
	}
}

html, body {
	width: 100%; height: 100%;
}

body {
	background-color: #000;
	color: #fff; line-height: 1.4; font-weight: 400; font-family: 'Proba Pro',sans-serif;
}

header {
	width: 80em; max-width: 100%; margin: 0 auto; padding: 4rem 4% 0;
}

main {
	width: 80rem; max-width: 100%; margin: 0 auto; padding: 4rem 4%;
}
.logo {
	width: 20rem; margin-bottom: 2rem; padding: 0 1rem;
}
@media screen and (min-width: 801px) {
	.logo {
		margin-left: auto;
	}
}
header > h1 {
	padding: 0 1rem;
	color: #ffd500; font-size: 3rem; line-height: 1.1; text-transform: uppercase;
}
header > .subtitle {
	font-size: 2rem; padding: 0 1rem;
}


main, section::after {
	display: table; content: ''; clear: both;
}

.column {
	float: left;
	width: 50%; padding: 0 1rem;
}

@media screen and (min-width: 801px) {
	header {
		margin-bottom: 1.5rem;
	}
}
header>p {
	color: #ffd500;
}

footer {
	padding: 1rem;
	text-align: center;
}

h1, h2 {
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

main>header>h1 {
	font-size: 2rem; line-height: 1;
	color: #ffd500;
}
section>h1, section>header>h1 {
	position: relative;
	margin-bottom: 0.7rem;
	font-size: 1.4rem; line-height: 1.2;
	color: #ffd500;
}

h2 {
	margin-top: 1.4rem; margin-bottom: 0.7rem;
}
h1 span, h2 span {
	color: #fff;
}

p {
	margin: 0.7rem 0;
}
a {
	border-bottom: 1px dotted #ffd500;
	color: #ffd500; text-decoration: none;
}
a:hover {
	border-bottom-style: solid; border-bottom-color: #fff;
	color: #fff;
}
ul li {
	position: relative;
	padding-left: 1em;
}
ul li::before {
	display: block; content: ''; position: absolute; top: 0.6em; left: 0.25em;
	border: 0 solid transparent; border-width: 0.2em 0.4em; border-left-color: #ffd500;
}

section *:first-child {
	margin-top: 0;
}
section *:last-child {
	margin-bottom: 0;
}

section {
	margin-bottom: 2rem; padding: 1rem 1.5rem; border-radius: 0.3rem;
	background: #1f1e20;
}
section.minor {
	font-size: 0.85rem;
}


strong {
	color: #ffd500;
}
em {
	font-style: italic;
	color: #ffd500;
}

.button {
	display: inline-block;
	padding: 0.5rem 1rem; border-radius: 0.1rem; border: 0;
	background-color: #ffd500;
	color: #000; font-size: 1.15rem; line-height: 1; text-transform: uppercase;
}
.button:hover {
	border: 0;
	background-color: #fff;
	cursor: pointer;
	color: #000;
}
.button:active {
	transform: scale(0.97);
}


@media screen and (max-width: 800px) {
	.column {
		float: none;
		width: auto;
	}
}



/* Form */

.input {
	overflow: hidden;
}
.input {
	margin-top: 0.7rem;
}
.input--close {
	margin-top: 0;
}
.input-label {
	display: block;
	margin-bottom: 0.375rem;
}
.input-remark {
	font-size: 0.75rem;
}
.input--text input,
.input--file input,
.input--textarea textarea {
	margin-top: 0.5rem;
	width: 100%; padding: 0.25rem 0.5rem; border: 0; border-bottom: 1px solid #fff;
	background-color: rgba(255,255,255,0.2);
	color: #fff;
}
.input--textarea textarea {
	height: 10em;
	resize: none;
}
.input--text input:focus,
.input--file input:focus,
.input--textarea textarea:focus {
	background-color: #fff;
	color: #000;
}
.input--file input {
	font-size: 0.8rem;
}

.input--required label::after {
	content: ' *';
	margin-left: 0.25rem;
	color: #ffd500;
}
.asterisk {
	color: #ffd500;
}


/* Checkbox/Radio replacement */

input[type='radio'],
input[type='checkbox'] {
	position: absolute; left: -9999px;
}
input[type='radio'] + label,
input[type='checkbox'] + label {
	display: inline-block; position: relative;
	padding: 0.25em 0.25em 0.25em 1.5em;
	cursor: pointer;
}

input[type='radio'] + label::before,
input[type='checkbox'] + label::before {
	display: block; position: absolute; top: 0.25em; left: 0.25em;
	font-family: 'Icons';
	content: '';
}

input[type='checkbox'] + label::before {
	content: '\e25d';
}
input[type='checkbox']:checked + label::before {
	content: '\e25c';
}
input[type='radio'] + label::before {
	content: '\e25e';
}
input[type='radio']:checked + label::before {
	content: '\e25f';
}

/* Validator */

input.error,
textarea.error {
	background: #933;
}
input[type='checkbox'].error + label::before,
input[type='radio'].error + label::before {
	color: #f00;
}
.form-error {
	padding: 0 1em; border-radius: 0.2em;
	background: #933;
	font-size: 0.8em;
}