@charset "UTF-8";



body {
	background-color:#000;
	color: #fff;
  margin: 0 auto;
  position: relative;
  text-align: center;
  font-family: "Gotham SSm A", "Gotham SSm B", "Gotham", "Helvetica Neue", Arial, sans-serif;
	font-style: normal;
	font-weight: 400;
}

/*	intro */
#titlepage {
	position: absolute;
	height:100%;
	display: block;
	background-color:rgba(0,0,0,0.80);
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow:scroll;
	z-index:10000;
}

#titlecard {
  position: relative;
  display: block;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
  
.maintitle {
	font-size:7em;
	text-transform:uppercase;
	font-weight: 100;
}
.subtitle {
	font-size:1.1em;
	text-transform:uppercase;
	font-weight: 200;
}
	
	
/*	structure */

#wrapper {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow:scroll;
}

#header {
	display:block;
	position: relative;
	width: 90%;	
	height: 32px;
	background-color:#000;
	margin:0 auto 20px auto;
	padding:8px;
	border-bottom:1px solid #707070; 

}

#coinRow {
	margin-top: -30px;
	display:inline-block;
	position: relative;
	width: 100%;
	overflow: visible;
}

#btnRow {
	position: absolute;
	bottom: 28px;
	display: block;
	bottom: 14px;
	width: 100%;
	overflow: visible;
}

#essayRow {
	display:inline-block;
	position: relative;
	margin:0;
	padding: 20px;
}

/* header */
#logo {
	display:block;
	float:left;
	background-color: #000;
	text-align:left;
}

#sharebtn {
	display:block;
	float:right;
	clear: none;
	background-color: #000;
	text-align:right;
}	

#logo img {
	height:30px;
	width: 30px;
	margin: 0 0 4px 4px;
	opacity: .7;
}

#sharebtn img {
	diplay:inline-block;
	height:25px;
	width: 25px;
	margin: 4px;
	opacity: .7;
	cursor:pointer;
}


/*	coins */
#cointainer{
  width:90%;
  margin:5% auto 0px auto;
  overflow:visible;
  position:relative;
  border:0px solid white;
}

.coinHeads, .coinEdge, .coinLine, .coinTails {
	display:block;
	position:absolute;
	left: 0px;
}

.coinBox {
  display:inline-block;
	position:relative;
	width: 50px;
	height: 50px;
  margin:0 1px;
}

.coinHeads {
	height:100%;
	width:100%;
	z-index:30;
	top: 0px;
}

.coinEdge {
	height:100%;
	width:100%;
	z-index:20;
	top: 0px;
}


.coinLine {
	top: 50%;
	height:0px;
	width:100%;
	z-index:10;
}

.coinTails {
	top: 0px;
	height:100%;
	width:100%;
	z-index:40;
}


/*	thumb button */
#flipbtn {
  display:inline-block;
  width: 100px;
  height: 100px;
  margin:0 auto;
  border-radius: 400px;
  cursor:pointer;
  opacity: 0.8;
  position: relative;
}
#flipbtn:hover {
  opacity: 1;
}

#flipbtn svg {
  display: block;
  margin: 0 auto;
  position: relative;
  top: -10px;
}

#thumb {
  fill: #000;
  stroke: #fff;
  stroke-width: 1;
}

#flipbtn p {
  color: #fff;
  margin: 0px auto;
  position: relative;
  top: -30px;
  text-align: center;
  font-weight: 200;
  font-size: .9em;
}

/*	essay */

#essay {
	position:absolute;
	display: block;	
	text-align:center;
	padding:0px 10%;
	visibility:visible;
	left: 0;
	right:0;
}

/* sharing */
.overbox {
	display: block;
	position: absolute;
	background: rgba(0,0,0,0.9);
	z-index: 10000;
	border: 0px solid white;
	width: 100%;
	height: 100%;
	margin: 0;
	visibility:hidden;
}

.closex {
	diplay:inline-block;
	position:absolute;
	height:4% !important;
	width: 4%!important;
	top:2%;
	right:5%;
	margin: 0;
	opacity: .7;
	cursor:pointer;
}

.shareicon {
	position:relative; 
	top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
	
}

.shareicon img {
	diplay:inline-block;
	height:15%;
	width: 15%;
	margin: 5%;
	opacity: .7;
}

.closex:hover, .shareicon img:hover, #sharebtn img:hover, #logo img:hover {
	opacity:1;
}

.ui-slider {
	position: absolute;
	bottom: 14px;
	margin: 0 5% 0 5%;
	width: 90%;
	height: 10px !important;
	color: #000 !important;
	border-left: none;
	border-right: none;
	border-top: none;
	border-bottom: 1px solid #707070;
	background-color: rgba(0,0,0,0.00);
	background-image: none !important;
	border-radius: 0 !important;
	z-index:5000;
}

.ui-slider .ui-slider-handle {
	top: 0px !important;
	height: 10px !important;
	background-color:#000 ;
	color: #A6A3A3 !important;
	background-image:none !important;
	border-radius:0 !important;
	border-right: transparent;
	border-bottom: none;
	border-top: none;
	border-left: 1px solid #fff;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#sliderticks {
	position: absolute;
	bottom: 14px;
	margin: 0 5% 0 5%;
	width: 90%;
	height: 10px;
	background-color:none;
}

.tickmark {
	position: relative;
	top: -5px;
	display: inline-block;
	height: 2px;
	border-left: 1px solid #707070;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
}

:focus {
  outline-color: transparent;
  outline-style: none;
}