/* Colors 

bright green: #8AC007
light green: #eeefe9
border green: #cdd9ca
Dark Blueish: #333c42;
Dark Red: #662233;

Fonts



*/


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

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

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

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

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

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

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

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

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



* {
	box-sizing: border-box;
}


html, body {
	height: 100%;
}
body {
	font-family: 'BBGeomanist', 'Cherry Swash', 'Exo', 'Ubuntu', sans-serif;
	font-size: 18px;
	line-height: 1.6;
	font-weight: 300;
}
h1, h2, h3,
input, textarea,
a.add-option {
	font-family: 'Cherry Swash', 'Exo', 'Ubuntu', sans-serif;
	font-weight: 400;
}

html, body,
p,
h1, h2, h3, h4, h5, h6,
ul, ol, li {
	padding: 0;
	margin: 0;
}
#masthead,
#contents {
	padding: 7px 15px 10px;
}
#bot,
#colophon {
	padding: 15px;
}


a {
	text-decoration: none;
	color: #8AC007;
	display: inline-block;
	font-weight: 400;
	transition: color .3s, border-color .3s;
}
a:hover {
	color: #662233;
}
ul li {
	list-style: none;
}
ol {
	margin: 0 0 90px;
	list-style-position: inside;
}
ol li {
	margin: 0 0 30px;
}



svg {
	max-width: 100%;
	max-height: 100%;
	vertical-align: top;
	transition: fill .3s;
	overflow: visible;
}

fieldset {
	border: none;
	background: #333c42;
	border-radius: 3px;
	padding: 0 15px 15px;
	margin: 30px 0;
	position: relative;
}
fieldset fieldset {
	background: #eeefe9;
	border-radius: 0;
	padding: 60px 15px 30px;
	margin: 15px -15px 30px;
	border: 1px dashed #333c42;
	border-width: 0 1px;
	color: #333c42;
}
fieldset legend {
    border-radius: 3px;
    padding: 0;
    position: absolute;
    top: 30px;
    font-weight: 500;
}
fieldset input {
	background: transparent;
	border-style: dashed;
	border-color: transparent;
	color: #eeefe9;
}
fieldset input:placeholder-shown {
	border-color: transparent;
}
fieldset input:hover {
	border-color: #eeefe9;
}
fieldset input:focus {
	border-color: #fff;
	border-style: solid;
	background: #fff;
}
fieldset fieldset input {
	color: #333c42;
	line-height: 30px;
	padding: 0 8px;
}
fieldset fieldset input:placeholder-shown {
	border-color: #cdd9ca;
	background: #fff;
}
fieldset fieldset input:hover {
	border-color: #8AC007;
}
fieldset fieldset input:focus {
	border-color: #662233;
}
fieldset fieldset li {
	margin: 0 0 30px;
}
fieldset fieldset li + li:not(:last-of-type) {
	border-top: 1px solid #cdd9ca;
}
fieldset fieldset li label {
	display: block;
	margin: 0 0 6px;
}
fieldset fieldset li label + label {
	margin-left: 9px;
	font-size: 15px;
}
fieldset fieldset li a.close {
	height: 30px;
	width: 30px;
	line-height: 30px;
	font-size: 18px;
}
p .line {
	display: inline-block;
}
input,
textarea,
a.add-option {
	padding: 10px 16px;
	line-height: 30px;
	border-radius: 3px;
	border: 1px solid #333c42;
	background: #fff;
	font-size: 100%;
	margin: 15px 0 0;
	min-width: 60px;
	-webkit-appearance: none;
	transition: color .3s, border .3s, background .3s;
}
input, textarea {
	color: #333c42;
}
input:focus, 
textarea:focus {
	border-color: #662233;
	color: #662233;
}
input:focus::placeholder, 
textarea:focus::placeholder {
	color: rgba(102, 34, 51, .2);
}
select {
	color: #8AC007;
	font-family: inherit;
	font-weight: inherit;
	font-size: 100%;
	vertical-align: baseline;
	-moz-appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 1px dotted #8AC007;
	border-width: 0 0 1px;
	border-radius: 0;
	padding: 4px 15px 0 0;
	margin: 0;
	max-width: 100%;
	line-height: 18px;
	font-weight: 400;
	cursor: pointer;
	transition: color .3s, border .3s;
}
select:hover {
	color: #662233;
	border-color: #662233;
}
span.select {
	position: relative;
	display: inline-block;
}
span.select:before,
span.select:after {
	content: '';
	display: block;
	position: absolute;
	top: 4px;
	right: 0;
	height: 18px;
	width: 12px;
	background-size: contain;
	z-index: 4;
	pointer-events: none;
}
span.select:before {
	background: transparent url('images/icon-select-green.svg') no-repeat center center;
}
span.select:after {
	background: transparent url('images/icon-select.svg') no-repeat center center;
	opacity: 0;
	transition: opacity .3s;
}
span.select:hover:after {
	opacity: 1;
}
select:focus,
select option:focus {
	outline: none;
}
select:-moz-focusring { /* hack: remove FF's focus ring */
    color: transparent;
    text-shadow: 0 0 0 #333c42;
}

input[type="text"],
input[type="email"],
textarea {
	width: 100%;
}
input[type="number"] {
	width: 100px;
	margin: 5px;
}
input[type="submit"] {
	background: #8AC007;
	color: #fff;
	border: none;
	padding: 11px 17px;
	cursor: pointer;
}
input[type="submit"]:hover {
	background: #662233;
}

:placeholder-shown {
	border-color: #cdd9ca;
}
::placeholder {
	color: #cdd9ca;
	opacity: 1;
	transition: color .3s;
}

form .helper,
form .robocop {
	display: none;
}

a.add-option {
	background: #333c42;
	color: #eeefe9;
	border: none;
	width: 100%;
}
a.add-option:hover {
	border: none;
	background: #662233;
}
a.add-option:before {
	content: '+ ';
}


body {
	color: #666960;
	background: #eeefe9;
}

#page {
	position: relative;
	padding: 0 0 200px;
	min-height: 100%;
}

#masthead {
	background: rgba(255, 255, 255, 1);
	border-bottom: 1px solid #cdd9ca;
	position: relative;
}

#masthead:after {
	content: '';
	display: block;
	clear: both;
}
#logo {
	content: '';
	display: block;
	float: left;
	height: 50px;
	width: 50px;
	margin: 10px 14px 0 0;
}
#logo svg {
	fill: #8AC007;
}
#branding {
	position: relative;
	float: left;
	width: calc(100% - 70px);
}

h1 {
	font-weight: 400;
	height: 40px;
	width: 206px;
	overflow: hidden;
	font-size: 42px;
	line-height: 1.1;
	letter-spacing: -.06em;
	display: block;
	margin: 2px 0 4px -11px;
	padding: 0;
}
h1 a {
	width: 100%;
	height: 100%;
}
h1 .green {
	text-transform: lowercase;
}
.tagline {
	display: block;
	font-size: 12px;
	line-height: 1.6;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: .18em;
}

#contents {
	background: #333c42;
	/*background: #662233;*/
	position: fixed;
	bottom: 0;
	left: 0;
	width: calc(100% + 2px);
	z-index: 9;
	padding: 0;
	border-top: 2px solid #eeefe9;
	margin: 0 -1px;
}
#contents li {
	display: inline-block;
	width: calc(20% + 2px);
	text-align: center;
	text-transform: uppercase;
	font-size: 12px;
	line-height: 1;
	margin: 0 -1px;
}
#contents a {
	color: #fff;
	color: #eeefe9;
	padding: 15px 0;
	width: 100%;
	border: 2px solid transparent;
	border-width: 0 2px;
}
#contents a .icon {
	display: block;
	margin: 0 auto 15px;
	width: 26px;
	height: 18px;
	line-height: 20px;
}
#contents a svg {
	fill: #333c42;
	fill: #eeefe9;
	vertical-align: middle;
}
#contents a.active {
	font-weight: 700;
	background: #662233;
	border-color: #eeefe9;
}

#bot p {
	margin: 0 0 30px;
}

section {
	padding: 15px 0 30px;
}
section a {
	border-bottom: 1px dotted #8AC007;
}
section a:hover {
	border-bottom: 1px solid #662233;	
}
#decision {
	background: #333c42;
	box-shadow: 0 0 40px rgba(0,0,0,.3) inset;
	color: #eeefe9;
	border-radius: 5px;
	padding: 25px 75px 1px 30px;
	font-weight: 300;
	position: relative;
}
a.close {
	display: inline-block;
	border: 1px solid #8AC007;
	border-radius: 3px;
	border-radius: 50%;
	height: 50px;
	line-height: 50px;
	font-size: 25px;
	width: 50px;
	text-align: center;
	transition: color .5s, border .5s, transform .5s;
}
#decision a.close,
fieldset a.close {
	position: absolute;
	right: 16px;
	top: 16px;
}
#decision a.close:hover,
fieldset a.close:hover {
	color: #eeefe9;
	border-color: #eeefe9;
	transform: rotate(360deg);
}
li {
	position: relative;
}
li .close,
fieldset li a.close {
	position: absolute;
	top: 16px;
	right: 1px;
	border-radius: 3px;
	color: #eeefe9;
	border-color: #eeefe9;
	background: #333c42;
}
li .close:hover,
fieldset li .close:hover {
	background: #662233;
	border-color: #eeefe9;
	transform: none;
}
#decision .decision {
	font-size: 24px;
}

section h3 {
	color: #662233;
	font-size: 25px;
	font-weight: 400;
}
section h3 span {
	display: inline-block;
}

section form {
	margin: 30px 0 60px;
}

div.option {
	margin: 0 -45px 30px 0;
	font-size: 16px;
}
#decision h3 {
	margin: 0 0 30px;
}
#decision .decision small {
	display: block;
	font-size: 14px;
	font-weight: 200;
}
.option h4 {
	border-bottom: 1px solid #eeefe9;
	margin: 0 0 30px;
}
.option h5 {
	text-transform: uppercase;
	font-size: 100%;
}
.option > div {
	display: inline-block;
	width: 50%;
	vertical-align: top;
}
/*.option .pros ul {
	color: #8AC007;
}
.option .cons ul {
	color: #dd5566;
}*/
.option ul {
	margin: 0 0 30px;
}
.option .light {
	opacity: .7;
}
.option .lighter {
	opacity: .4;
}



/* Roll */

ol.dice-presets {
	margin: 0;
	font-size: 12px;
}
.dice-presets li {
	display: inline-block;
	margin: 0 15px 15px 0;
}
.dice-presets a {
	padding: 0;
	border: none;
}




#app li img {
	width: 375px;
	max-width: 100%;
	display: block;
	margin: 15px 0;
	border-radius: 4px;
	box-shadow: 4px 4px 4px rgba(51, 60, 66, .3);
}
#app small {
	display: block;
	font-size: 14px;
}

#colophon {
	border-top: 1px solid #cdd9ca;
	font-size: 13px;
	line-height: 1.6;
	position: absolute;
	bottom: 0;
	padding-bottom: 90px;
	width: 100%;
}
#colophon p {
	margin: 0 0 15px;
}
#colophon .blah {
	font-size: 11px;
}



.hidden {
	display: none;
}

#contents #nav-about {
	display: none;
}


@media (min-width: 700px) {

	#masthead,
	#contents,
	#bot {
		padding-left: 30px;
		padding-right: 30px;
	}
	
	
	
	#decision {
		max-width: 850px;
		margin: 30px auto;
		padding: 30px 75px 1px 30px;
	}
	section {
		max-width: 850px;
		margin: 30px auto;
		border: 1px solid #cdd9ca;
		border-radius: 5px;
		padding: 30px;
		background: #fff;
	}
	
	#flip input[type="text"] {
		width: calc(100% - 154px);
		margin: 0 6px;
	}
	
	fieldset {
		margin: 30px -15px;
	}
	fieldset fieldset ul {
		padding: 0 0 0 18px;
	}
	fieldset fieldset li {
		list-style: square;
		color: #cdd9ca;
	}
	fieldset fieldset li label {
		color: #333c42;
	}

}

@media (min-width: 950px) {
	
	#branding {
		width: 350px;
	}
	.tagline span {
		display: inline-block;
	}
	
	fieldset {
		margin: 30px -30px;
	}
	fieldset fieldset {
		padding: 60px 30px 30px;
	}
	fieldset fieldset ul {
		padding: 0;
	}
	
	#contents {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translate(0,-50%);
		bottom: auto;
		left: auto;
		width: calc(100% - 300px);
		max-width: 500px;
		background: none;
		border: none;
	}
	
	#contents a {
		color: #bdc9ba;
		padding: 8px 0;
	}
	#contents a .icon {
		border: none;
/*		padding: 8px;*/
		transition: transform .3s;
	}
	#contents a svg {
		fill: #adb9aa;
	}
	#contents a:hover {
		color: #662233;
	}
	#contents a:hover .icon {
		transform: scale(1.1, 1.1);
	}
	#contents a:hover svg {
		fill: #662233;
	}
	#contents a.active {
		color: #8AC007;
		background: none;	
	}
	
	#contents a.active .icon {
	}
	#contents a.active svg {
		fill: #8AC007;
	}
	
	
	section {
		padding: 56px 60px;
	}
	#decision {
		padding: 56px 70px 26px 60px;
	}
	
	#colophon {
		padding: 30px;
		text-align: center;
	}
	#colophon p {
		margin: 0 auto 15px;
		max-width: 600px;
	}

}

@media (min-width: 1150px) {
	
	fieldset {
		margin: 30px -45px;
		padding: 0 30px 15px;
	}
	fieldset fieldset {
		padding: 60px 45px 30px;
		margin: 15px -30px 30px;
	}
	
	section,
	#decision {
		max-width: 900px;
		padding: 56px 90px 26px;
	}

}

@media all and (display-mode: standalone) {

	#nav-app {
		display: none !important;
	}
	#nav-about {
		display: inline-block !important;
	}

}