h1, h2, h3, h4, h5, h6, p, div, span { font-family: 'Roboto', sans-serif; }

body {
	color:#eee;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Ultra-wide monitors - 5 cards per row */
@media (min-width: 2500px) {
	.col-xxl-2 {
		flex: 0 0 20%;
		max-width: 20%;
	}
	
	/* Adjust spacing for 5-card layout */
	.flipcard {
		margin-bottom: 15px;
	}
	
	/* Slightly smaller text for better fit */
	.covertext, .coveryear {
		font-size: 13px;
		padding: 6px;
	}
	
	.btn-sm {
		font-size: 11px;
		padding: 5px 10px;
	}
}

/* Extra-wide monitors - 4 cards per row */
@media (min-width: 2000px) and (max-width: 2499px) {
	.flipcard {
		margin-bottom: 20px;
	}
}

/* Large screens - 3 cards per row */
@media (min-width: 1200px) and (max-width: 1999px) {
	.flipcard {
		margin-bottom: 20px;
	}
}

/* Medium screens - 2 cards per row */
@media (min-width: 768px) and (max-width: 1199px) {
	.flipcard {
		margin-bottom: 20px;
	}
}

/* Mobile-first responsive design */
@media (max-width: 767px) {
	.flipcard {
		margin-bottom: 20px;
	}
	
	.covertext, .coveryear {
		font-size: 14px;
		padding: 8px;
	}
	
	.btn-sm {
		font-size: 12px;
		padding: 6px 12px;
		margin: 2px;
		min-height: 44px; /* Touch target size */
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	
	.storelinks img {
		max-width: 120px;
		height: auto;
	}
	
	.otherlinks {
		padding: 15px;
	}
	
	.description {
		padding: 15px;
		font-size: 14px;
		line-height: 1.4;
	}
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
	.flipcard {
		cursor: pointer;
	}
	
	.flipcard:hover:not(.nofliponhover) > .content {
		transform: none; /* Disable hover effects on touch devices */
	}
}

/* SEO-friendly project links - hidden from users but visible to search engines */
#seo-projects {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.seo-project-links {
	line-height: 1.8;
}

.seo-project-links a {
	color: #0085BF;
	text-decoration: none;
	margin-right: 10px;
}

.seo-project-links a:hover {
	text-decoration: underline;
}

.cover:hover .coverimg {
		transform: none;
		filter: none;
}

/* Accessibility improvements */
.flipcard:focus {
	outline: 2px solid #0085BF;
	outline-offset: 2px;
}

.btn:focus {
	outline: 2px solid #0085BF;
	outline-offset: 2px;
}

/* Loading states */
.coverimg {
	transition: transform 1s ease-in-out, filter 0.3s ease-in-out;
}

.coverimg[loading] {
	opacity: 0.7;
}

/* Performance optimizations */
.flipcard .content {
	will-change: transform;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.covertext {
		background-color: #000;
		color: #fff;
		border: 1px solid #fff;
	}
	
	.btn-info {
		background-color: #000;
		color: #fff;
		border: 1px solid #fff;
	}
}

.carousel-item img {
  height: 390px !important;
  max-height: 390px !important;
  box-shadow: 2px 2px 2px 2px #888888;
  margin-bottom:5px;
}

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top20 { margin-top:20px; }
.top30 { margin-top:30px; }

.hidden {
	display:none;
}

.top-margin {
  margin-top:30px;
}

.bottom-margin {
  margin-bottom:30px;
}

.hpadding {
  padding-left:20px;
  padding-right:20px;
}

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

body {
 background: black;
}

.bordered {
	border-color:black;
	border-style:solid;
	border-width:2px;
}

.coverimg {
	transition: transform 1s ease-in-out;
}

.coverimg:not(.nogray) {
	-webkit-filter: grayscale(98%) brightness(30%);
	filter: grayscale(98%) brightness(30%);
	transition: brightness 1s, transform 1s ease-in-out, -webkit-filter 5s, filter 5s;
}

.cover:hover  {
	cursor:pointer;
}

.cover:hover .coverimg {
    transform: scale(0.95);
}

.cover:hover .coverimg, .ismobile .coverimg {
	-webkit-filter: grayscale(0%) brightness(100%);
	filter: grayscale(0%) brightness(100%);
    transition: brightness .5s, transform 1s ease-in-out, -webkit-filter 2s, filter 2s;
}

.coverlogo {
	position: absolute;
	top:0px;
	left:0px;
	padding:10%;
	opacity:0;
    transition: all 0.5s ease-in-out;
}

.cover:hover  .coverlogo, .ismobile .coverlogo {
    opacity: 1.0;
    transition: all 0.8s ease-in-out;
}

.covertext {
	color:white;
	background-color:black;
	position: absolute;
	bottom:0px;
	width:100%;
	text-align: center;
	padding:5px;
	opacity:0;
    transition: all 0.5s ease-in-out;
}

.coveryear {
	color:white;
	position: absolute;
	top:20px;
	width:100%;
	text-align: right;
	padding-right:30px;
	opacity:0;
    transition: all 0.5s ease-in-out;
}

.cover:hover .covertext, .ismobile .covertext {
    bottom:10%;
	opacity:1.0;
    transition: all 0.8s ease-in-out;
}

.cover:hover .coveryear, .ismobile .coveryear {
    top:10%;
	opacity:1.0;
    transition: all 0.8s ease-in-out;
}

.storelinks {
	position: absolute;
	right:0px;
	top:0px;
	padding:25px;
	width:100%;
}

.otherlinks {
	position: absolute;
	right:0px;
	bottom:0px;
	padding:25px;
	width:100%;
}

.btn-sm {
	line-height:1;
}

.description {
	position: absolute;
	right:0px;
	bottom:10%;
	padding:25px;
	width:100%;
	height:50%;
}

.flipcard  {
	-webkit-perspective: 800px;
	perspective: 800px;
}

.flipcard:hover:not(.nofliponhover) > .content {
	-webkit-transform: rotatey(-180deg);
	transform: rotatey(-180deg);
}

.flipped > .content {
	-webkit-transform: rotatey(-180deg);
	transform: rotatey(-180deg);	
}

.flipcard .content {
	-webkit-transform-style: preserve-3d;
	-webkit-transition: 0.5s;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transition: 0.5s;
}

.flipcard .content .front, .flipcard .content .back {
	position: absolute;
	top:0;
	left:0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: visible;
}

.flipcard .content .front, .flipped .content .front {
	position:static;
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);	
}

.flipcard .content .back, .flipped .content .back {
	transform: rotateY(-180deg);
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	width:100%;
}

.flipcard .content .front, .flipcard.flipped .content .back {
	/* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
	animation: stayvisible 0.5s both;
	-webkit-animation: stayvisible 0.5s both;
	-moz-animation: stayvisible 0.5s both;
	-o-animation: stayvisible 0.5s both;
	-ms-animation: donothing 0.5s;
	-ms-transition: visibility 0s linear 0.17s;
	visibility: visible;
}

.flipcard.flipped .content .front, .flipcard .content .back {
	/* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
	animation: stayvisible 0.5s both;
	-webkit-animation: stayvisible 0.5s both;
	-moz-animation: stayvisible 0.5s both;
	-o-animation: stayvisible 0.5s both;
	-ms-animation: donothing 0.5s;
	-ms-transition: visibility 0s linear 0.17s;
	visibility: hidden;
}