@font-face {
    font-family: 'documenta-sans-regular';
    src: url('../fonts/documenta-sans-regular.eot');
    src: url('../fonts/documenta-sans-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/documenta-sans-regular.woff') format('woff'),
         url('../fonts/documenta-sans-regular.ttf') format('truetype'),
         url('../fonts/documenta-sans-regular.svg#documenta-sans-regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'documenta';
    src: url('../fonts/documenta.eot');
    src: url('../fonts/documenta.eot?#iefix') format('embedded-opentype'),
         url('../fonts/documenta.woff') format('woff'),
         url('../fonts/documenta.ttf') format('truetype'),
         url('../fonts/documenta.svg#documenta') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'documenta-italic';
    src: url('../fonts/documenta-italic.eot');
    src: url('../fonts/documenta-italic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/documenta-italic.woff') format('woff'),
         url('../fonts/documenta-italic.ttf') format('truetype'),
         url('../fonts/documenta-italic.svg#documenta-italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'documenta-bold';
    src: url('../fonts/documenta-bold.eot');
    src: url('../fonts/documenta-bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/documenta-bold.woff') format('woff'),
         url('../fonts/documenta-bold.ttf') format('truetype'),
         url('../fonts/documenta-bold.svg#documenta-bold') format('svg');
    font-weight: normal;
    font-style: normal;
}        
		
		
		
		
body { margin: 0; padding: 0; border: 0; min-width: 320px; color: #fff; background:#f1503b; }
html, button, input, select, textarea, .pure-g [class *= "pure-u"] { font-family: documenta; }
p, td { line-height: 1.5; }
ul { padding: 0 0 0 20px; }

th { background: #eee; white-space: nowrap; }
th, td { padding: 10px; text-align: left; vertical-align: top; font-size: .9em; font-weight: normal; border-right: 1px solid #fff; }
td:first-child { white-space: nowrap; color: #008000; width: 1%; font-style: italic; }

h1 {
    font-size: 26px;
    margin: 0 0 20px;
    color: #fff;
}

h2 {
	font-size: 4.125rem;
	margin: 0px 0px 40px 0px;
}

h3 {
    font-size: 18px;
    margin: 15px 0 10px;
}
h4 {
    font-size: 16px;
    margin: 10px 0;
}
h5 {
	font-size: 30px;
	margin: 10px 0px 20px 0px;
	float: left;
	width: 100%;
}
h6 {
    font-size: 12px;
    margin: 5px 0;
}

strong { font-weight: bold; }
em { font-style: italic; }
ul { list-style-type: circle; }
ol { list-style-type: decimal; }
ol li { list-style-type: decimal; margin-left: 20px; }

.button {
	font-family: 'documenta-sans-regular';
	font-size:12px;
	width: auto;
	padding: 5px 24px;
	color: #ffffff;
	background-color: transparent;
	border: 1px solid #fff;
	text-decoration: none;
	text-transform: uppercase;
}
.button:hover {
    background-color:#ffffff;
	color:#f1503b;
}

.button.restart-puzzle {
	cursor: pointer;
}

.inline-code { padding: 1px 5px; background: #eee; border-radius: 2px; }
pre { padding: 15px 10px; font-size: .9em; color: #555; background: #edf3f8; }
pre i { color: #aaa; } /* comments */
pre b { font-weight: normal; color: #cf4b25; } /* strings */
pre em { color: #0c59e9; } /* numeric */

/* Pure CSS */
.pure-button { margin: 5px 0; text-decoration: none !important; }
.button-lg { margin: 5px 0; padding: .65em 1.6em; font-size: 105%; }

/* required snapPuzzle styles */
.snappuzzle-wrap { position: relative; display: block; }
.snappuzzle-pile {
	position: relative;
	padding-left: 4rem;
}
.snappuzzle-piece { cursor: move; }
.snappuzzle-slot { position: absolute; background: #fff; opacity: .8; }
.snappuzzle-slot-hover { background: #eee; }
		
.logo {
	background: url('../images/logo.png');
	width: 255px;
	height: 155px;
	background-size: cover;
	margin-bottom: 60px;
	position: absolute;
	z-index: 22;
	margin-left: 9rem;
}
		

#puzzle-containment {
	border-top: 0px solid #eee;
	border-bottom: 0px solid #eee;
	background: transparent;
	margin: 0px 0;
	padding: 0px;
	text-align: center;
}

.pure-g {
	max-width: 100%;
	margin: auto;
}	

#puzzle_solved {
	display: none;
	text-align: left;
	position: relative;
	top: 20rem;
	padding-left: 18rem;
}

#puzzle_solved h2 {
	margin:0;
} 

#puzzle_solved p {
	width: 100%;
	clear: both;
	font-size: 1.8rem;
	padding-bottom: 20px;
}

#puzzle_solved .button {
	position: fixed;
	bottom: 0;
	left: 0;
	color: #f1503b;
	border-color: #f1503b;
}

#puzzle_solved .button.restart-puzzle {
	cursor: pointer;
	left: 325px;
}

.snappuzzle-wrap::before {
	content: '';
	color: #f1503b;
	position: absolute;
	text-align: center;
	padding-top: 375px;
	margin-left: -70px;
	opacity: 2;
	z-index: 1;
}