* {
	box-sizing: border-box;
}
html,
body {
	padding: 60px 0 0;
	margin: 0;
	height: 100%;
	width: 100%;
	font-family: 'Roboto', 'Helvetica', 'Verdana', sans-serif;
	font-weight: 400;
	font-display: optional;
	color: #132958;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html.standalone {
	overflow: hidden;
}
html.standalone #page {
	display: none;
}
body {
	padding: 10px 0;
	background: #132958;
}
p {
	margin: 0;
}
a {
	text-decoration: underline;
}
/*
**********************************************************************
* Helpers
**********************************************************************
*/
.left {
	float: left;
}
.right {
	float: right;
}
.bold {
	font-weight: 500;
}
.show {
	display: block !important;
}
.showFlex {
	display: flex !important;
}
.hide {
	display: none !important;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.gonna-move {
	transition: transform .15s linear;
}
.move-out-right {
	transform: translateX(100%);
}
.move-out-left {
	transform: translateX(-100%);
}
.move-out-up {
	transform: translateY(-100%);
}
.move-out-down {
	transform: translateY(100%);
}
.move-in {
	transform: translateX(0%);
}
.gonna-fade {
	transition: opacity .15s linear;
}
.fadeOut {
	opacity: 0;
}
.nowrap {
	white-space: nowrap;
}
/*.not-iframe {
	max-height: none !important;
}*/
/*
**********************************************************************
* Layout
**********************************************************************
*/
#outer-wrap {
	width: 100%;
	height: 100%;
}
.web #outer-wrap {
	max-height: 600px;
}
#wrap {
	margin: auto;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	position: relative;
	background-color: #1d3d82;
	/*overflow: hidden;*/
}
@media screen and (min-width: 450px) {
	#wrap {
		max-width: 400px;
		border: none;
		border-radius: 8px;
		box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
	}
	#modal-share {
		max-width: 400px;
		margin: auto;
	}
}
#wrap > * {
	flex: 1;
}
/*
**********************************************************************
* Header
**********************************************************************
*/
header {
	flex: 0.5 !important;
}
#logo {
	padding-top: 25px;
	margin: auto;
	width: 138px;
}
#logo img {
	width: 100%;
}
/*
**********************************************************************
* Coin
**********************************************************************
*/
#coinflip {
	flex: 0;
	display: flex;
	justify-content: center;
	flex-direction: column;
}
#coin-wrap {
	width: 220px;
	height: 220px;
	position: relative;
	margin: auto;
}
.coin {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-ms-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	z-index: 10;
	font-size: 39px;
}
#coin-wrap.active {
	transform: scale(0.9);
}
#coin-wrap.active #coin-shadow {
	display: none;
}
#coin-shadow {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.4);
	box-shadow: -3px 3px 5px rgba(0, 0, 0, 0.4);
	z-index: 0;
}
#coin-shadow.flip {
	animation: shadow 1s linear 1;
}
.coin.tails-to-heads {
	animation: tails-to-heads 1s linear 1;
}
.coin.heads-to-heads {
	animation: heads-to-heads 1s linear 1;
}
.coin.tails-to-tails {
	animation: tails-to-tails 1s linear 1 normal forwards;
}
.coin.heads-to-tails {
	animation: heads-to-tails 1s linear 1 normal forwards;
}
.coin.tails {
	transform: rotateX(180deg);
}
.coin.heads {
	transform: rotateX(0deg);
}
.coin .front {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.coin .back {
	width: 100%;
	height: 100%;
	background: #f7941e;
	border-radius: 50%;
	transform: rotateY(180deg) translateZ(10px);
/*	-webkit-transform: rotateY(180deg) translateZ(10px);
	-ms-transform: rotateY(180deg) translateZ(10px);*/
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.coin .front_b {
	width: 100%;
	height: 100%;
	background: #efcb11;
	border-radius: 50%;
	transform: translateZ(-1px);
	/*-webkit-transform: translateZ(-1px);*/
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
.coin .back_b {
	width: 100%;
	height: 100%;
	background: #efcb11;
	border-radius: 50%;
	transform: translateZ(-9px);
	/*-webkit-transform: translateZ(-9px);*/
	position: absolute;
	top: 0;
	left: 0;
	z-index: -2;
}
.coin:before {
	content: "";
	width: 100%;
	height: 9px;
	background: #efcb11;
	position: absolute;
	top: 50%;
	z-index: 1;
	transform: rotateX(-90deg);
	transform-origin: 50% -1px;
}
.coin .front:after {
	content: "";
	background: url(images/coin/heads.png);
	background-size: contain;
	padding: 16px 0 0 0;
	width: 100%;
	height: 100%;
	font-size: 5em;
	font-weight: bold;
	color: #fbb041;
	line-height: 1;
	text-align: center;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 4;
}
.coin .back:after {
	content: "";
	background: url(images/coin/tails.png);
	background-size: contain;
	padding: 50px 0 0 0;
	width: 100%;
	height: 100%;
	font-size: 3em;
	font-weight: bold;
	color: #fbb041;
	line-height: 1;
	text-align: center;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -4;
	transform: rotate(180deg);
}
/*
**********************************************************************
* Text Area
**********************************************************************
*/
#text-area {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#text-area p {
	text-align: center;
	color: #fff;
	font-size: 21px;
	font-weight: 500;
}
#text-area p.front-stats {
	font-size: 16px;
}
.gold {
	color: #ffdb29;
}
/*
**********************************************************************
* Global Stats
**********************************************************************
*/
#stats {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: #132958;
	border-top: 2px solid #fff;
}
#global-stats {
	width: 100%;
	right: 0;
	padding: 10px 40px;
	height: 100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	flex: 1;
}
#stats p {
	font-size: 14px;
	display: block;
	color: #fff;
}
#progress-bar {
	width: 100%;
	height: 6px;
	background-color: #f5d328;
	margin: 11px 0 15px;
	border-radius: 3px;
	overflow: hidden;
	position: relative;
}
#progress {
	height: 6px;
	width: 100%;
	position: absolute;
	top: 0;
	left: -50%;
	background-color: #b22234;
}
#stats-bottom-line {
	text-align: center;
}
/*
**********************************************************************
* Footer
**********************************************************************
*/
#footer {
	flex: 0 !important;
	background-color: #0e1d3b;
	padding: 15px 0;
}
#footer p,
#footer a {
	color: #caccff;
	font-size: 12px;
	text-align: center;
}
#link-row {
	padding-top: 4px;
}
#link-row a {
	padding-top: 5px;
	margin: 0 10px;
}
/*
**********************************************************************
* Buttons
**********************************************************************
*/
#result {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
}
.btn-row {
	display: flex;
	justify-content: space-around;
}
.btn-wrap {
	padding-top: 11px;
}
.btn {
	font-size: 16px;
	line-height: 22px;
	padding: 12px;
	font-weight: 500;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
}
.btn.share-btn {
	background-color: #ffdb29;
	color: #000;
}
.btn.share-btn img {
	margin-bottom: -3px;
	margin-right: 8px;
}
.btn.gold-btn {
	border: 2px solid #ffdb29;
	color: #ffdb29;
	padding: 10px 25px;
}
/*
**********************************************************************
* Modal
**********************************************************************
*/
.modal {
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #0d1d3e;
	z-index: 20;
	text-align: center;
	color: #fff;
	transform-style: preserve-3d;
	transform: translateZ(100px);
}
.modal.right {
	transform: translateX(100%) translateZ(100px);
}
.modal.left {
	transform: translateX(-100%) translateZ(100px);
}
.modal.top {
	transform: translateY(-100%) translateZ(100px);
}
.modal.move-in {
	transform: translateX(0%) translateY(0%) translateZ(100px);
}
#modal-share, #modal-stats, #modal-stats-landing {
	min-height: 100%;
	display: flex;
	flex-direction: column;
}
/*
**********************************************************************
* Share Result
**********************************************************************
*/
.share-head, .share-text, .share-bottom, .main-stats {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
}
.modal h3 {
	font-weight: 500;
	font-size: 1.5em;
	margin: 0;
}
.modal h4 {
	font-weight: 500;
	font-size: 1.4em;
	margin: 1em 0 0 0;
}
.share-coin {
	width: 220px;
	margin: auto;
	display: block;
}
.share-text {
	font-size: 21px;
	font-weight: 500;
}
.share-button-row {
	margin-bottom: 25px;
	padding: 0 25px;
	display: flex;
	justify-content: space-around;
}
.share-button-row img {
	width: 48px;
}
#share-link {
	display: flex;
	justify-content: center;
}
#share-link p {
	font-weight: 500;
}
#share-link img {
	margin-bottom: -3px;
	margin-right: 10px;
}
#copy-url {
	cursor: pointer;
}
#copy-url-input, #copy-stats-url-input {
	position: absolute;
	left: -200%;
}
/*
**********************************************************************
* Share landing page
**********************************************************************
*/
#share-landing {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}
/*
**********************************************************************
* My Stats
**********************************************************************
*/
#modal-stats, #modal-stats-landing {
	padding: 0 15px;
	max-width: 400px;
	margin: auto;
}
.last-5-flips {
	margin-bottom: 30px;
}
.coin-row {
	display: flex;
	justify-content: space-between;
}
.last-5-flips p, .overall-stats > p {
	text-align: left;
	padding-bottom: 15px;
}
.coin-row img {
	width: 17%;
	height: 17%;
}
.statbar-wrap {
	display: flex;
}
.stat-bars {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding-top: 6px;
	/*background-color: #b22234;*/
}
.stat-bars > div {
	height: 6px;
	border-radius: 3px;
}
.head-bar {
	margin-bottom: 25px;
	background-color: #b22234;
}
.tail-bar {
	background-color: #f5d328;
}
.stat-headings {
	padding-left: 10px;
}
.stat-heads-text {
	margin-bottom: 12px;
}
/*
**********************************************************************
* Cookie notification
**********************************************************************
*/
#cookie-notification {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0,0,0,0.8);
	padding: 15px;
}
#cookie-wrap {
	max-width: 710px;
	margin: auto;
	display: flex;
}
#cookie-notification p, #cookie-notification a {
	font-size: 13px;
	color: #fff;
	line-height: 1.1em;
}
#cookie-notification a {
	text-decoration: none;
	padding: 8px 24px;
	border: 1px solid #fff;
	border-radius: 3px;
	white-space: nowrap;
}
#cookie-notification .cookie-left {

}
#cookie-notification .cookie-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 15px;
}
/*
**********************************************************************
* Ads Model
**********************************************************************
*/
/*#modal-ads {
    background: rgba(0, 0, 0, 0.85);
}*/
#modal-ads-outer {
    position: relative;
    display: block;
    width: 100%;
	height: 100%;
	/*overflow-y: scroll;*/
}
#modal-ads-wrap {
	width: 405px;
	max-width: 100%;
    padding: 0 15px;
    position: absolute;
    left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: left;
}
#modal-ads-wrap h3 {
	font-size: 1.9em;
	text-align: center;
	margin-bottom: 40px;
	text-transform: uppercase;
}
/*.ad-copy {
	padding-bottom: 20px;
}*/
.ad-copy p {
	font-size: 18px;
    line-height: 1.4;
    padding: 0 20px 20px;
}
.modal-us .ad-copy p {
	text-align: center;
}
a.close-modal.close-admodal {
    float: left;
    font-weight: 400;
    font-size: 1.15em;
    color: #fff;
    margin-top: 16px;
}
.modal-us a.close-modal.close-admodal {
	display: block;
	text-align: center;
	float: none;
}
a.close-modal.close-admodal:hover {
    color: #ffdb29;
}
a.ad-nav-btn {
    float: right;
    width: 184px;
    height: 52px;
    border-radius: 5px;
    background: #ffdb29;
    text-decoration: none;
    font-size: 1em;
    font-weight: 600;
	line-height: 52px;
	text-align: center;
    color: #1b1b1b;
}
a.ad-nav-btn:hover {
    background: #ececec;
}
.ads-popup-image {
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
}
.ads-popup-image img {
    max-width: 100%;
    height: auto;
}

#ads-popup-frame {
	text-align: center;
}

.ads-bottom-text {
	padding-top: 25px;
}

.ads-bottom-text p {
	text-align: center;
	line-height: 21px;
}

@media only screen and (max-width: 400px) {
	html, body {
		padding: 0;
	}
	.modal #modal-ads-wrap h3 {
		font-size: 1.5em;
		margin-bottom: 20px;
	}
	.modal #modal-ads-wrap p {
		font-size: 1em;
	}
	.modal #modal-ads-wrap .ads-bottom-text p {
		font-size: 0.8em;
	}
	a.close-modal.close-admodal {
		font-size: 1em;
		margin-top: 7px;
	}
	a.ad-nav-btn {
		font-size: 0.8em;
		width: 148px;
		height: 36px;
		line-height: 36px;
	}
}

/*
**********************************************************************
* Animations
**********************************************************************
*/
@keyframes heads-to-tails {
	0% {
		transform: rotateX(0) scale(1);
	}
	25% {
		transform: rotateX(225deg) scale(1.8);
	}
	50% {
		transform: rotateX(450deg) scale(2.3);
	}
	75% {
		transform: rotateX(675deg) scale(1.8);
	}
	100% {
		transform: rotateX(900deg) scale(1);
	}
}
@keyframes tails-to-heads {
	0% {
		transform: rotateX(180deg) scale(1);
	}
	25% {
		transform: rotateX(405deg) scale(1.8);
	}
	50% {
		transform: rotateX(630deg) scale(2.3);
	}
	75% {
		transform: rotateX(855deg) scale(1.8);
	}
	100% {
		transform: rotateX(1080deg) scale(1);
	}
}
@keyframes heads-to-heads {
	0% {
		transform: rotateX(0) scale(1);
	}
	25% {
		transform: rotateX(180deg) scale(1.8);
	}
	50% {
		transform: rotateX(360deg) scale(2.3);
	}
	75% {
		transform: rotateX(540deg) scale(1.8);
	}
	100% {
		transform: rotateX(720deg) scale(1);
	}
}
@keyframes tails-to-tails {
	0% {
		transform: rotateX(180deg) scale(1);
	}
	25% {
		transform: rotateX(360deg) scale(1.8);
	}
	50% {
		transform: rotateX(540deg) scale(2.3);
	}
	75% {
		transform: rotateX(720deg) scale(1.8);
	}
	100% {
		transform: rotateX(900deg) scale(1);
	}
}
@keyframes shadow {
	0% {
		transform: translate(0%, 0%) scale(1);
		background-color: rgba(0, 0, 0, 0.3);
		box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
	}
	50% {
		transform: translate(-80%, 80%) scale(0.8);
		background-color: rgba(0, 0, 0, 0.05);
		box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.05);
	}
	100% {
		transform: translate(0%, 0%) scale(1);
		background-color: rgba(0, 0, 0, 0.3);
		box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
	}
}