/* CSS Resource Document for: Army Sustainment Command   					*
!  Global classes should be defined here		  							*
*  The proponent agency for this source is AMAS-PC							*/

/* Define new font classes */
@font-face { font-family: "GI4"; font-display: swap; src: url("/Portals/54/Includes/fonts/G.I.-400.woff2") format('woff2'), url("/Portals/54/Includes/fonts/G.I.-400.ttf") format('truetype'); }
@font-face { font-family: "GI5"; font-display: swap; src: url("/Portals/54/Includes/fonts/G.I.-530.woff2") format('woff2'), url("/Portals/54/Includes/fonts/G.I.-530.ttf") format('truetype'); }
@font-face { font-family: "GI7"; font-display: swap; src: url("/Portals/54/Includes/fonts/G.I.-750.woff2") format('woff2'), url("/Portals/54/Includes/fonts/G.I.-750.ttf") format('truetype'); }

/* Define routine modifiers */
body {
  font-family: "GI4", sans-serif;
  background: linear-gradient(to bottom, rgba(75,75,75,1) 0%, rgba(23,23,23,1) 40%, rgba(0,0,0,1) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}
h1 { 
	font: 3.6rem "GI7", sans-serif;
	text-transform: uppercase;
}
h2 { 
	font: small-caps normal 2.8rem "GI7";
	border-bottom: 2px solid #eee;
	padding-bottom: 0.5rem;
}
h3 { font: 2.4rem "GI7", sans-serif; }
h4 { font: 2.4rem "GI5", sans-serif; }
h5 { font: 1.8rem "GI5", sans-serif; }
/* Modifiers that share something */
strong,
.df_Default .label,
.df_Default .section .header,
.datafont a,
.skin-title .subtitle-text { 
	font-family: "GI7", sans-serif;
	font-weight: normal;
}

/* Globals */
.center 	{ text-align: center; }
.left 		{ text-align: left; }
.right 		{ text-align: right; }
.binline 	{ display: inline-block; }
.pinline 	{ display: inline; }
.fullwidth	{ width: 100%; }
.datafont 	{ font-size: 1.2rem; }

/* What are the things we need on every page? */
.hero-bg { 
	display: none;
}
@media only screen and (min-width: 1164px) {
	.hero-bg {
		display: block;
		background: linear-gradient(to bottom, #000, #004) no-repeat center/cover;
		height: 250px;
	}
}
.hero-cover { 
	background: rgba(0, 0, 0, 0.5); 
	height: 100%; 
	width: 100%; 
	z-index: 1; 
	position: relative; 
	margin: 0; 
	padding: 0; 
	text-align: center; 
	display: table; 
}
.hero-txt { 
	display: table-cell; 
	vertical-align: middle; 
	padding: 0 8px;
	font-family: GI7;
	text-align: center;
	color: #FFF;
} 
	.hero-txt h1 { 
		color: #FFCE08;
	} 
	.hero-txt span {
		font: small-caps normal 1.6rem "GI7", sans-serif;
	}
	.hero-txt p {
		font: 1.4rem "GI5", sans-serif;
	}
.main-container {						/* This is if the content edges are too close to the edge */
	padding: 8px;
}
.ope {									/* This is for the footer since we're custom */
	height: 24px;
}
.global-text {
	width: 100%;
	text-align: center; 
	font: 1.4rem "GI5", sans-serif;
	color: #FFF;
	padding: 4px;
}
	.gt-high	{ background-color: #7b1e1e; }
    .gt-med 	{ background-color: #a78d4b; }
	.gt-low 	{ background-color: #2980b9; }
	.gt-clear	{ background-color: #2f6f4f; }

/* Things we need sometimes */
.unit-images {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin: 0 auto;
}
	.unit-images img {
		width: 60px;
		height: 60px;
		object-fit: contain;
	}
/* W3 Tables */
.tcontain {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	color: #2c2c2c;
	line-height: 1.6;
}
	.tcontain .twocol {
		flex: 1;
		min-width: 300px;
		background: #fcfcfc;
		padding: 1.5rem;
		border-radius: 8px;
		box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	}
/* Table Data */
.card-container {
	display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 2em 0;
    justify-content: space-between;
}
.info-card {
	display: flex;
    align-items: center;
    gap: 16px;
    background-color: #fdfdfd;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: calc(50% - 10px);
    padding: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
	.info-card:hover {
		transform: scale(1.03);
		box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	}
	.info-card i {
		font-size: 2rem;
		color: #3A423A;
		flex-shrink: 0;
	}
.text-block {
	display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.4;
}
	.text-block h3 {
		margin: 0;
		font-size: 1.1rem;
		line-height: 1.2;
  	}
		.text-block h3 a {
			color: #2a5d84;
			text-decoration: none;
			font-family: GI7;
		}
			.text-block h3 a:hover {
				text-decoration: underline;
			}
	.text-block .meta {
		font-size: 1rem;
		color: #666;
		line-height: 1.2;
		margin: 0;
	}
.tour-card {
    width: calc(33.333% - 13.5px);
}
@media screen and (max-width: 768px) {
	.info-card,
	.tour-card {
		width: 100%;
	}
  }

/* Define the major overrides */
html, 
button, 
input, 
select, 
textarea, 
.df_Default .hint,
.skin-breadcrumb,
.skin-breadcrumb-container a, 
.skin-breadcrumb-container a:visited, 
.skin-breadcrumb-container a:link { 
	font-family: "GI5", sans-serif; 
}
.df_Default .field {
	font-family: "GI4", sans-serif;
}
/* Header */
.skin-title a, 
.skin-title a:hover { 
	text-decoration: none; 
}
.skin-title .title-text { 
	font: small-caps normal 3.6rem "GI7", sans-serif; 
}
.subtitle-text {
	font-size: 18px !important;
	letter-spacing: 6px;
}
.border-wrapper {
	background: rgba(0,0,0,0);
}
/* Navigation */
.otnav ul ul {
	background: #fcfcfc;
	background: linear-gradient(0deg, rgba(252,252,252,1) 0%, rgba(221,221,221,1) 75%, rgba(185,185,185,1) 100%);
	border-bottom: 2px solid #3A423A;
}
.otnav ul > li.dropdown.top-level:hover {
	border-top: 4px solid #3A423A;
}
.nav-main {
	display: flex;
	justify-content: center;
	align-items: center;
}
.nav.nav-main {
	padding: 0px;
}
.otnav li.top-level {
	background: none !important;
}
.otnav li a:hover {
	color: #3A423A;
}
.otnav li a {
	padding: 6px 12px;
	color: #000;
}
/* Header & Footer */
.flinks .footer { 
	color: #FFF;
}
	.footer .stitle {
		color: #FFCE08;
		border-bottom: 1px solid #888; 
		text-align: center; 
		font: 1.4rem "GI7", sans-serif;
		text-shadow: 0 0 2px rgba(255, 215, 0, 0.6);
	}
	.footer p {
		font: 1.2rem "GI5", sans-serif;
	}
	.footer a {
		color: #FFF;
		transition: all 0.3s ease-in-out;
	}
		.footer a:hover {
			color: #FFCE08;
			text-decoration: none;
		}
	.footer img {
		filter: grayscale(100%);
		transition: filter 0.3s ease-in-out;
	}
		.footer img:hover {
			filter: grayscale(0%);
		}
.footer-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	color: #FFF;
}
.footer-col {
	flex: 1 1 30%;
	margin-right: 20px;
}
	.footer-col a {
		color: #FFF;
		font: 1.2rem "GI5", sans-serif;
		text-decoration: none;
		display: block;
		margin-bottom: 6px;
		transition: color 0.3s ease-in-out;
	}
		.footer-col a:hover {
			color: #FFCE08;
		}
.footer-horizontal {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
}
	.footer-horizontal img {
		display: block;
		max-height: 48px;
		object-fit: contain;
	}
	.footer-container .footer-horizontal:nth-child(2) {
		border-left: 1px solid #888;
		border-right: 1px solid #888;
		padding: 0 12px;
		max-width: 700px;
		flex: 0 1 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
.inline-links a {
	display: inline-block;
	margin: 4px 8px;
	text-decoration: none;
	color: #fff;
	white-space: nowrap;
}
.skin-footer-content {	/* Adjusts the head padding of the footer to a fixed amount, since we don't use the seal. */
	padding-top: 24px;
}
.header_banner_container {
	background-color: #232323 !important;
}
/* We don't need everything that AFPIMS has in it to be displayed, so this removes elements that we don't need. */
.skin-footer-banner,			/* Overrides footer on some AFPIMS pages for VCL, note: this must be added elsewhere */
.skin-footer-seal,				/* Overrides the seal on each page...we know we're the Army... */
.skin-social-header,			/* These two override the "Staying Connected" Links, but need to be added elsewhere */
.skin-social-links,
.skin-footer-top,
.skin-footer-bottom {	
	display: none;
}
.skin-footer-background,
.skin-header-background {
	background-size: cover;
	background-image: none !important;
	background: rgba(0,0,0,0);
}