@charset "utf-8";
/* CSS Document */


/* Set variables (not supported by IE)*/
:root {
	--nav-margin: 80px;   /* For fixed navbar height and to space introduction container */
	--nav-margin-small: 60px;   /* For small screen fixed navbar height and to space introduction container */
	--bodyFont: black;   /* #999 = Dark grey*/
	--paleCyanBkgFont: #000099;   /* Dark blue*/
	--mintGreen: #AFD8BC;   /* #AFD8BC = mint green */
}


/* Removal of defaults. */
h1, h2, h3, h4, h5, h6, p {
	margin: 0;
	font-weight: normal;
}

ul, ol, dl, body, nav, footer {
	padding: 0;
	margin: 0;
}

* {
	box-sizing: border-box;     /* To set universal box sizing */
}


/* Navigation/menu bar styling */
nav {
	position: fixed;
	background-color: white;
	top: 0;
	width: 100%;
	height: var(--nav-margin);
	overflow: hidden;
    text-align: center;
	padding: 5px;
	z-index: 9999;     /* To make sure navbar is always on top */
}

.nav_container {
	width: 100%;
	max-width: 1920px;
	min-height: 90px;
	margin: auto;
	overflow: hidden;
}


/* Footer styling */
footer {
	position: fixed;
	height: 50px;
	bottom: 0;
	background-color: white;
	width: 100%;
	margin: auto;
	padding: 15px 10px;
	text-align: center;
}

.tnc {
	position: absolute;
	top: 0;
	right: 0;
	padding-right: 10px;
}


/* Body size and containers */
body {
	background-size: cover;
	background-color: #e6ffff;   /* e6e6ff = pale purple, e6ffff = pale cyan, f2ffff = sky faded, ffffe6 = pale yellow */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 100%;
	line-height: 1.25;
	color: var(--bodyFont);
	padding-bottom: 50px;
}

.mainContainer {
	float: left;
	position: relative;
	width: 90%;
	max-width: 1920px;
	overflow: hidden;
}

.adContainer {
	background-color: #aa80ff;     /* very light violet */
	position: fixed;
	top: 90px;
	right: 0;
	width: 10%;
	max-width: 192px;
	height: 87%;
	overflow: hidden;
	margin: auto;     /* To center the website in browser */
	z-index: 9998;     /* To make sure ad is always on top */
}

.container90 {
	background-image: url("flying_card.png");
    background-size: cover;
	background-position: center;
	position: relative;
	width: 95%;
	max-width: 1920px;
	margin: auto;     /* To center the website in browser */
	margin-top: 50px;
	margin-bottom: 50px;
	padding: 25px 35px;
	overflow: hidden;
	z-index: 0;
}

.container90::before {
	content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: white;
	opacity: .9;
	z-index: -1;
}

.container_intro {
	background-image: url("falling_cards.gif");
    background-size: cover;
	width: 100%;
	max-width: 1920px;
	margin: auto;     /* To center the website in browser */
	margin-top: var(--nav-margin);
	overflow: hidden;
}

.container1 {
	position: relative;
    background-color: white;     /* #f2ffff = sky faded */
	width: 100%;
	max-width: 1920px;
	margin: auto;     /* To center the website in browser */
	overflow: hidden;
	color: var(--bodyFont);
	z-index: 0;
}

.container1::before {
	background-image: url("scrolling_cards.gif");
    background-size: cover;
	background-position: center;
	content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
	opacity: .05;
	z-index: -1;
}

.container2 {
	position: relative;
	width: 100%;
	max-width: 1920px;
	margin: auto;     /* To center the website in browser */
	overflow: hidden;
	color: var(--paleCyanBkgFont);
	z-index: 0;
}

.container2::before {
	background-image: url("falling_cards_white_bkg.gif");
    background-size: cover;
	background-position: center;
	content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
	opacity: .05;
	z-index: -1;
}

.containerBorder {
	border: 2px solid #804000;     /* Dark orange (brown tone) */
	border-radius: 10px;
}

.container {
	position: relative;
	width: 100%;
	max-width: 1920px;
	margin: auto;     /* To center the website in browser */
	overflow: hidden;
}

.onefifth_screen {
	float: left;
	width: 20%;
    min-height: 80px;
}

.quarter_screen {
	float: left;
	width: 25%;
	min-height: 80px;
}

.thirtieth_screen {
	float: left;
	min-width: 30%;
	text-align: center;
}

.onethird_screen {
	float: left;
	width: 33%;
	min-height: 80px;
}

.lefthalf {
	float: left;
	width: 50%;
	padding-right: 1.5%;
}

.righthalf {
	position: static;
	float: right;
	width: 50%;
	padding-left: 1.5%;
}


/* Image styling*/
.logo {
	width: auto;
	height: 60px;
}


/* Floats, Paddings & Margins*/
.padding1 {
	padding: 75px 25px;
}

.padding2 {
	padding-top: 125px;
	padding-bottom: 125px;
}

.padding3 {
	padding: 10px;
}

.padding4 {
	padding: 75px 50px 25px;
}

.floatRight {
	float: right;
}


/* Font styling */

.largefont {
	font-size: 4.5em;
	color: var(--mintGreen);
}

.medlargefont {
	font-size: 3em;
	color: var(--mintGreen);     /* #24e3e3 = cyan, #66A3FF = cornflower blue */
}

.medfont {
	font-size: 2em;
	color: var(--mintGreen);     /* #aa80ff = very light violet */
}

.smallfont {
	font-size: 1.25em;
}

.xsmallfont {
	font-size: 1em;
}

.centerfont {
	text-align: center;
}

.mintGreenFont {
	color: #AFD8BC;
}

#intro em {
	color: var(--paleCyanBkgFont);
}

#intro b {
	color: red;   /* For card symbol color */
}

.whiteSmokeBkg {
	color: var(--bodyFont);
}

.paleCyanBkg {
	color: var(--paleCyanBkgFont);
}

.statHeader {
	color: var(--mintGreen);
}

#faq b {
	color: #aa80ff;   /* Very light violet */
}


/* Select-Option customization - Form styling */
select {
	border: 2px solid #804000;     /* dark orange (brown tone) */
	border-radius: 5px;
	max-width: 95%;
	margin-bottom: 20px;
}

.formChecked .noSelection {   /* To highlight select boxes not selected when submitted. */
    border: 2px solid red;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

button {
	background-color: var(--mintGreen);     /* #FF6666 = pastel red */
	border-radius: 7.5px;     /* To round the corners */
	border: none;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #FFF;     /* white */
	padding: 12.5px 25px;
	margin: 10px 7.5px;
	cursor: pointer;
}

button:active {
	background-color: red;
}

u {
	cursor: pointer;
}

u:active {
	color: red;
}


/* Link styling */
a {
	font-style: normal;
	text-decoration: none;
}

.container1 .righthalf a {
	color: #66A3FF;     /* Cornflower blue */
}

.container2 .righthalf a {
	color: #b366ff;     /* light violet 70% */
}

.tnc a {
	color: #66A3FF;   /* Cornflower blue */
}

a:hover, .container1 .righthalf a:hover, .container2 .righthalf a:hover {
	color: red;
	cursor: pointer;
}


/* Table styling */
table {
	width: 100%;
	table-layout: fixed;
	font-size: 1rem;
}

table, th, td {
	border: 1px solid var(--paleCyanBkgFont);
	text-align: center;
	padding: 0;
}

th {
	color: #66A3FF;
}

td:hover {
	cursor: pointer;
}

.legendUTG {
	background-color: #66ff99;     /* Lime green */
}

.legendLJ {
	background-color: #ccff99;     /* Very light Green */
}

.legendHJ {
	background-color: #66ccff;     /* Light Blue */
}

.legendCO {
	background-color: #cc99ff;     /* Very light violet */
}

.legendBut {
	background-color: #ccffff;     /* Very pale cyan */
}


/* SweetAlert styling */
.swal-modal {
	border-radius: 10px;
	background-color: white;   /* For modla background color */
	height: auto;
	width: auto;
	max-width: 50%;
}

.swal-title {
	color: red;
}

.swal-text {
	color: blue;
}


/* Styling for small/smartphone screens */
@media only screen and (max-width:680px) {
	body {
		padding-bottom: 0px;
	}

	img.logo {
		height: 45px;
	}

	nav {
		height: var(--nav-margin-small);
	}

	footer {
		position: relative;
		min-height: 75px;
	}

	.tnc {
		position: relative;
		margin-top: 10px;
		padding-right: 0;
	}

	.container_intro {
		margin-top: var(--nav-margin-small);
	}

	.mainContainer {
		width: 100%
	}

	.adContainer {
		top: initial;
		right: initial;
		bottom: 0;
		width: 100%;
		max-width: 1920px;
		max-height: 108px;
		height: 10%;
		overflow: hidden;
	}

	.container, .container1 {
		z-index: 1;
	}

	.container90 {
		padding: 5px 10px 10px;
	}

	.onefifth_screen {
		width: 30%;
        min-height: 0px;
	}

	.onethird_screen, .quarter_screen, .lefthalf, .righthalf {
		float: left;
		width: 100%;
		min-height: 0;
		padding: 10px 5px 10px;
	}

	select {
		margin-bottom: 0;
	}

	.padding1, .padding2 {
		padding: 35px 10px;
	}

	.padding4 {
		padding: 65px 10px 0px;
	}

	.largefont {
		font-size: 3em;
	}

	table {
		font-size: .45rem;
	}

	.swal-modal {
		max-width: 80%;
	}

	.swal-text {
		padding: 5px;
	}
}


/* Styling for large screens */
@media only screen and (min-width:1643px) {
	.largefont {
		font-size: 5.1vw;
	}

	.medlargefont {
		font-size: 3.4vw;
	}

	.medfont {
		font-size: 2.56vw;

	}

	.smallfont {
		font-size: 1.42vw;
	}

	.xsmallfont {
		font-size: 1.135vw;
	}
}

@media only screen and (min-width:1921px) {
	.largefont {
		font-size: 6.125em;
	}

	.mainContainer {
		float: none;
		margin: auto;     /* To center the website in browser */
	}
	.medlargefont {
		font-size: 4.08em;
	}

	.medfont {
		font-size: 3.075em;
	}

	.smallfont {
		font-size: 1.704em;
	}

	.xsmallfont {
		font-size: 1.36em;
	}
}