﻿/* CSS Document */




:root {

	/*^  ///  ==========  GLOBAL VALUES ==========  ///  */
	--od-pos: unset;
	/** position */
	--od-top: unset;
	/** top */
	--od-right: unset;
	/** right */
	--od-bottom: unset;
	/** bottom */
	--od-left: unset;
	/** left */
	--od-dis: unset;
	/** display */
	--od-gt: unset;
	/** grid-template */
	--od-gtc: unset;
	/** grid-template-columns */
	--od-gtr: auto;
	/** grid-template-rows */
	--od-gta: unset;
	/** grid-template-areas */
	--od-gg: unset;
	/** grid-gap */
	--od-cg: 2rem;
	/** column-gap */
	--od-rg: unset;
	/** row-gap */
	--od-pc: center;
	/** place-content */
	--od-pci: center;
	/** place-items */
	--od-jc: center;
	/** justify-content */
	--od-ji: unset;
	/** justify-items */
	--od-js: center;
	/** justify-self */
	--od-ai: center;
	/** align-items */
	--od-ac: unset;
	/** align-content */
	--od-as: unset;
	/** align-self */
	--od-gp: 2rem;
	/** gap */
	--od-fld: unset;
	/** flex-direction */
	--od-flf: unset;
	/** flex-flow */
	--od-flw: unset;
	/** flex-wrap */
	--od-bg: unset;
	/** background */
	--od-c: inherit;
	/** color */
	--od-ff: var(--od-ff-body);
	/** font-family */
	--od-fz: var(--od-fz-sm);
	/** font-size */
	--od-fw: inherit;
	/** font-weight */
	--od-bflt: none;
	/** backdrop filter */
	--od-filter: none;
	/** filter */
	--od-lh: inherit;
	/** line-height */
	--od-lis: none;
	/** list type */
	--od-bdw: unset;
	/** border-width */
	--od-bds: solid;
	/** boder-style */
	--od-bdc: currentcolor;
	/** border-color */
	--od-bdr: unset;
	/** border-radius */
	--od-otw: unset;
	/** outline-width */
	--od-ots: solid;
	/** outline-style */
	--od-otc: currentcolor;
	/** outline-color */
	--od-otof: unset;
	/** outline-offset */
	--od-bxsh: unset;
	/** box shadow - inset hoff voff blur #000;*/
	--od-p: 0;
	--od-pt: unset;
	--od-pr: unset;
	--od-pb: unset;
	--od-pl: unset;
	/** padding */
	--od-m: 0;
	--od-mt: unset;
	--od-mr: unset;
	--od-mb: unset;
	--od-ml: unset;
	/** margin */
	--od-txa: inherit;
	/** text-align */
	--od-txd: none;
	/** text decoration */
	--od-txdcol: inherit;
	/** text decoration color */
	--od-trs: ease-in-out 500ms;
	/** transition */


	/*^ ---------- UNIQUE ---------- */

	/** Reading width - Accessibility */
	--od-read-maxWidth: 60ch;

	/*^ ---------- Page/Container ---------- */
	--od-fullpage: min(calc(100% - 40px), 1000px);
	/** full page width */


	/*^ ---------- MainMenu ---------- */
	/** main menu black bar height */
	--od-menuBar: 4rem;


	/*^ ---------- SubMenu ---------- */
	/** submenu bar height */
	--od-subMenuBar: 3.159rem;

	--od-submenu-ff: var(--od-ff-condensed);
	--od-submenu-fz: 12.5px;
	--od-submenu-fw: 400;
	--od-submenu-lh: 1.1;


	/*^ ---------- Scrollbars ---------- */
	--od-scrollbar-w: 1rem;
	--od-scrollbar-bg: var(--od-bg-preDark);
	--od-scrollbar-thumb: var(--od-c-offBlack);


	/*^ ---------- Cards ---------- */
	--od-card-ff: var(--od-ff-condensed);
	/** font-family */

	--od-card-fz: var(--od-submenu-fz);
	/** font-size */

	--od-card-fw: 400;
	/** font-weight */

	--od-card-bdw: 2px;
	/** border width */

	--od-card-bds: solid;
	/** border style */

	--od-card-bdc: rgb(0, 0, 0, 0.13);
	/** border color */

	--od-card-bdtw: 1.5px;
	/** border-top width */

	--od-card-bdts: solid;
	/** border-top style */

	--od-card-bdtc: var(--od-c-red);
	/** border-top color */

	--od-card-bdrd: 0 0 1rem 1rem;
	/** border-radius */


	/**^ ---------- Contacts ---------- */
	--od-contactList-columns: repeat(auto-fit, minmax(17.5rem, 1fr));


	/**^ ---------- Tabs ---------- */
	--od-tab-c: white;
	/** color */
	--od-tab-bg: #333;
	/** background */
	--od-tab-ff: var(--od-ff-condensed);
	/** font-family */
	--od-tab-fz: var(--od-submenu-fz);
	/** font-size */
	--od-tab-fw: 500;
	--od-tab-lh: 1;
	/** line-height */
	--od-tab-bdw: 1.5px;
	/** border width */
	--od-tab-bds: solid;
	/** border style */
	--od-tab-bdc: currentcolor;
	/** border color */
	--od-tab-bdtw: 2px;
	/** border-top width */
	--od-tab-bdts: solid;
	/** border-top style */
	--od-tab-bdtc: rgb(255, 255, 255, .01);
	/** border-top color */
	--od-tab-bdr: .75em .75em 0 0;
	/** border-radius */
	--od-tab-w: fit-content;
	/** width */
	--od-tab-h: auto;
	/** height */
	--od-tab-p: 0.75em 1em;
	/** padding */
	--od-tab-m: 0 0 0 0.2em;
	/** margin */
	--od-tab-outw: 1.5px;
	/** outline-width */
	--od-tab-outs: solid;
	/** outline-style */
	--od-tab-outc: rgb(255, 255, 255, .6);
	/** outline */
	--od-tab-outo: none;
	/** outline-offset */
	--od-tab-cur: pointer;
	/** cursor */


	/*^ ---------- Chart ---------- */
	--od-chart-dis: unset;
	--od-chart-fld: unset;
	--od-chart-flw: unset;
	--od-chart-ai: default;
	--od-chart-ac: unset;
	--od-chart-as: unset;
	--od-chart-jc: default;
	--od-chart-js: unset;
	--od-chart-pc: center;
	--od-chart-pci: center;
	--od-chart-ff: var(--od-ff-condensed);
	--od-chart-fz: var(--od-fz-sm);
	--od-chart-fw: 500;
	--od-chart-c: #232323;
	--od-chart-bg: white;
	--od-chart-lh: normal;
	--od-chart-w: 100%;
	--od-chart-h: auto;
	--od-chart-p: 0;
	--od-chart-pt: inherit;
	--od-chart-pr: inherit;
	--od-chart-pb: inherit;
	--od-chart-pl: inherit;
	--od-chart-mt: 0;
	--od-chart-mr: 0;
	--od-chart-mb: 0;
	--od-chart-ml: 0;
	--od-chart-m: 0;
	--od-chart-gtc: 10rem 1fr 10rem;
	--od-chart-gtr: auto;
	--od-chart-gta: "col1 col2 col3";
	--od-chart-cg: 1rem;
	--od-chart-jc: default;
	--od-chart-ai: default;
	--od-chart-ta: center;
	--od-chart-bdw: 1.5px;
	--od-chart-bds: solid;
	--od-chart-bdc: #dcdcdc;
	--od-chart-bdr: 0 0 0.5rem 0.5rem;
	--od-chart-bxshdw: 1px 2px 4px 2px rgb(0, 0, 0, .15);

	/*^ ---------- ContentSwitch ---------- */
	/** is actually info and desc  */

	--od-contentSwitch-pb: 3rem;
	/** padding-bottom */


	/*^ ---------- Links ---------- */
	--od-link-td: underline;
	/** text-decoration */
	--od-link-tdc: currentcolor;
	/** text-decoration-color */

	/** --- :hover --- */
	--od-link-c-hover: currentcolor;
	--od-link-tdc-hover: var(--od-c-red);
	/** text-decoration-color */
	--od-link-tdth-hover: 2px;
	/** text-decoration-thickness */


	/*^ ---------- Container ---------- */
	--od-con-bg: white;


	/*^ ---------- Gallery Container ---------- */
	--od-con-gallery-bgc: white;
	/** background-color */
	--od-con-gallery-w: fit-content;
	/** width */
	--od-con-gallery-h: auto;
	--od-con-gallery-p: 2rem;
	/** padding */
	--od-con-gallery-m: 2rem auto;
	/** margin */

	--od-slider-w: min(560px, 75vw);
	/** Img width */
	--od-slider-h: auto;
	/** Img height */


	/*^  ///  ==========  FONT SIZES ==========  ///  */
	/** <h1>  */
	--od-fz-xl: clamp(3.2rem, 2.5vw + 10px, 4.8rem);
	/**< .subTitle  */
	--od-fz-subTitle-xl: clamp(7.2rem, 3vw + 10px, 12rem);
	--od-fz-subTitle-l: clamp(4.8rem, 2.5vw + 10px, 7.2rem);
	--od-fz-subTitle-m: clamp(3.2rem, 2.5vw + 10px, 4.8rem);
	/** <h2> */
	--od-fz-l: 2.4rem;
	/** <h2 class="title"> */
	--od-fz-l-title: clamp(24px, 2vw + 10px, 36px);
	/** <h3> */
	--od-fz-ml: 2.2rem;
	/** <h3> */
	--od-fz-m: 2rem;
	/** <h3 class="title">*/
	--od-fz-m-title: clamp(20px, 1.5vw + 10px, 28px);
	/** <h4> */
	--od-fz-ms: 1.6rem;
	/**clamp(16px, .75vw + 10px, 24px); */
	/** <p> */
	--od-fz-sm: 1.4rem;
	/**clamp(1.4rem, .9vw + 0.2em, 16px) */
	/** <footer> text */
	--od-fz-xs: 1.2rem;
	/**clamp(1.2rem, .27vw + 6.5px, 1.4rem);
	/**<  sub page menu  */
	--od-submenu-fz: 1.5rem;
	/**<blockquote> */
	--od-fz-q: 1.2em;
	/**clamp(2rem, .75vw + 10px, 2.8rem); */
	/**<figcaption> */
	--od-fz-cap: 1.2rem;
	/**clamp(1.2rem, .27vw + 6.5px, 1.6rem);
	/**< note */
	--od-fz-note: 0.8em;
	/** in-line note/comment - CAC enabled */

	/** ??? I don't know about this - OD index ?*/
	--od-fz-stayConnected: 15rem;
	/** Don't think I'm using */
	--od-fz-subhead: clamp(3rem, 2vw + 10px, 4rem);


	/*^  ///  ==========  FONT FAMILIES ==========  ///  */
	--od-ff: inherit;

	--od-ff-title: 'Teko', sans-serif;
	--od-ff-subTitle: 'Montserrat', sans-serif;
	--od-ff-heading: 'Alternate Gothic', sans-serif;
	--od-ff-condensed: 'BarlowCondensed', sans-serif;
	--od-ff-semiCondensed: 'BarlowSemiCondensed', sans-serif;
	--od-ff-body: 'OpenSans', sans-serif;
	--od-submenu-ff: 'BarlowCondensed', sans-serif;

	/** font-family: 'STIX-TwoText', serif;
					font-family: 'Oswald', sans-serif;
					font-family: 'RobotoCondensed', sans-serif;
					font-family: 'Teko', sans-serif;
					font-family: 'OpenSans', sans-serif;
					*/



	/*^  ///  ==========  COLORS ==========  ///  */
	--od-c: inherit;

	--od-c-link: hsl(216, 86%, 26%);

	--army-c-gold: #D4A804;

	--od-c-red: #B80808;
	--od-c-gold: hsl(50, 100%, 74%);
	--od-c-yellow: hsl(49, 63%, 61%);
	--od-c-moh: hsl(220, 60%, 51%);
	--od-c-fb: #1876F2;

	/**  ///  KHAKIS  ///  */
	--od-c-gurkha: rgb(163, 151, 98);
	--od-c-bisonHide: hsl(48, 24%, 75%);
	/** not original Bison Hide color (adjusted)*/
	--od-c-chino: hsl(51, 26%, 61%, 0.938);
	--od-c-whiteRock: hsl(50, 25%, 76%);
	--od-c-travertine: hsl(51, 24%, 85%);
	--od-c-ltKhaki: rgb(227, 228, 212, 1);

	--od-c-offBlack: hsl(0, 0%, 33%);
	--od-c-orgBlack: hsl(12, 4%, 25%);
	--od-c-contrastWhite: #efefef;



	/**  used in tables, forms, lists, ect... to differentiate lines  */


	/*^  ///  ==========  BACKGROUNDS / GRADIENTS ==========  ///  */
	--od-bg: inherit;
	--od-bg-con: rgb(255, 255, 255, 0.01);


	/*+  Button  */
	--od-bg-btn: transparent;


	/*+  H3 TABS  */
	--od-bg-h3Tabs: linear-gradient(135deg, var(--od-c-ltKhaki) 0%, var(--od-c-travertine) 100%);

	/***  ///  LKF  -  Light Khaki Fade  ///  -  (mild yellow) to fade 0  */
	/***  used in the subpage menu bar  */
	--od-bg-lkf: linear-gradient(316deg, rgb(231 222 213 / 1%) 0%, rgb(228 227 212 / 100%) 100%);
	/***  used in the submenu dropdown  */
	--od-bg-subDD: linear-gradient(90deg, rgba(227, 226, 212, 1) 0%, rgba(216, 215, 211, 0.95) 100%);

	/***  DBB - Dark Blue Black  */
	--od-bg-dbb: linear-gradient(to top, #0f1d22 50%, #0b181c 100%);

	/***  LGK  -  Light Gray Khaki  w/ a dark gray diaginal streak  */
	--od-bg-lgk: linear-gradient(to bottom right, hsl(40deg 18% 90%) 0%, hsl(80, 0%, 60%) 50%, hsl(0, 0%, 85%) 100%);


	/***  LTK  -  Light Khaki  a subtle khaki gradient  */
	--od-bg-ltk: linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%);


	/***  blackBlue  -  black BG w/ blue tint */
	--od-bg-blackBlue: linear-gradient(to left, #242628 0%, #4d5155 100%);


	/***  blackRed  -  black BG #282524 w/ red tint #554e4d */
	--od-bg-blackRed: linear-gradient(to right, #721000 0%, #B80808 100%);

	
	/***  PREMIUM DARK  */
	--od-bg-preDark: linear-gradient(to left, #434343 0%, black 100%);
 /*** preDark radial gradient */
 --od-bg-preDark-radial: radial-gradient(#434343 0%, black 100%); 

 /*** -- WRT WhiteRock and Travertine - Radial Gradient -- */
 --od-bg-wrt: radial-gradient(to center, hsl(50, 25%, 76%) 0%, hsl(51, 24%, 85%) 100%);
	
	/*** SLICK CARBON - black/gray to dark gray haze gradient  */
	--od-bg-slickCarbon: linear-gradient(to bottom, #232323 0%, #2f2f2f 40%, #0c0c0c 150%), linear-gradient(to top, rgb(255,255,255,0.40) 0%, rgb(0,0,0,0.25) 200%);
	/*** need to add: background-blend-mode: multiply;  */

	/***  LOON CREST  -  subtle dark gray gradient  */
	--od-bg-loonCrest: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%),
		radial-gradient(at top center, rgba(255, 255, 255, 0.40) 0%, rgba(0, 0, 0, 0.40) 120%) #989898;


	/***  SHARP GLASS - without the blend mode lighten */
	--od-bg-sharpGlass: linear-gradient(-180deg, rgba(255, 255, 255, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%),
		#C9CCD3;


	/*** GLASS WATER */
	--od-bg-glassWater: linear-gradient(to top, #dfe9f3 0%, white 100%);


	/**  ///  BACKGROUND IMAGE  ///  */
	--od-bgi: url(/images/galleryBG.png);



}

/**!  ///  END OF ROOT  ///  */




/*^  ///  ==========  INSTALLED FONTS ==========  ///  */


/*^  ///  OSWALD  ///  */
@font-face {
	font-family: 'Oswald';
	src: url('/fonts/woff/Oswald-VariableFont_wght.woff') format('woff-variations'),
	     url('/fonts/ttf/Oswald/Oswald-VariableFont_wght.ttf') format('truetype-variations');
	font-weight: 300 900;
	font-stretch: 50% 151%;
	font-style: oblique 0deg 15deg;
}
/*<  ITALIC  */
/* @font-face {
	font-family: 'Oswald';
	src: url('/fonts/ttf/Oswald/Oswald-Italic.ttf') format('truetype');
	font-weight: 400;
} */

@font-face {
	font-family: 'Oswald';
	src: url('/fonts/ttf/Oswald/Oswald-SemiBoldItalic.ttf') format('truetype');
	font-weight: 600;
}

@font-face {
	font-family: 'Oswald';
	src: url('/fonts/ttf/Oswald/Oswald-BoldItalic.ttf') format('truetype');
	font-weight: 700;
} 



/*^  ///  OPEN SANS  /// */ 
/**@font-face {
	font-family: 'OpenSans';
	src: url('/fonts/woff/OpenSans-VariableFont_wdth_wght.woff') format('woff-variations'),
	     url('/fonts/woff/OpenSans-Italic-VariableFont_wdth_wght.woff') format('woff-variations');
	font-weight: 300 900;
	font-stretch: 50% 151%;
	font-style: oblique 0deg 15deg;
} */

@font-face {
	font-family: 'OpenSans';
	src: url('/fonts/ttf/OpenSans/OpenSans-Regular.ttf') format('truetype'),
			 url('/fonts/ttf/OpenSans/OpenSans-Italic.ttf') format('truetype');
	font-weight: 400;
}

@font-face {
	font-family: 'OpenSans';
	src: url('/fonts/ttf/OpenSans/OpenSans-SemiBold.ttf') format('truetype'),
			 url('/fonts/ttf/OpenSans/OpenSans-SemiBoldItalic.ttf') format('truetype');
	font-weight: 600;
}

@font-face {
	font-family: 'OpenSans';
	src: url('/fonts/ttf/OpenSans/OpenSans-Bold.ttf') format('truetype'),
			 url('/fonts/ttf/OpenSans/OpenSans-BoldItalic.ttf') format('truetype');
	font-weight: 700;
} 


/*^  ///  MONTSERRAT  /// */ 
@font-face {
	font-family: 'Montserrat';
	src: url('/fonts/woff/Montserrat-VariableFont_wght.woff') format('woff-variations'),
	     url('/fonts/woff/Montserrat-Italic-VariableFont_wght.woff') format('woff-variations');
	font-weight: 300 900;
	font-stretch: 50% 151%;
	font-style: oblique 0deg 15deg;
}
@font-face {
	font-family: 'Montserrat';
	src: url('/fonts/ttf/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype-variations'),
	     url('/fonts/ttf/Montserrat/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations');
	font-weight: 300 900;
	font-stretch: 50% 151%;
	font-style: oblique 0deg 15deg;
}

/*^  ///  BARLOW CONDENSED  /// */ 
@font-face {
	font-family: 'BarlowCondensed';
	src: url('/fonts/woff/BarlowCondensed-Regular.woff') format('woff'),
	  	 url('/fonts/ttf/BarlowCondensed/BarlowCondensed-Regular.ttf') format('truetype'),
			 url('/fonts/ttf/BarlowCondensed/BarlowCondensed-Italic.ttf') format('truetype');
	font-weight: 400;
}

@font-face {
	font-family: 'BarlowCondensed';
	src: url('/fonts/woff/BarlowCondensed-SemiBold.woff') format('woff'),
	  	 url('/fonts/ttf/BarlowCondensed/BarlowCondensed-SemiBold.ttf') format('truetype'),
			 url('/fonts/ttf/BarlowCondensed/BarlowCondensed-SemiBoldItalic.ttf') format('truetype');
	font-weight: 600;
}

/*^  ///  BARLOW SEMICONDENSED  /// */ 
@font-face {
	font-family: 'BarlowSemiCondensed';
	src: url('/fonts/woff/BarlowSemiCondensed-Regular.woff') format('woff'),
	     url('/fonts/ttf/BarlowSemiCondensed/BarlowSemiCondensed-Regular.ttf') format('truetype'),
			 url('/fonts/ttf/BarlowSemiCondensed/BarlowSemiCondensed-Italic.ttf') format('truetype');
	font-weight: 400;
}

@font-face {
	font-family: 'BarlowSemiCondensed';
	src: url('/fonts/woff/BarlowSemiCondensed-SemiBold.woff') format('woff'),
	     url('/fonts/ttf/BarlowSemiCondensed/BarlowSemiCondensed-SemiBold.ttf') format('truetype'),
			 url('/fonts/ttf/BarlowSemiCondensed/BarlowSemiCondensed-SemiBoldItalic.ttf') format('truetype');
	font-weight: 600;
}

/*^  ///  TEKO  ///  */
@font-face {
	font-family: 'Teko';
	src: url('/fonts/woff/Teko-Medium.woff') format('woff'),
	     url('/fonts/ttf/Teko/Teko-Medium.ttf') format('truetype');
	font-weight: 500;
}

@font-face {
	font-family: 'Teko';
	src: url('/fonts/woff/Teko-Semi-Bold.woff') format('woff'),
	     url('/fonts/ttf/Teko/Teko-SemiBold.ttf') format('truetype');
	font-weight: 600;
}

/**  ///  end of installed fonts  ///  */
















/**  ///  ==========  GRADIENT BACKGROUNDS ==========  ///  */

/**  ///  ROBOTO CONDENSED  -  Lite swirl gray///  */
.lightSwirlGray-BG {
	background: linear-gradient(-180deg, #BCC5CE 0%, #929EAD 98%), radial-gradient(at top left, rgba(255, 255, 255, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%);
	background-blend-mode: screen;
}


/**  ///  COUP DE GRACE  -  Dirty Dark Tan  ///  */
.dirtyDarkTan {
	background-color: #DCD9D4;
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%), radial-gradient(at 50% 0%, rgba(255, 255, 255, 0.10) 0%, rgba(0, 0, 0, 0.50) 50%);
	background-blend-mode: soft-light, screen;
}


/**  ///  EVERLASTING SKY  -  Light to Khaki  ///  */
.lightToKhaki {
	background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
}


/**  ///  SHARP GLASS  - Murky White Gray  ///  */
.murkyWhiteGray {
	background: #C9CCD3;
	background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%);
	background-blend-mode: lighten;
}


/**  ///  LOON CREST  -Dark Swirl Gray  */
/**  need to add this line to work:  	
        background-blend-mode: multiply, multiply; */
.darkSwirlGray {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), radial-gradient(at top center, rgba(255, 255, 255, 0.40) 0%, rgba(0, 0, 0, 0.40) 120%) #989898;
}