/*
Project Name: Project #
Description: This project is to create ?
Author: your name
Version: 1.0
License: 

Tags: (optional)

General comments (optional)

Table of Contents in CSS
1. Global
2. Links
3. Headings
4. Header
5. Navigation
6. Middle
7. Forms
8. Extras
9. Footer
*/

/* 1. Global */
#dataNow {
	background-color: #fff;
	position: fixed;
	top:0px;
	left: 0px;
	height: 40px;
	width: 80px;
	cursor: pointer;
}
html,body  { 
  margin: 0;
  padding: 0;
  font-family: 'Comfortaa', cursive;
  }
#holder {
	position: fixed;
	width:100%;
	height:100%;
	background: rgb(2,0,36);
	background: linear-gradient(160deg, rgba(2,0,36,1) 0%, rgba(5,5,65,1) 35%, rgba(46,46,46,1) 100%);
}
#table {
	position: relative;
	height: 80%;
	width: 80%;
	left: 10%;
	top: 10%;
	border-radius: 50%;
	z-index: 10;
	background: rgb(5,65,61);
	background: radial-gradient(circle, rgba(5,65,61,1) 0%, rgba(5,65,61,1) 25%, rgba(2,0,36,1) 100%);
}
#tableLight {
	position: absolute;
	height: 78%;
	width: 78%;
	left: 11%;
	top: 11%;
	background-color: #FFF;
	border-radius: 50%;
	box-shadow: 10px 10px 5px #fff;
	z-index:5;
}
#login {
	border: outset 2px #3dd6de;
	text-align: center;
    color: aquamarine;
    display: block;
    position: absolute;
    height: 125px;
    width: 200px;
    background-color: darkblue;
    top: 100px;
    left: calc(50% - 100px);
    border-radius: 15%;
    padding-top: 15px;
}
#login label{
	display: block;
}
#pin {
	position: relative;
	margin: 0 auto;
	width: 50px;
	display: block;
}
#login input {
	text-align: center;
}
#submit {
	position:relative;
	top: 10px;
	box-shadow:inset 0px 0px 15px 3px #23395e;
	background:linear-gradient(to bottom, #2e466e 5%, #415989 100%);
	background-color:#2e466e;
	border-radius:17px;
	border:1px solid #1f2f47;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:15px;
	padding:6px 13px;
	text-decoration:none;
	text-shadow:0px 1px 0px #263666;
}
#submit:hover {
	background:linear-gradient(to bottom, #415989 5%, #2e466e 100%);
	background-color:#415989;
}
#submit:active {
	position:relative;
	top:1px;
}
#start {
	position: fixed;
	height: 15px;
	width: 150px;
	top: 45%;
	left: calc(50% - 105px);
	pointer-events: none;
	opacity: 0;
	cursor: pointer;
	background-color: #2e466e;
	border: 1px solid #1f2f47;
	border-radius: 25%;
	color: white;
	padding: 30px;
}
#myCard1 {
	left: calc(50% - 250px);
	background: no-repeat url("../images/CoupBack2.png");
	background-size: contain;
}
#myCard1 .showCard, #myCard2 .showCard{
	top: 100px;
	left: 10px;
}
#myCard2 {
	right: calc(50% - 250px);
	background: no-repeat url("../images/CoupBack2.png");
	background-size: contain;
}
#myCard3 {
	left: calc(25% - 250px);
	opacity: 0;
	pointer-events: none;
}
#myCard4 {
	right: calc(25% - 250px);
	opacity: 0;
	pointer-events: none;
}
.card {
	position: fixed;
	bottom: -80px;
	height: 350px;
	width: 224px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	z-index: 10;
	
}
.btn {
	position: absolute;
	box-shadow:inset 0px 1px 0px 0px #fce2c1;
	background:linear-gradient(to bottom, #ffc477 5%, #fb9e25 100%);
	background-color:#ffc477;
	border-radius:6px;
	border:1px solid #eeb44f;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #cc9f52;
	opacity: 0;
}
.btn:hover {
	background:linear-gradient(to bottom, #fb9e25 5%, #ffc477 100%);
	background-color:#fb9e25;
}
.btn:active {
	position:relative;
	top:1px;
}
.discard {
	top: 5px;
	left: 5px;
}
.showCard {
	top: 200px;
	left: 20%;
}
#coinMenu {
	position: fixed;
	top: 5%;
	right: 2%;
	width: 140px;
	height: 100%;
	opacity: 0;
}
#coinMenu ul {
	list-style-type: none;
	overflow: hidden;
}
#coinMenu ul li {
	position: relative;
	width: 200px;
	overflow: hidden;
}
#coinMenu ul li img {
	position:relative;
	right: -100%;
	height: 50px;
}
#plus, #minus {
	position: relative;
	right: -25%;
	cursor: pointer;
}
#count {
	top: 122px;
	right: 5px;
	background-color: #000;
	padding: 10px;
	border-radius: 7px;
}
.opp {
	position: fixed;
	height: 175px;
	width: 150px;
	background-color: black;
	border-radius: 15%;
	padding: 5px;
}
.name {
	position: absolute;
	color: lightblue;
	top: 20px;
	left: 10px;
}
.coin {
	position: absolute;
	color: orange;
	top: 20px;
	right: 10px;
}
.ocard {
	position: relative;
	display: inline-block;
	height: 110px;
	width: 60px;
	top: 60px;
	left: 5px;
	float: left;
	padding-left: 10px;
	background: no-repeat url("../images/CoupBack2.png");
	background-size: contain;
}
.seat1{
	top: 60%;
	left: 5%;
}
.seat2{
	top: 15%;
	left: 15%;
}
.seat3{
	top: 5%;
	left: calc(50% - 75px);
}
.seat4{
	top: 15%;
	right: 15%;
}
.seat5{
	top: 60%;
	right: 5%;
}
#rules {
	position: fixed; /* 568 345 */
	top: calc(45% - 173px);
	left: calc(50% - 284px);
	z-index: 2;
	opacity: 0;
	pointer-events: none;
}
#rulesBtn {
	left: calc(80% - 63px);
}
#exchange {
	left: calc(20% - 63px);
}
.bbtn {
	cursor: pointer;
	position: fixed;
	bottom: -50px;
	border-bottom: 50px solid #555;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	height: 0;
	color: #000;
	width: 126px;
	text-align: center;
	font-weight: bold;
}
.bbtn:hover {
	border-bottom: 50px solid #222;
	color: #fff;
}
.bbtn span {
	position: absolute;
	top: 20px;
	left: 55px;
	
}
/* 2. Links */

/* 3. Headings */

/* 4. Header */

/* 5. Navigation */

/* 6. Middle */

/* 7. Forms */

/* 8. Extras */

/* 9. Footer */