@font-face {
  font-family: 'Open Sans Condensed';
  src: url('../fonts/OpenSans-CondLight.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

@font-face {
  font-family: 'Open Sans Condensed Bold';
  src: url('../fonts/OpenSans-CondBold.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

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

	/* style */

	*,
	*:before,
	*:after { border-radius: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; outline: none; padding: 0; }

html,
body {
  height: 100%;
  background-color: #000;
    background: url(../images/gg-black.jpg) no-repeat left top fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}

		body { cursor: default; font: 100 1.4em/1 'Open Sans Condensed', 'Helvetica', sans-serif; color: #ffffff; }

			a { color: #ac1503; text-decoration: none; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; }

				a:hover { color: #ffffff; }

	h1 { font-weight: 300; }

	h2 { font-weight: 300; margin: 3em 0 1em 0; color: #fff;}

	p { margin: 2em 0; }

	pre { background: #34495E; color: #ECF0F1; line-height: 1.4; padding: 2em; tab-size: 4; }

header { background: rgba(0, 0, 0, 0.5); height: 8em; }

	table { border-collapse: collapse; border-spacing: 0; width: 100%; }

		th,
		td { font-weight: 300; line-height: 1; padding: 1em; text-align: left; vertical-align: middle; }

			tbody th { font-family: 'Consolas', monospace; }

			tbody tr:nth-child(2n+1) { background: #ECF0F1; }



		#social { margin: 1rem auto; overflow: hidden; }

			#github,
			#tweet { float: left; }

section.top { padding-left: 1em; padding-right: 1em; line-height: 1.9em;}
.top h1 { color: #ffffff; font-family: 'georgia', serif; font-size: 1.3em; font-style: italic; }
.top h2 { font-size: 1.2em; margin-top: 0;}

section.disclaimer { padding-left: 1em; padding-right: 1em; padding-bottom: 3em; line-height: 1.4em;}

		footer { background: #7F8C8D; color: #BDC3C7; font-size: 1rem; margin: 0; max-width: 100%; padding: 2em; text-align: center; width: 100%; }

			footer a { color: #ECF0F1; }

.topbar { height: 5em; padding: 1em; }
.logo { float: left; padding-left: 0.3em; padding-top: 0.2em; }
.title { color: #ffffff; font-family: 'georgia', serif; font-size: 1.2em; line-height: 1.2em; font-style: italic; position: relative; top: 50%; padding-left: 5em; }


section.start { width: 100%; text-align: center; }
.logo_start { padding-top: 1em; padding-bottom: 1em; }
.logo_start img { max-width: 50%; }
.title_start { color: #ffffff; font-family: 'georgia', serif; font-size: 1.3em; font-style: italic; }

	/* menu */

  #intro { padding: 5px 10px 5px 10px; line-height: 1.2em;}

	#question-block { position: absolute; bottom: 0; width: 100%;}

	#question-block a { color: #FFF; }

  .guide { padding: 5px 10px 15px 10px; border-bottom: 1px solid #fff;}

  .back { float: left; width: 50%; padding: 15px 10px 15px 10px; }
  .back:before { font-family: 'icomoon';
                                     speak: none;
                                     font-style: normal;
                                     font-weight: normal;
                                     font-variant: normal;
                                     text-transform: none;
                                     line-height: 1; content: '\e2b5'; 
                                     float: left; margin-right: 0.5em; 
                                     -webkit-font-smoothing: antialiased;
                                     -moz-osx-font-smoothing: grayscale; }
  .back a { display:block; height:100%; width:100%; text-decoration: none; }

  .start-over { float: right; width: 50%; padding: 15px 10px 15px 10px; text-align: right; }
  .start-over:before { font-family: 'icomoon';
                                     speak: none;
                                     font-style: normal;
                                     font-weight: normal;
                                     font-variant: normal;
                                     text-transform: none;
                                     line-height: 1; content: '\e28e'; 
                                     float: right; margin-left: 0.5em; 
                                     -webkit-font-smoothing: antialiased;
                                     -moz-osx-font-smoothing: grayscale; }
  .start-over a { display:block; height:100%; width:100%; text-decoration: none; }

	.question { clear:both; border-top: 1px solid #fff; border-bottom: 1px solid #fff; padding: 10px 10px 10px 10px; font-size: 1.3em; line-height: 1.4em; }

  .half-left { float: left; width: 50%; padding: 15px 10px 15px 10px; border-right: 1px solid #fff; }
  .half-left:before { font-family: 'icomoon';
                                     speak: none;
                                     font-style: normal;
                                     font-weight: normal;
                                     font-variant: normal;
                                     text-transform: none;
                                     line-height: 1; content: '\e2b1'; 
                                     float: right; margin-left: 1em; 
                                     -webkit-font-smoothing: antialiased;
                                     -moz-osx-font-smoothing: grayscale; }
  .half-left a { display:block; height:100%; width:100%; text-decoration: none; }

  .half-right { float: right; width: 50%; padding: 15px 10px 15px 10px;}
  .half-right:before { font-family: 'icomoon';
                                     speak: none;
                                     font-style: normal;
                                     font-weight: normal;
                                     font-variant: normal;
                                     text-transform: none;
                                     line-height: 1; content: '\e2b1'; 
                                     float: right; margin-left: 1em; 
                                     -webkit-font-smoothing: antialiased;
                                     -moz-osx-font-smoothing: grayscale; }  
  .half-right a { display:block; height:100%; width:100%; text-decoration: none; }

  .reference { clear:both; border-top: 1px solid #fff; padding: 10px 10px 10px 10px; }

  .bottom { padding: 15px 10px 15px 10px; border-right: 1px solid #fff; }

  .connection { font-size: 0.9em; color: #ffffff; padding-top: 0.3em; }

  .reference-guide { clear:both; border-top: 1px solid #fff; padding: 10px 10px 10px 10px; }

  .reference-guide:before { font-family: 'icomoon';
                                     speak: none;
                                     font-style: normal;
                                     font-weight: normal;
                                     font-variant: normal;
                                     text-transform: none;
                                     line-height: 1; content: '\e0c4'; 
                                     float: right; margin-left: 1em; line-height: 1.9em; 
                                     -webkit-font-smoothing: antialiased;
                                     -moz-osx-font-smoothing: grayscale; }

  #menu_start { position: absolute; bottom: 0; border-top: 1px solid #fff;  border-bottom: 1px solid #fff; width: 100%; background-color: #000000;}

  a.startapp { font-size: 1.6em; line-height: 2.0em; color: #ffffff; padding-left: 1em; }


	/* responsive */

	@media (max-width: 64rem) {

		body { font-size: 1em; }

			h2 { margin-top: 2em; }

	}