@import url(https://fonts.googleapis.com/css?family=Allerta+Stencil|Artifika|Cinzel+Decorative|Fanwood+Text|Fredericka+the+Great|Acme|Fugaz+One|Germania+One|Graduate|Grand+Hotel|IM+Fell+Double+Pica|Montserrat|Slabo+27px|Source+Sans+Pro);

html, body {
	font-family: 'Acme', sans-serif;
	font-weight: 100;
	height: 100vh;
	margin: 0;
}

.container {}

canvas {
	cursor: crosshair;
	display: block;
}

.stickyBgrd {
	background: rgba(0, 0, 0, 0.95);
}

.stickyBgrd a {
    font-size: 150%;
}

.navPlaceHolder {
	visibility: hidden;
	display: none;
}

.modal .modal-header button span {
	background: darkgreen;
    padding: 40%;
    border-radius: 100%;
    line-height: normal;
    color: white;
    text-shadow: initial;
}

.modal-header .close {
    margin-left: initial;
	float: initial;
}

.teamCount {
    background: rgba(143, 188, 143, 0.95);
    padding: 2%;
    margin: 2% 0%;
    border-radius: 10px;
    box-shadow: 2px 2px 5px #6b6b6b;
}

.welcomeHeader h1 {
    position: absolute;
	left: 0;
	width: 100%;
	font-size: 600%;
}

.welcomeHeader h1:first-of-type {
    top: -15%;
}

.welcomeHeader h1:nth-of-type(2) {
    top: -15%;
}

.welcomeHeader h1:nth-of-type(3) {
    top: -20%;
}

.welcomeHeader h1:last-of-type {
    top: -30%;
}

.sm-divider {
	border: solid 0.5px #d8d8d8;
    margin: 0px -35px;
}

.lg-divider {
	border: solid 0.5px #d8d8d8;
    margin: 30px 50px;
}

.card-body {
}

.input-group {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}

.input-group .custom-file {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
}

.custom-file-input {
    position: relative;
    z-index: 2;
    width: 100%;
	padding: 0.5rem 0.75rem !important;
    height: calc(2.25rem + 2px);
    margin: 0;
    opacity: 0;
}

.custom-file-label {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    height: calc(2.25rem + 2px);
    padding: 0.375rem 0.75rem;
    line-height: 1;
	font-size: 90% !important;
    color: black;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.input-group-append {
    position: absolute;
    top: 0;
    right: 0;
    left: initial;
    z-index: 1;
    height: calc(2.25rem + 2px);
    padding: 0.375rem 0.75rem;
    line-height: 0.75;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
	background-color: #868e96 !important;
}

.fakeNews .card-header {
	background-color: #FEAB6D;
	color: #341809;
}

.fakeNews .card-body {
	background-color: #FFE8DC;
	color: #341809;
}

.fakeNews .card-footer {
	background-color: #341809;
	color: #FEAB6D;
}

footer {
	position: relative;
}

.fullHeight {
	min-height: 100vh;
}

.regForm {
	border-top: 1px solid gray
}

.champDiv {
    background: #ff8d01;
}

h2.roundHeader {
    background: aquamarine;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
}

.payAppDesc {
	font-size: 135%;
}

/*
 *  Flex Layout Specifics
*/
main{
  display:flex;
  flex-direction:row;
}
.round{
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:200px;
  list-style:none;
  padding:0;
}
.round .spacer{ flex-grow:1; }
.round .spacer:first-child,
.round .spacer:last-child{ flex-grow:0.5; }

.round .game-spacer{
flex-grow:1;
}

/*
 *  General Styles
*/

li.game{
  padding-left:20px;
}

li.game.winner{
font-weight:bold;
background: linear-gradient(#00800000, green, #00800000);
}

li.game span{
float:right;
margin-right:5px;
}

li.game-top{ 
border-bottom:1px solid #aaa; 
}

li.game-spacer{ 
border-right:1px solid #aaa;
min-height:40px;
}

li.game-bottom{ 
border-top:1px solid #aaa;
}

.teamRegPayment {
    background: beige;
}

.teamRegPayment h2 {
    background: darkgray;
	margin: -0.5rem;
	color: whitesmoke;
}

.oi {
	top: 0px;
}

.loader {
	border-top: 16px solid blue;
	border-bottom: 16px solid blue;
	border-radius: 50%;
	width: 120px;
	height: 120px;
	-webkit-animation: spin 2s linear infinite; /* Safari */
	animation: spin 2s linear infinite;
	margin: 100px auto;
}

@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@media (max-width: 767px) {
	/* Adding a fixed background to a mobile site*/
	body:before {
		content: "";
		display: block;
		position: fixed; 
		left: 0; 
		top: 0;
		bottom: 0;
		width: 100%; 
		height: 100%; 
		z-index: -10; 
		background: url(/images/spades-table.jpg) no-repeat center center; 
		-webkit-background-size: cover; 
		-moz-background-size: cover; 
		-o-background-size: cover; 
		background-size: cover; 
	}

	.menuMobile {
		background: url("/images/spadeNav.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center center;
		height: 50px;
		width: 50px;
	}

	#app-navbar-collapse {
		background: linear-gradient(rgba(47, 79, 79, 0.2), rgba(47, 79, 79, 0.85), darkslategrey);
		margin: 0% 12%;
	}

	a.navLink {
		color: whitesmoke;
		font-size: x-large;
	}

	.welcomeHeader h1 {
	}

	.playoffBracket {
		position: relative;
		color: white;
		overflow-x: scroll;
	}

	.round {
		width: -webkit-fill-available;
	}
	
	.tournySettingsDiv {
		position: relative;
	}
	
	form * {
		font-size: 115% !important;
	}
}

@media (min-width: 768px) {
	html, body {
		background: url(/images/spades-table.jpg) no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		background-attachment: fixed;
	}
	
	.nav-link {
		font-size: 175%;
	}
	
	form * {
		font-size: 115% !important;
	}
}

@media (min-width: 992px) {
	#app {
		margin-bottom: 200px;
	}

	.welcomeHeader h2 {
		font-size: 425%;
	}

	.welcomeHeader p {
		font-size: 150%;
	}
	
	form * {
		font-size: 115% !important;
	}
}

@media (min-width: 1200px) {
	form *, main {
		font-size: 115% !important;
	}
	
	form input {
		color: black !important;
	}
	
	form input[type="submit"] {
		color: white !important;
	}
}

@media (min-width: 1400px) {
	.nav-link {
		font-size: 225%;
	}
}