/*
Theme Name: uncledansbbq2026
Theme URI: https://www.uncledansbbq.com
Author: Internet Imagineering, LLC
Author URI: https://www.iiweb.io
Description: Custom template for Uncle Dan's BBQ
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.0
Text Domain: uncledansbbq
*/

/* CSS LAYERS: https://css-tricks.com/css-cascade-layers/ */

/* Establish CSS Layer priorities, lowest => highest */
@layer reset, theme;

/* Theme styles: colors, fonts, etc. */
@layer theme {
    :root {
    	/* CUSTOM SITE COLORS */
		--ud-brown: #3f0d11;
		--ud-red: #900;
		--ud-black: #000000;
    	--ud-ltgray: #e1e1e1;
    
		/* STANDARD COLORS */
		--beige: #FF9900;
		--red: #459939;
		--dkred: #990000;
		--black: #000000;
		--ltgray: #e1e1e1;
		--midgray: #CCCCCC;
		--gray: #999999;
		--dkgray: #666666;
		--white: #ffffff;
    
        --content-width: 1440px;
    }

    body {
		background-color: #fff;
		margin: 0px 0px; 
		padding: 0px;
		font-family: 'Oswald', trebuchet ms, arial, verdana, sans-serif;
		color: #333;
		font-size: 14px;
	}

	.clear { clear: both;}
	ul {margin: 0; padding: 0;}
	ul li {margin: 0; padding: 0;}

	.imgFull {width: 100%;}
	img.imgFull {width: 100%;}
	
	.photoBorder {border: 20px solid #e1e1e1;}
	
	.lightbox {display: none; padding: 30px;}
	
	.doubleline {width: 100%; border-top: 1px solid #fff; border-bottom: 1px solid #fff; height: 10px; margin: 20px 0;}
	.doublelineDark {width: 60%; max-width: 400px; border-top: 1px solid var(--ud-brown); border-bottom: 1px solid var(--ud-brown); height: 10px; margin: 20px 0;}
	
	.alignCenter {width: 100%; margin: 0 auto;}

	/* iiMenu */
	i.iiMenuIcon {margin: 0 0 0 5px;}
	ul.iiMenu > li:hover i.iiMenuIcon { rotate: 180deg; }

	ul.iiMenu {display: flex; /*justify-content: none;*/ padding: 0 0 0 0px; margin: 10px 0 0 20px; transition: .2s all;}
	ul.iiMenu li {list-style-type: none; margin: 0; padding: 0;}

	ul.iiMenu > li {position: relative; padding: 25px 5px 25px 5px; height: 80px; margin: 0 15px; transition: 0.2s all;}
	ul.iiMenu > li > a {font-size: 1rem; color: var(--white); text-decoration: none; text-transform: uppercase; font-weight: 500; } /* main menu */
	ul.iiMenu > li > a:hover {color: var(--white); text-decoration: none;} /* main menu hover */
	ul.iiMenu > li:hover {border-bottom: 4px solid var(--white); color: var(--white); transition: 0.2s all; transform: translateY(-4px);}
	ul.iiMenu > li:hover > a { color: var(--white);}

	ul.iiMenu > li > ul {position: absolute; background-color: var(--white); margin: 0; padding: 10px 20px; min-width: 240px; top: 70px; border-bottom: 10px solid var(--ec-red); left: 0px; justify-self: start;}
	ul.iiMenu > li > ul > li {justify-self: start; text-align: left;}
	ul.iiMenu ul {visibility: hidden; opacity: 0; transition: opacity 0.5s;}
	ul.iiMenu > li:hover > ul {visibility: visible; opacity: 1;}

	ul.iiMenu > li > ul a { display: block; color: var(--ec-red); padding: 5px 0; margin: 0; font-weight: 500; text-decoration: none; } /* subnav level 1 menu */
	ul.iiMenu > li > ul a:hover {color: var(--ec-black); text-decoration: none;}

	ul.iiMenu > li > ul:before {
		content: '';
		width: 0;
		height: 0;
		border-left: 0px solid transparent;
		border-right: 0px solid transparent;
		border-bottom: 0px solid var(--);
		top: -10px;
		left: 25px;
		position: absolute;
	}

	/* MOBILE SIDENAV */
	.mobileNav {display: none;}

	#sidenav {
		 position: fixed; 
		 /* switch "right" to "left" to switch sides: */
		 left: calc(-100vw - 10px); transition: left 0.5s;
		 top:0; bottom: 0;
		 width: 100vw; max-width: 500px; /* full screen on small screens */
		 z-index: 99999999999; box-shadow: 0 0 10px #0008;
		 background: var(--ud-brown); color: var(--white);
		 font-size:1.2rem;
	 }
	 #sidenav.active { left: 0; } /* switch "right" to "left" */
	 #sidenav-header {margin: 20px 0 0 20px; width: 100px;}
	 #sidenav-header img { display: block; width:100%; }
	 #sidenav ul { 
	     padding: 0; 
             margin:0;
	 }
    
     #sidenav > ul { max-height: calc(100vh - 100px); margin: 30px 0 0 10px; padding-bottom: 150px; overflow: auto; border-top: 1px solid #e1e1e1;}
     #sidenav li { list-style-type: none; margin: 0; padding: 5px 2rem; }
	 #sidenav > ul > li { border-bottom: 1px solid #e1e1e1; }
	 #sidenav a, #sidenav a:visited, #sidenav a.active { color: var(--ud-ltgray); text-decoration: none; }
	 #sidenav-close { 
		 /* reposition within the sidenav as needed */
		 position: absolute; 
		 right: 1rem; top:1rem; 
		 cursor: pointer; 
		 font-size:1.5em;
		 transition: all 0.2s; 
	 }
	 #sidenav-close:hover, #sidenav-close:active { color: white; text-shadow: 2px 2px 8px #0008; transform: translate(-2px, -2px); }
	 #sidenav-footer { position:absolute; bottom:0; left:0; right:0; height: 100px; display: flex; justify-content: center; align-items: center; background: var(--ud-brown); text-align: center; font-size: 1rem; color: var(--white)}
 
	 .sidenav-request {margin: 40px;}

    /* TEXT */
    .text1 {font-size: 1rem; line-height: 1.4rem;}
    .text2 {font-size: 1.2rem; line-height: 1.6rem;}
    
    a.linkRed {color: var(--ud-red); text-decoration: none;}
    a.linkRed:visited {color: var(--ud-red); text-decoration: none;}
    a.linkRed:hover {color: var(--ud-brown); text-decoration: none;}
    
	.textWhite {color: var(--white);}
	.textBlack {color: var(--black);}
	
	/* BACKGROUND COLORS */
	.bgBrown {background-color: var(--ud-brown);}

	/* BUTTONS */
	a.buttonOrder {text-transform: uppercase; color: var(--white); background-color: var(--ud-red); display: block; text-align: center; text-decoration: none; padding: 8px 0; transition: 0.2s all; border-bottom: 4px solid var(--ud-red); font-size: 1rem;}
	a:visited.buttonOrder {text-transform: uppercase; color: var(--white); background-color: var(--ud-red); display: block; text-align: center; text-decoration: none; padding: 8px 0; transition: 0.2s all; border-bottom: 4px solid var(--ud-red);}
	a:hover.buttonOrder {text-transform: uppercase; color: var(--white); background-color: var(--ud-red); display: block; text-align: center; text-decoration: none; padding: 8px 0; transition: 0.2s all; border-bottom: 4px solid var(--ud-black);}
	
	a.buttonCatering {text-transform: uppercase; color: var(--ud-red); background-color: var(--midgray); display: block; text-align: center; text-decoration: none; padding: 8px 0; transition: 0.2s all; border-bottom: 4px solid var(--midgray); font-size: 1rem;}
	a:visited.buttonCatering {text-transform: uppercase; color: var(--ud-red); background-color: var(--midgray); display: block; text-align: center; text-decoration: none; padding: 8px 0; transition: 0.2s all; border-bottom: 4px solid var(--midgray);}
	a:hover.buttonCatering {text-transform: uppercase; color: var(--ud-red); background-color: var(--midgray); display: block; text-align: center; text-decoration: none; padding: 8px 0; transition: 0.2s all; border-bottom: 4px solid var(--ud-black);}
	
	a.buttonWhite1 {font-size: .8rem; border: 2px solid #fff; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: #fff; text-decoration: none; padding: 4px 20px;}
	a:visited.buttonWhite1 {font-size: .8rem; border: 2px solid #fff; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: #fff; text-decoration: none;}
	a:hover.buttonWhite1 {font-size: .8rem; border: 2px solid #fff; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: var(--ud-brown); text-decoration: none; padding: 4px 20px; background-color: #fff; cursor: pointer;}
	
	a.buttonWhite2 {display: block; font-size: .8rem; border: 2px solid #fff; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: #fff; text-decoration: none; padding: 4px 20px; text-align: center;}
	a:visited.buttonWhite2 {display: block; font-size: .8rem; border: 2px solid #fff; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: #fff; text-decoration: none; text-align: center;}
	a:hover.buttonWhite2 {display: block; font-size: .8rem; border: 2px solid #fff; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: var(--ud-brown); text-decoration: none; padding: 4px 20px; background-color: #fff; cursor: pointer; text-align: center;}
	
	a.buttonWhite3 {display: block; font-size: .8rem; border: 2px solid var(--ud-red); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: var(--ud-red); text-decoration: none; padding: 4px 20px; text-align: center;}
	a:visited.buttonWhite3 {display: block; font-size: .8rem; border: 2px solid var(--ud-red); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: var(--ud-red); text-decoration: none; text-align: center;}
	a:hover.buttonWhite3 {display: block; font-size: .8rem; border: 2px solid var(--ud-red); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: var(--white); text-decoration: none; padding: 4px 20px; background-color: var(--ud-red); cursor: pointer; text-align: center;}
	
	/* LINKS */


	/* HEADINGS */
	
	h1.heroTitle {font-size: 4rem; margin: 0; padding: 0; line-height: 4rem; font-weight: 400;}
	h3.heroSubtitle {font-family: 'Merriweather', serif; font-size: 1.6rem; font-style: italic; line-height: 1.6rem; margin: 0 0 14px 0; padding: 0; font-weight: 400;}
	
	h1.pageTitle {font-size: 2.2rem; margin: 0; padding: 0; line-height: 2.2rem; font-weight: 400;}
	h3.pageSubTitle {font-size: 1.4rem; margin: 10px 0 0 0; padding: 0; line-height: 1.4rem; font-family: 'Merriweather', serif; font-style: italic; font-weight: 400;}
	h2.sectionTitle {font-size: 2rem; margin: 0; padding: 0; line-height: .8rem; font-style: italic; font-weight: 400; font-family: 'Merriweather', serif;}
	h4.areaTitle {font-size: 1.6rem; margin: 0; padding: 0; line-height: .8rem; text-transform: uppercase;}
	
	h3.featureTitle {font-family: 'Merriweather', serif; font-style: italic; font-size: 1.2rem; color: var(--ud-brown); margin: 0; padding: 0; font-weight: 400;}
	h3.postTitle {font-family: 'Merriweather', serif; font-style: italic; font-size: 1.6rem; color: var(--ud-brown); margin: 0; padding: 0; font-weight: 400;}

	/* HEADER */
	.header-wrapper {z-index: 999; width: 100%;}
	.header-container {position: fixed; display: grid; width: 100%; grid-template-columns: 150px auto auto; z-index: 999; transition: .2s all;}
	
	.content-header-wrapper {z-index: 999; width: 100%; height: 400px; position: relative;}
	.content-header-container {position: fixed; display: grid; width: 100%; grid-template-columns: 150px auto auto; background-color: #0009; height: 110px; transition: .2s all; z-index: 999;}
	
	.header-logo {width: 100%; margin: 10px 0 0 20px; transition: .2s all;}
	.header-logo img {width: 100%; transition: .2s all;}
	
	.pageTitle-container {position: absolute; margin: 200px 0 0 5%;}
	.sectionpic-title {position: absolute; bottom: 20px; right: 20px; color: var(--white); font-size: 1.8rem; font-weight: 600; text-transform: uppercase;}
	
	.topnav-title {font-size: 1rem; font-weight: 700;}
	.topnav-subtitle {font-size: .8rem; font-weight: 400; color: var(--ud-ltgray);}
	
	.header-right {text-align: right; justify-self: end;}
	.header-right-container {display: grid; grid-template-columns: auto 120px 120px; align-items: center; transition: .2s all;}
	.header-links {font-size: 1rem; transition: .2s all;}
	.header-links a {color: var(--white); text-decoration: none; margin: 0 10px;}
	.header-links a:visited {color: var(--white); text-decoration: none;}
	.header-links a:hover {color: var(--white); text-decoration: underline;}
	
	/* SCROLLED */
	.scrolled .content-header-container {background-color: #000; grid-template-columns: 100px auto auto; height: 92px; transition: .2s all;}
	.scrolled .header-logo {background-color: var(--ud-brown); margin: 0; transition: .2s all;}
	.scrolled ul.iiMenu {margin: 0; transition: .2s all;}
	.scrolled .header-links {display: none; transition: .2s all;}
	.scrolled .header-right-container {grid-template-columns: 120px 120px; justify-self: end; transition: .2s all; padding: 25px 0 0 0; width: 100%;}
	
	.scrolled .header-container {background-color: #000; grid-template-columns: 100px auto auto; height: 92px; transition: .2s all;}
	
	/* FRONT PAGE */
	.fp-hero-wrapper {width: 100%; aspect-ratio: 16 / 9; background: var(--ud-ltgray) url('images/hero-slider-1.jpg') no-repeat top; background-size: contain; position: relative; z-index: 555;}
	.videooverlay {width: 100%; position: absolute; inset: 0; background: linear-gradient(to right, black, transparent); z-index: 777;}
	.videoloop {z-index: 666;}
	.fp-hero-CTA {width: 50%; position: absolute; top: 45%; left: 32%; transform: translate(-50%, -50%); z-index: 888;}
    .heroText {font-size: 1.2rem; }
    .heroText2 {display: none;}
    
    .fp-features {width: 600px; position: absolute; bottom: 120px; left: 60px; display: grid; grid-template-columns: 1fr 1fr; z-index: 888;}
    .fp-feature-holder {display: grid; grid-template-columns: 65px auto; grid-column-gap: 20px; align-items: center;}
    .fp-feature-Icon {font-size: 3.4rem;}
    .fp-feature-Title {font-size: 1.2rem;}
	
	.fp-sect2-wrapper {position: relative; width: 100%; margin-top: -120px; z-index: 777;}
	.fp-sect2-top {width: 100%; height: 190px; min-height: 190px; background: transparent url('images/fp-sect2-top.png') no-repeat left; }
	.fp-sect2-middle {width: 100%; min-height: 320px; background: transparent url('images/fp-sect2-middle.jpg') repeat-y left; height: 320px;}
	.fp-sect2-bottom {width: 100%; height: 199px; min-height: 199px; background: transparent url('images/fp-sect2-bottom.png') no-repeat left; }
	.fp-sect2-container {display: grid; grid-template-columns: auto 440px; width: 90%; margin: 0 auto; grid-column-gap: 100px; padding: 20px 0 0 0;}
	.fp-sect2-content {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 30px;}
	.fp-sect2-photo {width: 100%;}
	.fp-sect2-photo img {width: 100%; border: 20px solid #FFFA;}
	.fp-sect2-logo {text-align: center;}
	.fp-sect2-logo img {width: 50%; margin: 0 auto;}
	.fp-sect2-slogan {font-style: italic; font-size: 1rem; color: var(--white); text-align: center; font-family: 'Merriweather', serif; margin: 10px 0;}
	.fp-sect2-desc {color: var(--ltgray); font-weight: 1rem; text-align: center;}
	.fp-sect2-button {margin: 20px 0 0 0;}
	
	.fp-sect3-wrapper {width: 100%; background: #e1e1e1 url('images/fp-sect3-bg.jpg') no-repeat bottom; padding: 0 0 80px 0;}
	.fp-sect3-quote {color: var(--ud-brown); font-family: 'Merriweather', serif; font-size: 1.6rem; line-height: 2.2rem; font-style: italic; width: 60%; margin: 0 auto; text-align: center; font-weight: 400; padding: 60px 0 0 0;}
	.fp-sect3-content {display: grid; grid-template-columns: 1fr 1fr; width: 80%; margin: 0 auto; grid-column-gap: 60px; font-size: 1.2rem; font-weight: 400;}
	.fp-sect3-features {display: grid; width: 90%; margin: 80px auto 0 auto; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 50px;}
	
	.fp-ticker-wrapper {background-color: var(--ud-brown); padding: 20px 0; margin: 30px 0;}
	.tickerContainer {width: 80%; max-width: 1600px; margin: 0 auto;}
	
	.fp-newsevents-wrapper {width: 90%; margin: 80px auto;}
	.fp-newsevents-container {display: grid; grid-template-columns: auto 400px; grid-column-gap: 60px; margin: 50px auto;}
	
	/* LAYOUT */
	.pageWrapper {width: 80%; padding: 100px 0 100px 0; margin: 0 auto;}
	.featureHolder {background-color: #fff; padding: 10px 20px 20px 20px; min-height: 160px; clip-path: polygon(0% 0%, calc(100% - 30px) 0%, 100% 30px, 100% 100%, 0% 100%); border-bottom: 20px solid var(--ud-brown); position: relative; transition: .2s all;}
	
	.featureHolder2 {background-color: #fff; padding: 20px 20px; min-height: 160px; border: 1px solid var(--ud-ltgray); border-bottom: 20px solid var(--ud-brown); position: relative; transition: .2s all; margin: 0 0 40px 0;}
	
	a.featureHolderLink {text-decoration: none; color: var(--ud-brown);}
	a.featureHolderLink:visited {text-decoration: none; color: var(--ud-brown);}
	
	.featureDesc {margin: 20px 0; font-size: 1rem;}
	.featureLink {font-size: 1.2rem; color: var(--ud-red);}
	.featureChevron {position: absolute; bottom: 20px; right: 20px; font-size: 1.2rem;}
	.featureIcon {font-size: 2rem; margin: 0 0 10px 0;}
	
	.titleHolder-Grid {display: grid; grid-template-columns: auto max-content; align-items: center; margin: 0 0 40px 0;}
	.titleHolder-Buttons {justify-self: end; display: grid; grid-template-columns: 180px 180px; grid-column-gap: 20px;}
	
	.newsTitle-Holder {display: grid; grid-template-columns: 100px auto; grid-column-gap: 40px; align-items:center;}
	.postIcon {background-color: var(--ud-brown); color: var(--white); font-size: 3rem; text-align: center; padding: 10px 0;}
	.postDate {font-size: 1.2rem; font-weight: 600; color: var(--ud-red);}
	

	/* CONTENT PAGE CUSTOM STYLES */
	.content {font-size: 1.2rem; line-height: 1.8rem; font-weight: 400;}
	
	.content h1 {font-weight: 2.2rem; font-weight: 400; color: var(--ud-red); margin: 0 0 40px 0;}
	.content h2 {font-size: 1.8rem; font-family: 'Merriweather', serif; font-style: italic; color: var(--ud-brown); font-weight: 400; margin: 0px 0; line-height: 2.2rem;}
	
	.grid-1-1 {display: grid; grid-template-columns: 1fr 1fr; margin: 50px 0;}
	
	.gridGap1 {grid-column-gap: 80px;}
	
	.gridAlignCenter {align-items: center;}
	
	.gridImage {width: 100%; }
	
	/* FOOTER */
	.footerLocations {width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 30px; margin: 0 0 30px 0;}
	.footerLocation-holder {padding: 80px 80px;}
	.footerLocations-grid {margin: 40px 0 0 0; display: grid; grid-template-columns: 160px auto; grid-column-gap: 20px;}
	
	.footerWrapper {width: 100%; padding: 30px 80px; display: grid; grid-template-columns: 1fr 2fr; align-items: center; background-color: var(--black);}
	.copyright {font-size: 1rem; font-weight: 400;}
	.footerLogos {display: grid; grid-template-columns: repeat(4,max-content); justify-self: end; grid-column-gap: 20px;}
	
	/* MENU PAGE */
	.uncle-dans-menu { margin: 60px auto;}
	.menu-tag {font-style:italic;font-size:24px;color:#8b6a4a;margin-bottom:0px;}
	.menu-intro {color: var(--ud-brown); margin: 0 0 30px 0;}
	.menu-section {margin-bottom: 80px;}
	.menu-section h2 {font-family: 'Merriweather', serif; font-style: italic; font-size: 2rem; color: var(--ud-red);}
	.menu-section > p {max-width: 900px; color: #666;line-height: 1.7;}
	.menu-section {display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:18px 60px;}
	.menu-section > h2,.menu-section > p,.menu-section > .menu-note {grid-column:1 / -1;}
	.menu-item {padding-bottom:18px;border-bottom:1px solid #ececec;}
	.menu-item h3 {margin:0 0 6px; font-size:22px; color:#222;}
	.menu-item p {margin:0;color:#666;line-height:1.6}
	.menu-note {font-size:.85rem;color:#9d3a2d;font-weight:600;margin-bottom:0px;}
	.menu-divider {border:0; height:1px; background:red; margin:18px 18px;}
	.drink-list{ display:flex;flex-wrap:wrap;gap:14px;}
	.drink-list span{padding:8px 18px;border:1px solid #ddd;border-radius:00px;font-weight:600;color:#333;}
	.new-item{color:#9d3a2d;font-style:italic;font-weight:700;margin-right:4px;}
	.menu-tour {background:;border:0px solid #9d3a2d; padding:18px;}
	.signature-dish {color:#9d3a2d;font-style:italic;font-weight:700;margin-right:4px;}	
	
	
	
	/* TICKER */
	/* Container hides the text that overflows outside the screen box */
	.ticker-wrapper {width: 100%; overflow: hidden; padding: 0px 0;}

	/* Flex track wraps both pieces of text and keeps them on one continuous line */
	.ticker-track {display: flex; width: max-content; white-space: nowrap; animation: scroll-left 25s linear infinite;}

	/* Ensures each item stays explicitly structured */
	.ticker-item {font-size: 2rem; text-transform: uppercase; font-weight: 500;}

	/* Optional: Pauses animation on hover */
	.ticker-track:hover {animation-play-state: paused;}

	/* Keyframe pushes the track precisely half its full horizontal width */
	@keyframes scroll-left {
		0% {transform: translateX(0);}
  		100% {transform: translateX(-50%);}
	}

	/* Accessibility: Disables motion if preferred by the user's OS settings */
	@media (prefers-reduced-motion: reduce) {
  		.ticker-track {animation: none; white-space: normal;}
	}

    
    @media only screen and (max-width: 1440px) {
		ul.iiMenu > li {margin: 0 10px;}
		.content-header-container {position: fixed; display: grid; width: 100%; grid-template-columns: 120px auto auto; background-color: #0009; height: 110px; transition: .2s all; z-index: 999;}
		.header-right-container {display: grid; grid-template-columns: auto 80px 80px; align-items: center; transition: .2s all;}
		a.buttonOrder {text-transform: uppercase; color: var(--white); background-color: var(--ud-red); display: block; text-align: center; text-decoration: none; padding: 8px 0; transition: 0.2s all; border-bottom: 4px solid var(--ud-red); font-size: .8rem;}
		a.buttonCatering {text-transform: uppercase; color: var(--ud-red); background-color: var(--midgray); display: block; text-align: center; text-decoration: none; padding: 8px 0; transition: 0.2s all; border-bottom: 4px solid var(--midgray); font-size: .8rem;}
		
		.sectionpic-title {position: absolute; bottom: 20px; right: 20px; color: var(--white); font-size: 1.4rem; font-weight: 600; text-transform: uppercase;}
		
		.footerLocation-holder {padding: 50px;}
		.footerWrapper {padding: 30px 50px;}
		
		h2.sectionTitle {font-size: 1.6rem; margin: 0; padding: 0; line-height: .8rem; font-style: italic; font-weight: 400; font-family: 'Merriweather', serif;}
		
		img.footerlogo {height: 60px;}
		
		h1.heroTitle {font-size: 3rem; margin: 0; padding: 0; line-height: 3rem; font-weight: 400;}
		h3.heroSubtitle {font-family: 'Merriweather', serif; font-size: 1.4rem; font-style: italic; line-height: 1.6rem; margin: 0 0 14px 0; padding: 0; font-weight: 400;}
		
		.fp-sect2-container {display: grid; grid-template-columns: auto 380px; width: 90%; margin: 0 auto; grid-column-gap: 60px; padding: 20px 0 0 0;}
		.fp-sect2-content {margin: 40px 0 0 0;}
		
		h3.postTitle {font-family: 'Merriweather', serif; font-style: italic; font-size: 1.2rem; color: var(--ud-brown); margin: 0; padding: 0; font-weight: 400; line-height: 1.8rem;}
		.postDate {font-size: 1rem; font-weight: 600; color: var(--ud-red);}
		
		.fp-feature-Icon {font-size: 3.2rem;}
   		.fp-feature-Title {font-size: 1rem;}
   		
   		
		
	}

	@media only screen and (max-width: 1199px) {
		.header-topnav {display: none;}
		.content-header-container {grid-template-columns: 120px auto auto; height: 80px;}
		
		.mobileNav {display: block; margin: 14px 0 0 40px;}
		.scrolled .mobileNav {margin: 18px 0 0 20px;}
		
		.pageTitle-container {position: absolute; margin: 180px 0 0 5%;}
		
		.header-container {position: fixed; display: grid; width: 100%; grid-template-columns: 120px auto auto; z-index: 999; transition: .2s all;}
		
		h1.heroTitle {font-size: 2.2rem; margin: 0; padding: 0; line-height: 3rem; font-weight: 400;}
		h3.heroSubtitle {font-family: 'Merriweather', serif; font-size: 1.2rem; font-style: italic; line-height: 1.6rem; margin: 0 0 5px 0; padding: 0; font-weight: 400;}
		.heroText {font-size: 1rem; }
		.fp-features {margin: 80px 0 0 0;}
		
		.fp-sect2-container {display: grid; grid-template-columns: auto 340px; width: 94%; margin: 0 auto; grid-column-gap: 40px; padding: 20px 0 0 0;}
		.fp-sect2-content {margin: 40px 0 0 0;}
		.fp-sect2-photo img {width: 100%; border: 10px solid #FFFA;}
		
		.fp-sect3-quote {width: 80%;}
		.fp-sect3-content {display: grid; grid-template-columns: 1fr; width: 90%; margin: 0 auto; grid-column-gap: 0px; grid-row-gap: 50px; font-size: 1.2rem; font-weight: 400;}
		.fp-sect3-features {display: grid; width: 90%; margin: 80px auto 0 auto; grid-template-columns: 1fr 1fr; grid-column-gap: 50px; grid-row-gap: 50px;}

	}

	@media only screen and (max-width: 1023px) {
	
		.content-header-wrapper {height: 250px;}
		.pageTitle-container {display: none;}
		
		.content-header-wrapper {background-position: left bottom !important;}
		.sectionpic-title {font-size: 1rem; font-weight: 400; color: var(--ud-red); bottom: -40px;}
		
		.header-links {display: none;}
		.header-right-container {grid-template-columns: 120px 120px; justify-self: end; transition: .2s all; padding: 20px 0 0 0;}
		
		.footerLocations {width: 100%; display: grid; grid-template-columns: 1fr; grid-column-gap: 0px; grid-row-gap: 30px; margin: 0 0 30px 0;}
		
		.footerWrapper {grid-template-columns: 150px auto;}
		.copyright {font-size: .8rem;}
		img.footerlogo {height: 40px;}
		
		.pageWrapper {width: 90%;}
		
		.fp-features {display: none;}
		
		.heroText {width: 100%;}
		.fp-sect2-wrapper {position: relative; width: 100%; margin-top: -50px; z-index: 777;}
		.fp-sect2-top {width: 100%; height: 190px; min-height: 190px; background: transparent url('images/fp-sect2-top.png') no-repeat right; }
		
		.fp-sect2-container {display: grid; grid-template-columns: 1fr; width: 80%; margin: 0 auto; grid-column-gap: 0px; padding: 20px 0 0 0;}
		.fp-sect2-photo {display: none;}
		
		.fp-sect2-content {margin: 0px 0 0 0;}
		
		.fp-hero-CTA {width: 80%; position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%);}
		
		.fp-sect3-features {display: grid; width: 90%; margin: 80px auto 0 auto; grid-template-columns: 1fr; grid-column-gap: 0px; grid-row-gap: 50px;}
		
		.fp-newsevents-container {display: grid; grid-template-columns: 1fr; grid-column-gap: 0px; grid-row-gap: 50px; margin: 50px auto;}
		.fp-meta {display: none !important;}
	
		@media only screen and (max-width: 1023px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
	
	
		}

	}

	@media only screen and (max-width: 767px) {
	
	.content-header-wrapper {height: 200px;}
	.content-header-container {grid-template-columns: 100px auto auto; height: 80px;}
	.header-logo {margin: 10px 0 0 5px;}
	.header-right {justify-self: end;}
	
	.scrolled .header-container {background-color: #000; grid-template-columns: 80px auto auto; height: 55px; transition: .2s all;}
	.scrolled .content-header-container {background-color: #000; grid-template-columns: 80px auto auto; height: 55px; transition: .2s all;}
	
	.content {font-size: 1rem; line-height: 1.4rem; font-weight: 400;}
	.content h1 {font-weight: 1.8rem; font-weight: 400; color: var(--ud-red); margin: 0 0 40px 0; line-height: 2.2rem;}
	.content h2 {font-size: 1.4rem; font-family: 'Merriweather', serif; font-style: italic; color: var(--ud-brown); font-weight: 400; margin: 40px 0; line-height: 1.8rem;}
	
	.header-right-container {grid-template-columns: 90px 90px; justify-self: end; transition: .2s all; padding: 20px 0 0 0;}
	.scrolled .header-right-container {grid-template-columns: 85px 85px; justify-self: end; transition: .2s all; padding: 10px 0 0 0;}
	
	.menu-section{ grid-template-columns:1fr; gap:20px;}
	.menu-section h2 {font-size:34px;}
	.menu-extra-grid {grid-template-columns: 1fr;gap: 0;}
	.menu-extra-wide {grid-column: auto;}

	.mobileNav {margin: 28px 0 0 16px;}	
	.mobileNavDesc {display: none;}
	
	.footerLocations-grid {grid-template-columns: 1fr; grid-column-gap: 0px; grid-row-gap: 30px;}
	.footerWrapper {grid-template-columns: 1fr; grid-column-gap: 0px; grid-row-gap: 30px; padding: 30px 0; text-align: center;}
	.footerLogos {text-align: center; margin: 0 auto;}
	.footerLocation-holder {padding: 50px 5%;}
	h2.sectionTitle {font-size: 1.4rem; margin: 0; padding: 0; line-height: 1.8rem; font-style: italic; font-weight: 400; font-family: 'Merriweather', serif;}
	
	.fp-sect2-wrapper {position: relative; width: 100%; margin-top: 10px; z-index: 777;}
	.fp-sect2-top {display:none;}
	.fp-sect2-content {grid-template-columns: 1fr; grid-row-gap: 40px;}
	.fp-sect2-bottom {display: none;}
	.fp-sect2-middle {width: 100%; min-height: 320px; background: transparent url('images/fp-sect2-middle.jpg') repeat-y left; height: auto; padding: 40px 0;}
	.heroText {display: none;}
	.fp-hero-CTA > .doubleline {display: none;}
	.fp-sect2-logo img {max-width: 140px;}
	.heroText2 {display: block; width: 90%; text-align: center; font-size: 1.2rem; line-height: 1.6rem; margin: 0 auto 50px auto;}
	
	.fp-hero-CTA {display:none;}
	
	.titleHolder-Grid {grid-template-columns: 1fr; grid-column-gap: 0; grid-row-gap: 30px;}
	.titleHolder-Buttons {width: 100%; grid-template-columns: 1fr 1fr;}
	
	.grid-1-1 {display: grid; grid-template-columns: 1fr; margin: 50px 0; grid-row-gap: 40px;}
	.gridGap1 {grid-column-gap: 0;}
	.gridPhoto {order: 0;}
	.gridContent {order: 1;}
	
	}

	@media only screen and (max-width: 480px) {
	
	
	}
    
}

/* A CSS Reset */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    * {margin: 0; }
    @media (prefers-reduced-motion: no-preference) {
        html { interpolate-size: allow-keywords; }
    }
    body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
    img, picture, video, canvas, svg { display: block; max-width: 100%;  }
    input, button, textarea, select { font: inherit; }
    p, h1, h2, h3, h4, h5, h6 { }
    p { text-wrap: pretty; margin: 20px 0 0 0;}
    h1, h2, h3, h4, h5, h6 { }
    #root, #__next { isolation: isolate; }
}