/*
colors
red: FF826B
blue: 54A4BE
green: B5F065
dark green: 68B400
orange: FFCA6B;
yellow: FFE66B;
*/

/* p{
	cursor: auto;
} */

/*Page Controls*/
#main-menu-page {
	min-height: 100vh;
	max-height: 100vh;
	min-width: 100vw;
	max-width: 100vw;
	position: absolute;
    bottom: 0;
    right: 0;
}

#stats-page {
	min-height: 100vh;
	max-height: 100vh;
	min-width: 100vw;
	max-width: 100vw;
    position: absolute;
    bottom: 0;
    right: 0;
	visibility: hidden;
}

#store-page {
	min-height: 100vh;
	max-height: 100vh;
	min-width: 100vw;
	max-width: 100vw;
    position: absolute;
    bottom: 0;
    right: 0;
	visibility: hidden;
}

#bow-shop {
	visibility: hidden;
}

#leaderboard-page {
	min-height: 100vh;
	max-height: 100vh;
	min-width: 100vw;
	max-width: 100vw;
    position: absolute;
    bottom: 0;
    right: 0;
	visibility: hidden;
}

#achievements-page {
	min-height: 100vh;
	max-height: 100vh;
	min-width: 100vw;
	max-width: 100vw;
    position: absolute;
    bottom: 0;
    right: 0;
	visibility: hidden;
}

#game-over-page {
	min-height: 100vh;
	max-height: 100vh;
	min-width: 100vw;
	max-width: 100vw;
    position: absolute;
    bottom: 0;
    right: 0;
	visibility: hidden;
}

#playing-page {
	min-height: 100vh;
	max-height: 100vh;
	min-width: 100vw;
	max-width: 100vw;
    position: absolute;
    bottom: 0;
    right: 0;
	visibility: hidden;
}

#pause-page {
	min-height: 100vh;
	max-height: 100vh;
	min-width: 100vw;
	max-width: 100vw;
    position: absolute;
    bottom: 0;
    right: 0;
	visibility: hidden;
	z-index: 10;
}

body{
	font-family: 'Raleway', sans-serif;
	margin-left: 0;
	margin-top: 0;
	width: 100vw;
	height: 100vh;
	position: absolute;
	overflow: hidden;
	background: white;

	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */   
}
/* 
	background: repeating-linear-gradient(
		-57deg,
		#54A4BE,
		#1A7593 1px, 
		white 1px, 
		white 37px
	  ); */
	  /* background: #54A4BE; */

a {
	text-decoration: none;
}

.menu-background {
	margin-top: 0;
	width: 100vw;
	height: 100vh;
	position: absolute;
	background: repeating-linear-gradient(
	  -57deg,
	  #FFEAE6,
	  #FFEAE6 1px, 
	  white 1px, 
	  white 37px
	);
	z-index: -2;
}

.title-container {
	margin-top: 12vh;
	padding-top: 4vh;
	padding-bottom: 2vh;
	position: absolute;
	border-top: 3px solid #54A4BE;
	border-bottom: 3px solid #54A4BE;
	width: 100vw;
	background: cover;
	background: white;
}

.shop-title-container {
	margin-top: 12vh;
	padding-top: 1vh;
	padding-bottom: 1vh;
	position: absolute;
	border-top: 3px solid #54A4BE;
	border-bottom: 3px solid #54A4BE;
	width: 100vw;
	height: 8vh;
	background: cover;
	background: white;
}

#beta{
	text-align: right;
	margin-right: 27px;
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 4vh;
	color: #FF826B;
}

#home-title {
	color: #54A4BE;
	text-align: center;
	margin-top: auto;
	margin-bottom: auto;
	font-size: 7vh;
	font-weight: 600;
}

#title {
	color: #54A4BE;
	text-align: center;
	margin: auto;
	font-size: 3vh;
	font-weight: 600;
}

#game-over-title {
	color: #54A4BE;
	text-align: center;
	margin: auto;
	font-size: 3vh;
	font-weight: 600;
}

.play-btn-container{
	display: block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 39vh;
}

.play-again-btn-container{
	display: block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 13vh;
}

.resume-btn-container{
	display: block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 8vh;
}

#play-btn {
	font-weight: 600;
	background-color: white;
	color: #FF826B;
	border: 3px solid #FF826B;
	border-radius: 5px;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 45px;
	padding-right: 45px;
	font-size: 6vh;
	text-decoration: none;
}

#play-btn:active {
	background-color: #FF826B;
	color: white;
	text-decoration: none;
}

#play-again-btn {
	font-weight: 600;
	background-color: white;
	color: #FF826B;
	border: 3px solid #FF826B;
	border-radius: 5px;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 45px;
	padding-right: 45px;
	font-size: 4vh;
}

#play-again-btn:active {
	background-color: #FF826B;
	color: white;
	text-decoration: none;
}

#resume-play-btn {
	font-weight: 800;
	background-color: white;
	color: #FF826B;
	border: 3px solid #FF826B;
	border-radius: 5px;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 26px;
	padding-right: 26px;
	font-size: 3vh;
	margin-left: 5px;
	margin-right: 5px;
	text-decoration: none;
}

#resume-play-btn:active {
	background-color: #FF826B;
	color: white;
	text-decoration: none;
}

.btn-container{
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding-top: 10vh;
}

.btn-container-2{
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 7vh;
}

.quit-btn-container{
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50vh;
}


.btn {
	font-weight: 800;
	background-color: white;
	color: #B5F065;
	border: 3px solid #B5F065;
	border-radius: 5px;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 26px;
	padding-right: 26px;
	font-size: 3vh;
	margin-left: 5px;
	margin-right: 5px;

	cursor: pointer;

}

.btn:active {
	background-color: #B5F065;
	color: white;
	text-decoration: none;
}

.back-btn-container {
	padding-top: 3vh;
	margin-left: 5vw;
}

.back-btn {
	position: absolute;
	color: #B5F065;
	border: 3px solid #B5F065;
	border-radius: 5px;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 21px;
	padding-right: 25px;
	font-size: 3vh;
	background-color: white;
}

.back-btn:active {
	background-color: #B5F065;
	color: white;
	text-decoration: none;
}

.scores-container {
	text-align: center;
	margin-top: 31vh;
}

.scores {
	color: #FFCA6B;
	font-size: 3vh;
	font-weight: 600;
}

#high-score {
	font-size: 5vh;
}

/* #previous-scores {
}

#current-score {
}

.tab-container {
}

.tabs {
} */

.stats-container {
	position: relative;
	height: 60vh;
	margin-top: 25vh;
	margin-left: 5vw;
	width: 90vw;
	overflow: auto;
}

.stats-number {
	color: #FF826B;
	font-weight:800;
}

#open-bow-store {
	position: relative;
	right: 5vw;
	margin-top: -10.3vh;
	float: right;	
	font-weight: 600;
	background-color: white;
	color: #B5F065;
	border: 3px solid #B5F065;
	border-radius: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 12px;
	padding-right: 10px;
	font-size: 20px;
	z-index: 5;
	cursor: pointer;
}

#open-bow-store:active {
	color: white;
	background-color: red;
}

.lives-bow-stat>span>.fa-heart {
	color: gray;
}

.bow-placeholder {
	position: relative;
	margin-left: 43vw;
	background-color: white;
	margin-top: -2.4vh;
	margin-bottom: 1vh;
	height: 12.3vh;
	width: 12.3vh;
	border-radius: 50%;
	border: 1px solid #54A4BE;
}

.equip-label {
	font-size: 2.5vh;
	position: absolute;
	top: 2vh;
	left: 8vw;
}

.equipped-bow {
	position: absolute;
	top: 5vh;
	left: 8vw;
}

#shop-bow-equip-menu {
		z-index: 45;
	position: absolute;
	background: white;
	top: 35vh;
	left: 4vw;
	width: 91vw;
	height: 52.5vh;
	border: 3px solid #54A4BE;
	border-radius: 0px 0px 5px 5px;
	overflow: auto;
}

.equippable-bow-placeholder {
	position: relative;
	margin-left: 5.5vw;
	margin-top: 2.7vh;
	background-color: white;
	height: 7vh;
	width: 7vh;
	border-radius: 50%;
	border: 1px solid #54A4BE;
}

.store-bow-exit-spacing {
	font-weight: 600;
		z-index: 47;
	position: absolute;
	left: 4vw;
	top: 27.5vh;
	padding-top: 11px;
	padding-bottom: 12px;
	padding-left: 3vw;
	width: 88vw;
	font-size: 3vh;
	border-radius: 5px 5px 0px 0px;
	border: 3px solid #54A4BE;
	background: white;
	color: #54A4BE;
}

#store-bow-equip-exit {
		z-index: 50;
	position: absolute;
	right: 4.4vw;
	top: 28vh;
	padding-top: .5vh;
	padding-left: 3vw;
	padding-right: 3.5vw;
	font-size: 5vh;
	color: #54A4BE;
	background: transparent;
}

.store-bow-container {
	position: relative;
	border-bottom: 3px solid #54A4BE;
	padding-top: 1vh;
	height: 14vh;

}

.store-bow-text {
	position: relative;
	margin-right: 5.5vw;
	text-align: right;
	margin-top: -9vh;
	font-weight: 600;
	font-size: 2.5vh;
}

.store-bow-stats-container {
	margin-top: -3.3vh;
	position: relative;
	font-size: 4vh;
	z-index: -1;
	color: gray;
}

.store-bow-stats-container>div {
	position: relative;
	margin-left: 26vw;
	font-size: 2vh;
	font-weight: 400;
}

.store-bow-stats-container>div>span>.fa-star-o {
	background: -webkit-linear-gradient(#FF826B, #FFCA6B, #FFE66B, #B5F065, #54A4BE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.store-bow-stats-container>div>span>.fa-star {
	background: -webkit-linear-gradient(#FF826B, #FFCA6B, #FFE66B, #B5F065, #54A4BE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bow-stat-info {
	font-weight: 600;
	position: absolute;
	left: 7vw;
	color: black;
}

.bow-equip-btn {
	margin-right: 5.5vw;
	font-weight: 600;
	background-color: white;
	color: #B5F065;
	border: 3px solid #B5F065;
	border-radius: 5px;
	float: right;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 12px;
	padding-right: 10px;
	font-size: 15px;
	margin-top: 1.5vh;
	z-index: 5;
}

.bow-equip-btn:active {
	color: white;
	background-color: #B5F065;
}

.bow-equipped-btn {
	margin-right: 5.5vw;
	font-weight: 600;
	background-color: white;
	color: lightgray;
	border: 3px solid lightgray;
	border-radius: 5px;
	float: right;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 12px;
	padding-right: 10px;
	font-size: 15px;
	margin-top: 1.5vh;
	z-index: 5;
}

.bow-buy-btn {
	margin-right: 5.5vw;
	font-weight: 600;
	background-color: white;
	color: #FFCA6B;
	border: 3px solid #FFCA6B;
	border-radius: 5px;
	float: right;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 12px;
	padding-right: 10px;
	font-size: 15px;
	margin-top: 1.5vh;
	z-index: 5;

	cursor: pointer;
}

.bow-buy-btn:active {
	color: white;
	background-color: #FFCA6B;
}

.store-pic {
	margin-top: 5px;
	display: inline-block;
	height: 87px;
	width: 87px;
	border: 3px solid #FF826B;
	background-color: white;
	border-radius: 5px;
	margin-right: 3vw;
	float: left;
	position: relative;
}

.store-container {
	position: relative;
	height: 60vh;
	margin-top: 25vh;
	margin-left: 5vw;
	margin-right: 5vw;
	width: 90vw;
	overflow: auto;
}

.store-item-container{
	position: relative;
	border: 3px solid #FF826B;
	border-radius: 5px;
	padding-top: 1vh;
	height: 13vh;
	margin-bottom: 2vh;
}

.store-item-text {
	float: left;
	padding-top: 1vh;
	padding-left: 5vw;
	font-weight: 600;
	font-size: 3vh;
}

.store-level-container {
	position: relative;
	padding-top: 6.5vh;
	font-size: 4vh;
	padding-left: 5vw;
	z-index: -1;
}

.store-level-container-double {
	position: relative;
	padding-top: 5.25vh;
	font-size: 3vh;
	padding-left: 5vw;
	z-index: -1;
}

.store-level-container>.fa-star-o{
	background: -webkit-linear-gradient(#FF826B, #FFCA6B, #FFE66B, #B5F065, #54A4BE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.store-level-container>.fa-star {
	background: -webkit-linear-gradient(#FF826B, #FFCA6B, #FFE66B, #B5F065, #54A4BE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.store-level-container-double>div>.fa-star-o{
	background: -webkit-linear-gradient(#FF826B, #FFCA6B, #FFE66B, #B5F065, #54A4BE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.store-level-container-double>div>.fa-star {
	background: -webkit-linear-gradient(#FF826B, #FFCA6B, #FFE66B, #B5F065, #54A4BE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.store-item-text {
	color: #FF826B;
}

.store-item-text>span>.fa-heart {
	color: #FF826B;
}

.buy-btn {
	margin-right: 5vw;
	font-weight: 600;
	background-color: white;
	color: #FFCA6B;
	border: 3px solid #FFCA6B;
	border-radius: 5px;
	float: right;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 12px;
	padding-right: 10px;
	font-size: 20px;
	margin-bottom: 30px;
	margin-top: 2.5vh;
	z-index: 5;
	cursor: pointer;
}

.buy-btn:active {
	background-color: #FFCA6B;
	color: white !important;
}

.maxed:active{
	background-color: white;
	color: lightgray !important;
}

.buy-btn>.fa-stop-circle {
	font-size: 3vh;
}

.achievement-title {
	font-weight: 600;
}

.achievement-text {
}

table {
	display: block;
}

.ad-placeholder {
	background-color: #FF826B;
	height: 10vh;
	width: 100vw;
	position: absolute;
	bottom: 0;
	z-index: 20;
}

.settings-btn {
    position: fixed;
    right: 0;
	color: #B5F065;
	margin-right: 4vw;
	margin-top: 1vh;
	font-size: 55px;
	-webkit-text-stroke: 4px white;
}

canvas{
	position: absolute;
	font-family: 'Arial';
	font-size: 12px;
	z-index: -1;
}

.playing-top-container {
	z-index: 5;
	position: relative;
	width: 100vw;
}

#playing-lives {
	position: absolute;
	top: 2vh;
	font-size: 3vw;
	left: 4vw;
}

.lives-row-1 {
}

.lives-row-2 {
}

.fa-heart {
	color: #FF6B6B;
}

#heart1 {
	padding-right: 1vw;
}

#heart2 {
	padding-right: 1vw;
}

#heart3 {
	padding-right: 1vw;
}

#heart4 {
	padding-right: 1vw;
}

#heart5 {
	padding-right: 1vw;
}

#heart6 {
	padding-right: 1vw;
}

.combo-number {
	position: absolute;
	left:22vw;
	top: 2vh;
	font-size: 5vw;
	font-weight: 600;
	color: #FFCA6B;
}

.combo-bar {
	position: absolute;
	left:30vw;
	height: 6.5vw;
	width: 53vw;
	top: 2vh;
	background: lightgray;
	opacity: .9;
}

#combo-bar-1 {
	position: absolute;
	left: 0;
	height: 6.5vw;
	width: 0%;
	background: repeating-linear-gradient(
	  -57deg,
	  #54A4BE,
	  #54A4BE 10px, 
	  #1A7593 10px, 
	  #1A7593 20px
	)
}

#combo-bar-2 {
	position: absolute;
	left: 0;
	height: 6.5vw;
	width: 0%;
 	background: repeating-linear-gradient(
	  -57deg,
	  #B5F065,
	  #B5F065 10px, 
	  #89D61E 10px, 
	  #89D61E 20px
	);
}

#combo-bar-3 {
	position: absolute;
	left: 0;
	height: 6.5vw;
	width: 0%;
 	background: repeating-linear-gradient(
	  -57deg,
	  #FFCA6B,
	  #FFCA6B 10px, 
	  #C0871F 10px, 
	  #C0871F 20px
	);
}

#combo-bar-4 {
	position: absolute;
	left: 0;
	height: 6.5vw;
	width: 0%;
 	background: repeating-linear-gradient(
	  -57deg,
	  #FF826B,
	  #FF826B 10px, 
	  #C0381F 10px, 
	  #C0381F 20px
	);
}

.pause-btn {
	color: #B5F065;
	position: absolute;
	font-size: 6vw;
	top: 2vh;
	right: 4vw;
	background: transparent;
	padding-left: 1vw;
	padding-right: 1vw;

	cursor: pointer;
}

#playing-score {
	position: absolute;
	font-weight: 600;
	color: #FF826B;
	margin-top: 6vh;
	margin-left: 4vw;
	font-size: 8vw;
	z-index: 5;
}

.item-container {
	position: absolute;
	float:left;
	top: 90vh;
	left: 5vw;
	z-index: 5;
}

#item-btn {
	border: 3px solid #FF826B;
	background-color: white;
	color: #FF826B;
	border-radius: 5px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 12px;
	padding-right: 13px;
	font-size: 5vw;
	font-weight: 600;

	cursor: pointer;
}

#item-btn:active {
	background-color: #FF826B;
	color: white;

}

.currency-container-main-menu {
	position: absolute;
	left: 5vw;
	top: 3vh;
}

.currency-container-store {
	position: absolute;
	left: 30vw;
	top: 4.5vh;
}

#total-currency {
	padding-left: 2vw;
	font-size: 4vh;
	font-weight: 600;
	color: #FFCA6B;
}

#store-total-currency {
	padding-left: 2vw;
	font-size: 4vh;
	font-weight: 600;
	color: #FFCA6B;
}

.fa-stop-circle {
	font-size: 6vh;
	color: #FFE66B;
	-webkit-text-stroke: 2px #FFCA6B;
}

#gained-currency {
	font-size: 4vh;
	font-weight: 600;
	color: #FFCA6B;
}

.progress-pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #E5E5E5;
  position: absolute;
  z-index: 50;
  left: 0;
  right: 0;
  margin: 0 auto;
  opacity: .9;
}

.progress-pie-chart.gt-50 {
  background-color: #54A4BE;
}

.ppc-progress {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  width: 200px;
  height: 200px;
  clip: rect(0, 200px, 200px, 100px);
}
.ppc-progress .ppc-progress-fill {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  width: 200px;
  height: 200px;
  clip: rect(0, 100px, 200px, 0);
  background: #54A4BE;
  transform: rotate(60deg);
}
.gt-50 .ppc-progress {
  clip: rect(0, 100px, 200px, 0);
}
.gt-50 .ppc-progress .ppc-progress-fill {
  clip: rect(0, 200px, 200px, 100px);
  background: #E5E5E5;
}

.ppc-percents {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 150px/2);
  top: calc(50% - 150px/2);
  width: 150px;
  height: 150px;
  background: #fff;
  text-align: center;
  display: table;
}
.ppc-percents span {
  display: block;
  font-size: 2.6em;
  font-weight: bold;
  color: #54A4BE;
}

.pcc-percents-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.progress-pie-chart {
  margin: 50px auto 0;
}

#allowPopup{
	visibility: hidden;


    /* border: 6px solid green;
	border-radius: 20%; */
}

#gamewindow{
	visibility: hidden;
	/* border: 1px solid black; */

}

.centered{
	position: absolute;
	top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) 
}

/* #infobubble{
	position:absolute;
	bottom:0;
	right:0;
	background: white;
	width: 100px;
	height:100px;
} */

/* .onlyPC{
	visibility: hidden;
}

.infobubble{
	position:absolute;
	bottom:0;
	right:0;
	background: white;
	width: 100px;
	height:100px;
	z-index: 10000;
} */

#store-total-currency, #total-currency, h1, h2, h3, h4, h5, h6{
	cursor: context-menu;
}


@media only screen and (min-width: 760px) {
	#main-menu-page{
		visibility:	hidden;
	}
	#allowPopup{
		visibility: visible;
	}
	#home-title{
		visibility: hidden;
	}
	#gamewindow{
		visibility: visible;
		/* //background: #54A4BE; */
	}
	body{
		/* background: #6D6E6E; */
		background: lightgray;
	}

	.onlyPC{
		visibility: visible;
	}

	/* #infobubble{
		position:absolute;
		bottom:0;
		right:0;
		background: white;
		width: 100px;
		height:100px;
		
	} */

}