/* Reset */
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, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	-webkit-margin-after: 0px;
	-webkit-margin-before: 0px;
}

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: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
strong, b { font-weight: bold; }
i { font-style: italic; }
* { -webkit-margin-before: 0; -webkit-margin-after: 0; }
.clear { clear: both; }
textarea, label, input, select, button { cursor: pointer; }
sup  { vertical-align: super; font-size: smaller; }
img { width: auto; height: auto; max-width: 100%; }
a, input { transition: all .4s; }

body { background: #FFF; font: 400 12pt/1.4 'Arial', sans-serif; position: relative; width: 100%; min-height: 100vh; color: #636363; }
h1 { max-width: 100%; font: 16pt/1.1 'Open Sans', 'Arial', sans-serif; margin: 0 0 30px; letter-spacing: -1px; text-align: center; color: #0070ad; }
h2 { max-width: 100%; font: 12pt/1.3 'Open Sans', 'Arial', sans-serif; margin: 0 0 10px; color: #FFF; letter-spacing: -.5px; text-align: center; text-transform: uppercase; }

#registration { background: #FFF; box-shadow: 1px 1px 5px #bfbfbf; width: 565px; max-width: 100%; margin: 20px auto; }
#registration > img { display: block; }
#inner { padding: 25px 40px; text-align: center; }
form { text-align: center; }
#brought-by { font-weight: 600; font-size: 10pt; margin: 0 0 40px; letter-spacing: -.5px; }
#brought-by img { display: inline-block; vertical-align: middle; margin: 0 5px; width: 100px; }
#holder { width: 300px; max-width: 100%;  margin: auto; font-size: 0; }
.line { text-align: left; margin: 0 0 10px; }
.line label { text-align: left; position: relative; transition: all .4s; bottom: 28px; font-size: 10pt; }
.line label:after { content: '*'; display: inline-block; color: #FF1000; }
[type="text"]:focus + label, [type="text"].full + label { bottom: 43px; font-size: 11pt; color: #0070ad; }
[type="text"] { box-sizing: border-box; display: block; border: 0; border-bottom: 1px solid #CCC; transition: all .4s; width: 100%; background: #FFF; color: #000; font: 12pt 'Arial', sans-serif; }
[type="text"]:focus, [type="text"].full { border-color: #0070ad; }
::-webkit-input-placeholder { color: #b5b5b5; }
:-moz-placeholder { color: #b5b5b5; opacity: 1; }
::-moz-placeholder { color: #b5b5b5; opacity: 1; }
:-ms-input-placeholder { color: #b5b5b5; }
form p { text-align: left; font-size: 11pt; margin: 0 0 0 6px; font-weight: 700; }
.label { font-size: 0; margin: 10px 0; }
.label * { display: inline-block; vertical-align: top; }
.label [type="checkbox"] { width: 25px; margin: 3px 0 0; padding: 0; }
.label label { width: calc( 100% - 25px ); font-size: 10pt; text-align: left; }
[type="submit"] { padding: 11px 60px; font-size: 13pt; font-weight: 600; margin: 20px 0 0; overflow: hidden; color: #0070ad; background: 0; position: relative; border: 3px solid #0070ad; z-index: 1; }
[type="submit"]:hover { color: #FFF; }
[type="submit"]:after { width: 100%; height: 0; top: 50%; left: 50%; background: #0070ad; opacity: 0; transform: translate( -50%, -50% ) rotate( 45deg ); transition: all 0.4s; content: ' '; position: absolute; z-index: -1; }
[type="submit"]:hover:after { height: 360%; opacity: 1; }

form > div#success { text-align: center; font-size: 14pt; }

#lounge { font-size: 11pt; text-align: center; background: #12abdb; color: #FFF; padding: 20px; }

@media (max-width: 565px) {
	#registration { margin: auto; }
}

@media (max-width: 530px) {
	#inner { padding: 20px; }

	#brought-by img { margin-bottom: 20px; }
}