/* 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,b,u,i,center,dl, dt,dd,ol,
ul,li,fieldset,form,label,input,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;}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;}

/* Font
================================================== */

body, p, td, div, span{
	font-family: Helvetica, Arial, sans-serif;
	color: #333;
	font-size: 20px;
	font-weight: 300;
	line-height: 1.4;
}

/* Basics
================================================== */
					
body *{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	outline: none;
}

html{
	height: 100%;
}

h1, h2, h3, h4{
	line-height: 1.2;
}

b, strong{
	font-weight: bold;
}

i, em{
	font-style: italic;
}

a{
	text-decoration: none;
}

p{
	margin: 10px 0;
}

img {
	max-width: 100%;
	height: auto;
}

/* Specific
================================================== */

h1{
	font-size: 60px;
}

body{
	background: #222;
	display: table;
	width: 100%;
	height: 100%;
}

body .wrapper{
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	width: 100%;
	height: 100%;
	padding: 10%;
}

body .wrapper .container{
	display: inline-block;
	background: #fff;
	width: 100%;
	max-width: 700px;
	padding: 50px;
	border-radius: 2px;
}