:root {
   --footer-height: 50px;
}

.navbar-brand img {
	width: auto;
	height: 50px;
	transition: transform .2s ease-in-out;
}
.navbar-brand img:hover {
   transform: scale(1.1)
}

@media (min-width: 992px) {
	.navbar-brand img {
		height: 65px;
	}
}

#siteMenu {
	background-color: var(--white);
	position: sticky;
	top: 0;
	z-index: 999;
}

#siteMenu .dropdown-divider {
	--bs-dropdown-divider-bg: rgba(0,0,0,.15);
}

.footer {
	height: var(--footer-height);
	position: fixed;
	inset: 0;
	top: auto;
	padding: 0 .75em;
	display: flex;
	gap: .5em;
	align-items: center;
	justify-content: space-between;
}
main {
	padding-bottom: var(--footer-height);
}

@media (orientation:portrait) and (max-width:576px) {
	/* On phones, never a fixed footer */
	main { padding-bottom: 0; }
	.footer { position: static; }
}
body.game {
	/* On game page no fixed footer, it can cover game-iframe on small screens */
	main { padding-bottom: 0; }
	.footer { position: static; }
}

.star-rating .active {
	color: var(--warning);
}

.cs-carousel .card a {
	text-decoration: none;
	color: var(--gray);
}

.quickSearchResults img {
	height: 32px;
	margin-right: 0.5rem;
}

a.dropdown-item:hover {
	background-color: var(--secondary) !important;
}

#langDropdown .flag {
   margin-bottom: -4px;
}

/* New SEO */

h2 {
   font-size: 1.25rem;
}

.what-why {
   font-size: 85%;
}

/* /New SEO */

.intro {
	font-size: 0.85rem;
	border-bottom: 1px solid var(--secondary-dark);
}

.intro h1 {
	font-size: 1.25rem;
	text-shadow: 0 0 2px rgba(2,138,174,.5);
	font-family: 'Nunito', sans-serif;
	font-weight: 600;
	margin: 0 0 0.25rem 0;
}

.intro p {
	margin-bottom: 0;
	text-align: justify;
}

.intro video {
	width: clamp(100px,9vw,140px);
	transition: all .25s;
}
.intro video:hover {
	transform: scale(1.3);
}

@media (min-width: 576px) {
	.intro {
		font-size: 1rem;
	}
	.intro h1 {
		font-size: 1.75rem;
		margin: 0 0 0.5rem 0;
	}
}

/** Yolla Ads **/

.yolla-ad {
	display: inline-block;
	width: 100%;
	height: 100%;
	min-height: inherit;
	background: radial-gradient(#444 15%, transparent 16%), linear-gradient(45deg, transparent 49%, #444 49% 51%, transparent 51%), linear-gradient(-45deg, transparent 49%, #444 49% 51%, transparent 51%);
	background-size: 2em 2em;
	background-color: rgba(255,255,255,.75);
	border: 1px solid #444;
}

.adBlocked {
	background: #0c366e;
	color: #fff;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding: 15px 15px 15px 100px;
	background-image: url('data:image/png;base64,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');
	background-position: 10px 50%;
	background-size: 70px 70px;
	background-repeat: no-repeat;
	border-radius: 5px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center
}

.adBlocked a {
	color: yellow;
}

/** /Yolla Ads **/

/** Footer **/

.footer {
	background-color: #d1ebf2;
	color: var(--black);
	font-size: 0.875rem;
	border-top: 1px solid #9cd2e3;
	border-bottom: 1px solid #9cd2e3;
}

.footer .heart {
	color: red;
	animation: heathing 1.25s ease infinite;
}

@keyframes heathing {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.25);
  }
  40% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.25);
  }
  80% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

.footer a {
	display: inline-block;
	background-color: var(--dark);
	color: var(--white);
	padding: 5px 14px;
	text-decoration: none;
	transition: background-color 0.25s ease;
}

.footer a:hover {
	background-color: var(--primary);
}

/** /Footer **/

.categories .list-group-item {
	padding: .75rem .25rem;
	background-color: #0189ad;
	background-image: linear-gradient(top,#01b0dc,#0189ad);
	background-image: -webkit-linear-gradient(top,#01b0dc,#0189ad);
	color: #fff;
	text-shadow: 1px 1px #000;

}
.categories .list-group-item:not(.active) {
	cursor: pointer;
}
.categories .list-group-item:hover {
	background-image: linear-gradient(top,#0189ad,#01b0dc);
	background-image: -webkit-linear-gradient(top,#0189ad,#01b0dc);
}
.categories .list-group-item.active {
	background-color: #c33222;
	background-image: linear-gradient(top,#dd3626,#a73020);
	background-image: -webkit-linear-gradient(top,#dd3626,#a73020);
}

.categories .list-group-item a {
	color: #fff;
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/*** Fancy links ***/

.fancyLinks a {
	color: var(--primary);
   text-decoration: none;
   position: relative;
}

.fancyLinks a:not(.btn)::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  border-radius: 4px;
  background-color: var(--primary);
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform .3s ease-in-out;
}

.fancyLinks a:not(.btn):hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

/*** /Fancy links ***/

.home-carousel .container > .card {
	background-color: #fff;
}

.home-carousel .card {
	 margin: 0.25rem;
}

.home-carousel h3 {
	font-size: 1em;
	margin-top: 1em;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.home-carousel .card-body {
	text-align: center;
	font-size: 14.5px;
}

.partners {
	padding: 1rem;
	border-radius: 1rem;
	border: 1px solid var(--card-border-color)
}

/* Games Flip Cards */
/* https://nicolaskadis.info/posts/pure-css-flip-cards-using-bootstrap-4-and-css-grid-no-js */

.card-container {
	perspective: 1000px;
}

.card-container .flip {
	display: grid;
	grid-template-areas: "frontAndBack";
	transform-style: preserve-3d;
	transition: all 0.6s;
}

.card-container .flip > div {
	backface-visibility: hidden;
	transform-style: preserve-3d;
}

.card-container .front {
	grid-area: frontAndBack;
}

.card-container .back {
	grid-area: frontAndBack;
	transform: rotateY(-180deg);
}

.card-container:hover .flip {
	transform: rotateY(180deg);
}

.games-cards .front h3 {
	font-size: 1rem;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.games-cards .card {
	border-color: var(--card-border-color);
	-webkit-user-select: none;
	user-select: none;
	background-color: #fff;
}

.games-cards .front .body {
	text-align: center;
	padding: 1rem 0.5rem;
}

.games-cards .tags {
	position: absolute;
	bottom: -15px;
	left: 0;
	width: 100%;
	z-index: 1;
	text-align: center;
}

.games-cards .tags .badge {
	font-size: 0.85rem;
	padding: 0.35em 0.5em;
}

@media (max-width: 575.98px) {
	.games-cards .tags {
		bottom: -12px;
	}
	.games-cards .tags .badge {
		font-size: 0.6rem;
	}
	.games-cards .game {
		padding-left: 5px;
		padding-right: 5px;
	}
	.games-cards .back > div:first-child {
		overflow: auto;
		max-height: 105px;
	}
	.games-cards .back {
		font-size: 0.85rem;
	}
}

.games-cards .front>div {
	position: relative;
}

.games-cards .back {
	padding: 0.5rem;
	display: grid;
	grid-template-rows: 65% 35%;
   text-align: center;
   align-items: center;
	cursor: pointer;
	overflow: hidden;
}

.game.card-container > a, .game.card-container > a:hover {
	color: inherit;
	text-decoration: none;
}

/* /Games Flip Cards */

/* Play button as used in flippable cards on homepage */
.btn.play {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease !important;
	width: 150px;
	max-width: 90%;
	margin: 0 auto;
}

.btn.play:hover {
	font-weight: 700;
	box-shadow : 0 0 1px 5px var(--primary-light);
}
/* /Play button as used in flippable cards on homepage */

#searchForm .results {
	position: absolute;
	top: 100%;
	background-color: var(--white);
	box-shadow: 0 0.375rem 1.25rem 0 rgba(64,64,64,0.2);
}

#searchForm .results > ul {
	list-style: none;
	margin: 0;
	margin-top: .0625rem;
	padding: .625rem 1.5rem 1.25rem;
}

#searchForm .results > ul li {
	margin: 0;
	padding: 0.25rem 0.5rem;
	cursor: pointer;
}

#searchForm .results > ul li.hover {
	background-color: var(--secondary);
	color: var(--primary);
}

.other-sites > .card {
	background-color: #fff;
}

.other-sites .cs-carousel img {
	max-width: 100%;
	height: auto;
}

/** Favorites badge counter **/

#favQty {
   position: relative
}

.qty-circle {
   background: red;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   border: 2px solid var(--light);
   color: var(--light);
   font: 10px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
   font-weight: 700;
   text-align: center;
   box-shadow: 1px 1px rgba(0, 0, 0, .4)
}

#favQty .qty-circle {
   position: absolute;
   right: -6px;
   top: -11px
}

/** /Favorites badge counter **/

.tns-item .name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}