.hidden {
    display: none !important;
}

.right {
    float: right;
}

html {
    min-height: 100%;
/*    background: radial-gradient(circle, rgba(179, 234, 249, 1), rgba(158, 229, 250, 1));*/
}

html, body {
    margin: 0;
    padding: 0;
}

section#c4gameContainer {
    width: 1000px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
section#c4gameOptions {
	position:relative;
	margin:0;
	padding:0;
	transform:none;
	width:100%;
}
.game_title_screen {
/*	width:100%;	*/
/*    top: 30%;*/
}
.game_title_screen img.game-title {
	margin:1em auto;
	width:675px;
	display:block;
}
.game_title_screen button {
/*	margin:0 auto;
	width:675px;*/
}
.game_start_buttons {
	width:100%;
	clear:both;
	margin:5em 0 0 0;
	padding:0;
}
.game_start_button {
	width: 50%;
	margin: 0;
	padding: 0;
	float: left;
}
img.playerButton {
	width:250px;
	margin: 0 auto;
	display: block;
}
/*.game_start_button button {
	width:auto%;
	margin:0;
	padding:0;
}*/
.game-title {
 /*   margin: 0 0 5em 0;
    text-align: center;
    color: #ffffff;
    font-family: Arial;
    font-size: 2em;
*/
}

.option-button {
    background: none;
    border: 3px solid rgba(255, 241, 0, 1);
    border-radius: 3px;
    color: #ffffff;
    font-size: 1.8em;
    padding: 5px 25px;
    cursor: pointer;
    transition: border-color .1s ease-in-out;
}

.option-button:hover {
    border-color: rgba(211, 189, 87, 1);
}

#c4game {
    border: 5px solid rgba(211, 189, 87, 1);
    border-radius: 3px;
    box-shadow: 0 0 10px #000000;
    vertical-align: middle;
	float:left;
}

.game-indicators {
    display: inline-block;
    vertical-align: middle;
    margin-left: 1rem;
}

.indicator-player {
    display: block;
    font-family: Arial;
    font-size: 1.8em;
	float:left;
	width:200px;
	margin:0;
	padding:0;
    cursor: default;
}
.indicator-player#indicatorP1 {
	margin-right:.65em;
}
.indicator-player#indicatorP2 {
	margin-left:.65em;
}
.indicator-player p {
	text-align:center;
	margin:0;
	padding:1em;
}
/*#indicatorP1 img {
	padding:0 1em 0 0;
	margin: 1em 0 0 0;
}
#indicatorP2 img {
	padding:0 0 0 .5em;
	margin: 1em 0 0 0;
}*/
#indicatorP1 img.player {
	padding:0 1em 0 0;
	margin: 1em 0 0 0;
}
#indicatorP2 img.player {
	padding:0 0 0 .5em;
	margin: 1em 0 0 0;
}
#indicatorP1 p.playerLabel {
	padding:0 1em 0 0;
}
#indicatorP2 p.playerLabel {
	padding:0 0 0 .5em;
}
.indicator-player.waiting {
/*    opacity: 0.3; */
}
.whoseTurn {
	margin:1em 0 0 0;
	padding:0;
	width:90%;
	display:block;
}
.whoseTurn p {
	color:#ffffff;
	font-size:1em;
	text-align:center;
	margin:0;
	padding:0;
}
.whoseTurn.waiting {
	display:none;
}
.whoseTurn img.whoseTurnArrow {
	width:50px;
	margin:0 auto;
	display:block;
}
#p1Turn {
	margin-right:1em;
}
#p1Turn p {
	background-color:#0871b9;  /* blue (7ec71f green)	 */
}
#p2Turn {
	margin-left:.65em;
}
#p2Turn p {
	background-color:#d9272e;  /* red	 */
}
#congratsBanner{
    display: block;
    margin-left: 21.8%;
    text-align: center;
    background-image:url(CongratsBanner4.png);
    background-position:bottom;
    background-repeat: no-repeat;
    width: 562px;
}
#winnerBox{
    height: 540px;
}

#playAgainOption {
    background: #eee;
    border-radius: 1em;
    padding: 1.5em;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.player{
    max-width: 185px;
}