@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
@font-face {
	font-family: 'Circular Pro';
	src: url("fonts/CircularPro-Bold.woff2") format("woff2"), url("fonts/CircularPro-Bold.woff") format("woff");
	font-weight: bold;
	font-style: normal
}

@font-face {
	font-family: 'Circular Pro';
	src: url("fonts/CircularPro-Book.woff2") format("woff2"), url("fonts/CircularPro-Book.woff") format("woff");
	font-weight: normal;
	font-style: normal
}

body {
	font-family: "Circular Pro", "Roboto", "sans-serif";
	color: #0d1b2a
}

h1 {
	font-weight: bold
}

h2 {
	font-weight: bold
}

p,
ul,
li {
	color: #111
}

a {
	color: #1f5e80;
	text-decoration: underline;
	cursor: pointer
}

a:hover {
	color: #15405a
}

a:visited {
	color: #15405a
}

.logo {
	width: 100%;
	max-width: 200px
}

.mobileLogo {
	width: 100%;
	max-width: 250px;
	margin-bottom: -10px;
}

hr {
	background-color: #cba135;
	height: 2px
}

.btn {
	text-decoration: none !important
}

.dontshow {
	display: none
}

.nav p {
	font-weight: bold
}

#desktopNav a {
	text-decoration: none
}

#desktopNav a:visited {
	color: #1f5e80
}

.btn {
	color: white !important;
	background-color: #2a6f97;
	border-radius: 0.4em;
	padding-left: 24px;
	padding-right: 24px
}

.btn:hover {
	box-shadow: inset 0 0 2em #1f5470
}

.btn:active {
	background-color: #1f5470 !important
}

.blobimage {
	max-width: 100%
}

.blobimage-small {
	max-width: 50%
}

.extraLeftRightMargins {
	margin: 0 0 0 0
}

.footer {
	background-color: #2a6f97;
	color: white;
	min-height: 60px;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: smaller
}

.footer p {
	color: white
}

.footer a {
	color: white
}

.footer a:hover {
	color: #1f5e80
}

.footer a:visited {
	color: white
}

.footer .row {
	margin-left: 0px !important;
	margin-right: 0px !important
}

.mutedtext {
	color: #999
}

.mutedtext a {
	color: #999
}

.feature p {
	color: #2a6f97;
	font-weight: bold
}

.feature img {
	max-width: 100px
}

.content {
	min-height: calc(100vh - 170px)
}

.glyphicon.spinning {
	animation: spin 1s infinite linear;
	-webkit-animation: spin2 1s infinite linear
}

@-webkit-keyframes spin {
	from {
		-webkit-transform: scale(1) rotate(0deg);
		transform: scale(1) rotate(0deg)
	}
	to {
		-webkit-transform: scale(1) rotate(360deg);
		transform: scale(1) rotate(360deg)
	}
}

@keyframes spin {
	from {
		-webkit-transform: scale(1) rotate(0deg);
		transform: scale(1) rotate(0deg)
	}
	to {
		-webkit-transform: scale(1) rotate(360deg);
		transform: scale(1) rotate(360deg)
	}
}

@-webkit-keyframes spin2 {
	from {
		-webkit-transform: rotate(0deg)
	}
	to {
		-webkit-transform: rotate(360deg)
	}
}

.purplecontainer {
	background: #0d1b2a url("/img/v2/pattern/background.png");
	background-size: 200px;
	min-height: 300px
}

.purplecontainer p {
	color: white
}

.whitetext {
	color: white
}

.purplecontainer label {
	color: white;
	font-weight: normal
}

.purplecontainer h1 {
	padding-top: 15px;
	padding-bottom: 10px
}

.purplecontainer a {
	color: #cba135
}

.purplecontainer p {
	line-height: 1.5em;
	text-align: justify;
	text-justify: inter-word
}

@media (max-width: 576px) {
	.blobimage {
		max-width: 50%
	}
	.blobimage-small {
		max-width: 90%
	}
	.extraLeftRightMargins {
		margin: 0 5% 0 5%
	}
}

@media (min-width: 576px) {
	.blobimage-small {
		max-width: 90%
	}
	.extraLeftRightMargins {
		margin: 0 10% 0 10%
	}
}

@media (min-width: 768px) {
	.content {
		min-height: calc(100vh - 116px)
	}
	.blobimage-small {
		max-width: 50%
	}
	.extraLeftRightMargins {
		margin: 0 20% 0 20%
	}
	.btn-login::after {
		content: ""
	}
}

@media (min-width: 768px) and (min-width: 992px) {
	.extraLeftRightMargins {
		margin: 0 25% 0 25%
	}
}

.footer a:hover {
	color: inherit;
}

.language-picker {
	cursor: pointer;
	background-color: transparent;
	border: none;
}

.language-picker:focus {
	outline: none;
}

.dropdown-item {
	color: #212529;
	text-align: inherit;
	white-space: nowrap;
	background-color: transparent;
	border: 0;
	transition: all 0.2s ease-in-out;
	text-decoration: none;
}

.dropdown-item:active {
	background-color: white;
}

.dropdown-item .lang-nav {
	height: 35px;
	width: 35px;
	border: none;
	background-color: #0d1b2a;
	border-radius: 17.5px;
	transition: all 0.2s ease-in-out;
	margin-right: 30px;
}

.languagePickerCurrentFlag {
	width: 35px;
}

#utalkNavLogo {
	width: 90px;
}

#toggleNavContent {
	background-color: transparent;
	border: 0px;
}

#toggleNavContent:focus {
	outline: none;
}

#desktopNav {
	min-height: 80px;
}

.faqContainer p:first-child, .hiwContainer p:first-child {
	margin-bottom: 0px;
	color: #0d1b2a;
}

/* Fix blurry images from scaling */
/*
img {
	image-rendering: -moz-crisp-edges;
	image-rendering:   -o-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
	-ms-interpolation-mode: nearest-neighbor;
}
*/
/* ===== Cornish theme (Option 3): navy nav bar, gold-framed flag, wordmark ===== */
#desktopNav {
	background-color: #0d1b2a;
	border-radius: 0 0 10px 10px;
	border-bottom: 4px solid #cba135;
	padding: 6px 0 12px;
}
.cornishLogo { display: inline-flex; align-items: center; text-decoration: none !important; }
.flagFrame { display: inline-flex; border: 2px solid #cba135; border-radius: 3px; line-height: 0; margin-right: 14px; }
.flagFrame-sm { margin-right: 10px; }
.cornishWordmark { font-family: 'Circular Pro','Roboto','sans-serif'; font-weight: bold; line-height: 1; white-space: nowrap; font-size: 30px; }
.cornishWordmark-sm { font-size: 20px; }
.wm-u { color: #ffffff; }
.wm-g { color: #cba135; }
#desktopNav a, #desktopNav .dropdown-toggle { color: #ffffff !important; }
#desktopNav a:visited { color: #ffffff !important; }
#desktopNav a:hover { color: #cba135 !important; }
#navSpacer { border: 0 !important; background: transparent !important; height: 0 !important; margin-top: 0 !important; margin-bottom: 1.5rem !important; }
.footer { background-color: #0d1b2a !important; border-top: 4px solid #cba135; }
.footer a:hover { color: #cba135 !important; }

/* ===== Cornish theme: dropdown readability, contact icons, mobile nav ===== */
.dropdown-item, #desktopNav a.dropdown-item { color: #0d1b2a !important; }
.dropdown-item:hover, .dropdown-item:focus, #desktopNav a.dropdown-item:hover, #desktopNav a.dropdown-item:focus { color: #0d1b2a !important; background-color: #f1efe8 !important; }
.contactIcon { display: inline-flex; align-items: center; justify-content: center; width: 130px; height: 130px; border-radius: 50%; background: #0d1b2a; color: #cba135; font-size: 54px; margin-bottom: 4px; }
.cornishMobileNav { background-color: #0d1b2a !important; border-bottom: 4px solid #cba135; }
.cornishMobileNav a { text-decoration: none !important; }
.cornishMobileNav .nav-link { color: #ffffff !important; }
.cornishMobileNav .nav-link:hover, .cornishMobileNav .nav-link:focus { color: #cba135 !important; }
.cornishWordmark { text-decoration: none !important; }

/* mobile nav: logo (shrinkable) on the left, flag + menu on the right of the
   same row; the collapsed menu still drops to a full-width row underneath */
.cornishMobileNav { flex-wrap: wrap; align-items: center; }
.cornishMobileNav > a:first-child { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; overflow: hidden; }
.cornishMobileNav > a:first-child .cornishWordmark-sm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cornishMobileNav > .d-flex { flex: 0 0 auto; margin-left: auto; align-items: center; }
.cornishMobileNav > .collapse.navbar-collapse { flex-basis: 100%; }
.cornishMobileNav .language-picker.mx-3 { margin-left: .5rem !important; margin-right: .5rem !important; }

/* ===== Cornish theme: resource blobs (replace teal PNGs) ===== */
.resourceBlob {
	position: relative; display: flex; align-items: center; justify-content: center;
	width: 100%; max-width: 280px; height: 190px; margin: 0 auto 6px; padding: 18px;
	background-color: #2a6f97; color: #ffffff !important; text-decoration: none !important;
	text-align: center; font-family: 'Circular Pro','Roboto','sans-serif'; font-weight: bold;
	font-size: 26px; line-height: 1.15; border-radius: 47% 53% 70% 30% / 30% 43% 57% 70%;
	transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.resourceBlob:hover, .resourceBlob:focus { background-color: #0d1b2a; color: #cba135 !important; transform: scale(1.04); }
.resourceBadge { position: absolute; top: -6px; left: 4px; background: #cba135; color: #0d1b2a; font-size: 13px; font-weight: bold; padding: 9px 11px; border-radius: 50%; transform: rotate(-12deg); line-height: 1; }

/* ===== Cornish theme: contact detail links -> sea-blue ===== */
.contact a { color: #2a6f97 !important; text-decoration: none; }
.contact a:hover, .contact a:focus { color: #0d1b2a !important; }

/* ===== Cornish theme: NEW badge (gold + navy, consistent with resource blobs) ===== */
.newBadge {
	position: absolute; top: -15px; right: -20px;
	background: #cba135; color: #0d1b2a;
	font-size: 11px; font-weight: bold; line-height: 1;
	padding: 6px 7px; border-radius: 50%;
	transform: rotate(-12deg); text-decoration: none;
}

/* longer wordmark "Cornish uTalk Games" — fit the nav */
.cornishWordmark { font-size: 23px; }
.cornishWordmark-sm { font-size: 16px; }

/* ===== new uTalk Cornish logo on a white chip in the navy nav ===== */
.logoChip { background: #ffffff; border-radius: 8px; padding: 5px 11px; display: inline-flex; align-items: center; margin-right: 12px; }
.logoChip-sm { padding: 4px 8px; margin-right: 8px; }
.cornishLogoImg { height: 40px; width: auto; display: block; }
.cornishLogoImg-sm { height: 26px; }

/* dashboard tab/pill menus (Leaderboard, Download, Logout…) — readable navy, white when active */
.content .nav-link { color: #0d1b2a; }
.content .nav-link.active, .content #tabButtons a.active { color: #ffffff !important; }