@import "globlets.css";
/*
*
*
*
  ABOVE THE FOLD
*
*
*
*/
.body {
	display: flex;
	flex-direction: column;
	width: 100%;
}
header nav.bg-dark {
	background-color: rgba(var(--bs-dark-rgb),.7) !important;
}
h1, h2, h3, h4, h5 {
  font-family: var(--loveloBlk);
}
.introHeader {
	width: 100%;
	height: auto;
	aspect-ratio: 2/2.75;
	display: flex;
  align-items: end;
  justify-content: center;
  position: relative;
  background-color: #1b2835;
  overflow: hidden;
}
.introHeaderTreesBgrnd {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url("../images/keyImage/trees-600pxW.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	opacity: 0;
	animation: treesFadeIn 1.25s ease-in .5s forwards;
}
.introHeaderBgrnd {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	animation: skyFadeIn 2.25s ease-in .875s forwards;
}
.introHeaderBgrnd::before {
	content: '';
	position: absolute;
	top: -50px;
	left: -50px;
	width: 120%;
	height: 120%;
	background-image: url("../images/keyImage/lake-stars-600pxW-Aspect-2-3.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	animation: backgroundRotate 20s ease-in forwards;
}
@keyframes backgroundRotate
{
	0% {
		transform: rotateZ(0deg) scale(1);
	}
	100% {
		transform: rotateZ(8deg) scale(1.125);
	}
}
/***
 * *
 * STARS
 * *
 * */

section.starWrap{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .865;
}


section.starWrap span{
    position: absolute;
    top:50%;
    left:50%;
    width: 15px;
    height: 4px;
    background: #a8d1f9e3;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.1),0 0 0 8px rgba(255,255,255,0.1),0 0 20px rgba(255,255,255,0.1);
    opacity: 0;
    animation: animate 20s linear infinite;
}
section.starWrap span::before{
    content:'';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 900px;
    height: 1px;
    background: linear-gradient(90deg,#fff,transparent);
}
@keyframes animate
{
    0%
    {
        transform: rotate(315deg) translateX(0);
        opacity: 0;
    }
    10%
    {
    	opacity: .65;
    }
    80%
    {
        opacity: 0;
    }
    90%
    {
    	transform: rotate(315deg) translateX(-1500px);
    }
}
section.starWrap span:nth-child(1){
    top: 0;
    right: 90px;
    left: 45%;
    animation-delay: 6.5s;
    animation-duration: 12s;
}
section.starWrap span:nth-child(2){
    top: 0;
    right: 80px;
    left: 70%;
    animation-delay: 4s;
    animation-duration: 11s;
}
section.starWrap span:nth-child(3){
    top: 80;
    right: 0px;
    left: initial;
    animation-delay: 6s;
    animation-duration: 9s;
}
section.starWrap span:nth-child(4){
    top: 0;
    right: 180px;
    left: 60%;
    animation-delay: 7.5s;
    animation-duration: 9s;
}
/*section.starWrap span:nth-child(5){
    top: 0;
    right: 400px;
    left: initial;
    animation-delay: 0.8s;
    animation-duration: 5.5s;
}
section.starWrap span:nth-child(6){
    top: 0;
    right: 600px;
    left: initial;
    animation-delay: 1s;
    animation-duration: 3s;
}
section.starWrap span:nth-child(7){
    top: 300px;
    right: 0px;
    left: initial;
    animation-delay: 1.2s;
    animation-duration: 1.75s;
}
section.starWrap span:nth-child(8){
    top: 0px;
    right: 700px;
    left: initial;
    animation-delay: 1.4s;
    animation-duration: 1.25s;
}
section.starWrap span:nth-child(9){
    top: 0px;
    right: 1000px;
    left: initial;
    animation-delay: 0.75s;
    animation-duration: 2.25s;
}
section.starWrap span:nth-child(9){
    top: 0px;
    right: 450px;
    left: initial;
    animation-delay: 2.75s;
    animation-duration: 2.75s;
} */
/**
 * END STARS
 * 
 * */
.lofwDude {
	background-image: url("../images/keyImage/dude-700pxH.webp");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: contain;
	display: inline-block;
	position: absolute;
	width: 80%;
	height: 104%;
	top: 80px;
	left: -80px;
	opacity: 0;
	animation: gazerFadeIn 1.5s ease-in 1.75s forwards;
}
.lofwLogo {
	width: 80%;
	height: auto;
	margin: auto 0;
	padding-top: 15px;
	opacity: 0;
	position: relative;
	top: -30px;
	z-index: 1;
	transform: scale(1.125);
	animation: emblemFadeIn 3s ease-in 2s forwards, emblemScale 3.25s ease-in 2s forwards, emblemBlur 3.25s ease-in 2s forwards;
}
.lofwLogo img {
	width: 100%;
	height: auto;
	/* filter: drop-shadow(10px 10px 20px transparent), blur(15px);
	animation: emblemDropShadow 3.25s ease-in 2s forwards; */
}
/* .lofwWoman {
	width: 70%;
	height: 57%;
	background-image: url("../images/keyImage/woman-650pxH.webp");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: contain;
	display: inline-block;
	position: absolute;
	right: -85px;
	opacity: 0;
	animation: gazerFadeIn 1.5s ease-in 2s forwards;
} */
.lofwWoman {
	width: 80%;
	height: 65%;
	background-image: url("../images/keyImage/woman-650pxH.webp");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: contain;
	display: inline-block;
	position: absolute;
	right: -90px;
	opacity: 0;
	animation: gazerFadeIn 1.5s ease-in 2s forwards;
}
.introHeader .fog {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  animation: fogFadeIn 2.25s ease-in 2.25s forwards;
}
.introHeader .fog img {
  position: absolute;
  bottom: 0;
  max-width: 100%;
  opacity: 0;
  transform-origin: bottom;
  animation: fog_effect calc(3s * var(--i)) ease-in .75s infinite;
}
@keyframes treesFadeIn {
	2% {
	    opacity: 0;
	  }
	100% {
		opacity: 1;
	}
}
@keyframes skyFadeIn {
	2% {
	    opacity: 0;
	  }
	100% {
		opacity: .85;
	}
}
@keyframes gazerFadeIn {
	1% {
	    opacity: 0;
	  }
	100% {
		opacity: 1;
	}
}
@keyframes emblemFadeIn {
	0% {
	    opacity: 0;
	  }
	100% {
		opacity: 1;
	}
}
@keyframes emblemDropShadow {
	0% {
	    filter: drop-shadow(10px 10px 30px transparent);
	  }
	80% {
		filter: drop-shadow(0 0 10px blue);
	}
	100% {
		filter: drop-shadow(0 0 8px #0f1929f2);
	}
}
@keyframes emblemScale {
	0% {
		transform: scale(1.125);
	}
	85% {
		transform: scale(1);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes emblemBlur {
	0% {
	    filter: blur(15px);
	  }
	80% {
		filter: blur(7px);
	}
	100% {
		filter: blur(0);
	}
}
@keyframes fogFadeIn {
	0% {
	    opacity: 0;
	  }
	100% {
		opacity: .35;
	}
}
@keyframes fog_effect {
  0% {
    opacity: 0;
    transform: scale(1.75);
  }
  25%,
  75% {
    opacity: .85;
  }
  100% {
    transform: scale(5);
    opacity: 0;
  }
}

.pageIntro {
	width:100%;
	padding: 35px 15px;
	position: relative;
}
.pageIntro:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -150px;
  left: 0;
  background-image: linear-gradient(to bottom, rgba(23, 37, 52, 0), rgba(23, 37, 52, 1) 95%);
  width: 100%;
  height: 150px;
}
.pageIntro .introWrap {
	color: var(--whiteSmoke)!important;
	width: 100%;
	position: relative;
	margin: 0 auto;
}
.pageIntro .introWrap p:not(.heavy) {
	font-family: var(--esprit);
}

.tixOnSaleWrap {
	position: relative;
	max-width: 66%;
	margin: 32px auto 0;
	text-align: center;
}
.tixOnSaleWrap a {
	display: inline-block;
}
.tixOnSaleWrap a.ticketLink {
	margin-bottom: 24px;
}
.tixOnSaleWrap img.ticketAnnounce {
	width: 100%;
	transition: filter .5s ease-in-out;
}
.tixOnSaleWrap img.ticketAnnounce:hover {
	filter: drop-shadow(2px 2px 6px #4f66df);
}


/*
*
*
  UTILITES
*
*
*/
.heavy {
  font-family: var(--loveloBlk);
  font-weight: normal;
}
.bold {
	font-weight: bold;
}
.whitesmoke {
  color: var(--whiteSmoke);
}
.highlightTextClr {
	color: var(--highlightTextClr);
}
.esprit {
	font-family: var(--esprit);
}
.utl_strong {
  font-weight: bold;
}
.utl_d-none {
  display: none;
}
.utl_mb-1 {
  margin-bottom: .25rem;
}
.utl_mb-2 {
  margin-bottom: 1rem;
}
.utl_ms-auto {
  margin-left: auto;
}
.utl_me-auto {
  margin-right: auto;
}
.utl-txt-center {
	text-align: center;
}
.slateBlueGrayBG {
	background-color: var(--slateBlueGray);
}

/*
*
*
Buttons
*
*
*/

.btn-addToCart {
  font-size: 16px;
  font-family: var(--loveloBlk);
  color: whitesmoke;
  padding: 6px 12px;
  background-color: #739157;
}
.btn {
	font-size: 16px;
  font-family: var(--loveloBlk);
  color: whitesmoke;
  padding: 8px 12px 6px;
  text-shadow: unset;
}
.btn.disabled {
	background-color: var(--bodyTextClr);
  border-color: background-color: var(--bodyTextClr);
}
.btn-lrg {
	font-size: 18px;
}
.btn-primary {
	background-color: var(--lofwCrimson);
  border: 1px solid transparent;
  border-radius: 0;
  transition: all .3s;
}
.btn-primary.btn-outline {
	padding: 12px 32px 10px;
	outline-offset: -6px;
	outline: 1px solid var(--jewelGoldDrk);
}
.btn-primary:hover {
  background-color: var(--jewelGoldDrk);
  border: 1px solid var(--whiteSmoke);
}
.btn-primary.btn-outline:hover {
	outline: 1px solid var(--whiteSmoke);
	border: 1px solid transparent;
}
a.globletBtn-Crimson {
  text-decoration: none;
}
.globletBtn-Crimson {
  font-family: var(--loveloBlk);
  font-size: 1rem;
  color: var(--whiteSmoke);
  display: inline-block;
  background-color: var(--lofwCrimson);
  outline: none;
  border: none;
  border-radius: 26px;
  padding: 16px 20px 11px;
  box-shadow: inset 1px 2px 8px rgb(251, 132, 250), inset -2px -5px 2px rgba(98, 5, 97, 0.5), inset 0 0 15px #e5191900, 3px 3px 6px rgba(0, 0, 0, 0.25), 3px 2px 8px rgba(0, 0, 0, 0.025);
  transition: 0.4s ease-in-out;
}
.globletBtn-Crimson:hover {
  color: var(--whiteSmoke);
  box-shadow: inset 1px 2px 8px rgb(251, 132, 250), inset -2px -5px 2px rgba(98, 5, 97, 0.5), inset 0 0 15px #e51919, 5px 5px 8px rgba(0, 0, 0, 0.40), 5px 4px 10px rgba(0, 0, 0, 0.025);
}




/*
*
*
  ATF MD BreakPoint
*
*
*/

@media (min-width: 768px) {
	.introHeader {
		aspect-ratio: 1/1;
	}
	.lofwDude {
		top: unset;
		bottom: 0;
		height: 70%;
		left: -150px;
	}
	.lofwLogo {
  	width: 60%;
  	padding-top: 0;
  	z-index: 1;
	}
	.lofwWoman {
		width: 60%;
  	height: 55%;
  	right: -106;
	}
	.pageIntro .introWrap {
		width: 500px;
	}
}







/*
*
*
  ATF LG BreakPoint
*
*
*/

@media (min-width: 992px) {

/*** Header Animation Items ***/
.introHeader {
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
	display: flex;
  align-items: end;
  position: relative;
  background-color: #1b2835;
}
.introHeaderTreesBgrnd {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url("../images/keyImage/trees-3000pxW.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	opacity: 0;
	animation: treesFadeIn 1.25s ease-in .5s forwards;
}
.introHeaderBgrnd {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	animation: skyFadeIn 2.25s ease-in .875s forwards;
}
.introHeaderBgrnd::before {
	background-image: url("../images/keyImage/lake-stars-3000pxW-Aspect-16--6.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.lofwDude {
	width: 600px;
	height: 95%;
	position: relative;
	opacity: 0;
	animation: gazerFadeIn 1.5s ease-in 1.75s forwards;

	top: unset;
	left: 80px;
}
.lofwLogo {
	width: 90%;
	height: auto;
	z-index: 500;
	margin: auto 0;
	padding-top: 60px;
	opacity: 0;
	transform: scale(1.125);
	filter: drop-shadow(10px 10px 20px transparent), blur(15px);
	animation: emblemFadeIn 3s ease-in 2s forwards, emblemDropShadow 3.25s ease-in 2s forwards, emblemScale 3.25s ease-in 2s forwards, emblemBlur 3.25s ease-in 2s forwards;
}
.lofwLogo img {
	width: 100%;
	height: auto;
}
.lofwWoman {
	width: 600px;
	height: 85%;
	background-image: url("../images/keyImage/woman-650pxH.webp");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: contain;
	display: inline-block;
	position: relative;
	opacity: 0;
	animation: gazerFadeIn 1.5s ease-in 2s forwards;

	right: 80px;
}
@keyframes fog_effect {
  0% {
    opacity: 0;
    transform: scale(.75);
  }
  25%,
  75% {
    opacity: .85;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}


/*** END Header Animation Items ***/
	.pageIntro {
		padding: 60px 0;
	}
	.pageIntro .introWrap {
		width: 750px;
	}

/*
*
*
  UTILITES
*
*
*/
  .utl_d-xl-none {
    display: none;
  }
  .utl_d-xl-block {
    display: block;
  }
} /** End 992px W **/

@media (min-width: 992px) and (max-width: 1199px) and (orientation: landscape) {
	.lofwDude {
		left: 50px;
	}
}





/*
*
*
  ATF XL BreakPoint
*
*
*/

@media (min-width: 1200px) {
	.introHeader {
		aspect-ratio: 16/6;
		justify-content: center;
	}
	.introHeaderBgrnd::before {
		background-size: 100%;
	}
	.lofwLogo {
		width: 30%;
		height: auto;
	}
	.lofwLogo img {

	}
	.tixOnSaleWrap {
		max-width: 250px;
	}
}





/*
*
*
  ATF XXL BreakPoint
*
*
*/

@media (min-width: 1440px) {
	.lofwDude {
		height: 90%;
	}
	.lofwLogo {
		width: 33%;
		padding-top: 75px;
	}
	.pageIntro .introWrap {
		width: 800px;
	}
}






/*
*
*
*
  *** END ABOVE THE FOLD ***
*
*
*
*/



/*
*
*
  UTILITIES
*
*
*/

.jewelGoldDrk-BG {
	background-color: var(--jewelGoldDrk);
}
.grapeLeafGreen-BG {
	background-color: var(--grapeLeafGreen);
}




/*
*
*
  Featured Vintner / Brewer
*
*
*/
.featuredVintnerWrap {
	width: 100%;
	padding: 32px 16px;
	border-top: 5px solid var(--grapeLeafGreen);
	border-bottom: 5px solid var(--grapeLeafGreen);
	background-image: url('../images/pineRidge-mobileFeatureImg-600pxW.jpg');
	background-position: right top;
	background-repeat: no-repeat;
	background-size: 80% 100%;
	position: relative;
	overflow: hidden;
}
.featuredVintnerWrap.second {
	background-position: left top;
}
.featuredVintnerWrap img {
	position: absolute;
	width: 80%;
	height: auto;
	right: 0;
	top: 0;
}
.featuredVintnerWrap .headingArea {
	width: 100%;
}
.featuredVintnerWrap .year {
	font-size: 22px;
	font-weight: bold;
	color: var(--jewelGoldDrkFade);
	line-height: 1;
	margin-bottom: 16px;
	text-decoration: underline;
}
.featuredVintnerWrap.grapeLeafGreen-BG .year {
	color: var(--grapeLeafGreenFaded);
}
.featuredVintnerWrap .headingArea h3 {
	font-size: 64px;
	color: var(--whiteSmoke);
	line-height: .875;
	text-shadow: 3px 3px 5px #0000007a;
}
.featuredVintnerWrap.second .headingArea {
	text-align: right;
}
.featuredVintnerWrap .textArea {
	color: var(--whiteSmoke);
	text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.24);
	margin-left: -32px;
	width: 69%;
	padding: 16px 16px 16px 32px;
	border: 1px solid var(--jewelGoldDrk);
	background-color: rgba(56, 72, 42, 0.5);
	backdrop-filter: blur(5px);
}
.featuredVintnerWrap.second .textArea {
	margin-right: -32px;
	margin-left: auto;
	padding: 16px 32px 16px 16px;
	border: 1px solid var(--grapeLeafGreen);
	background-color: rgba(244, 164, 34, 0.7);
}
.featuredVintnerWrap .textArea p.title {
	font-size: 19px;
	margin-bottom: 8px;
}
.featuredVintnerWrap .textArea p {
	font-size: 15px;
	line-height: 1.2;
}
.featuredVintnerWrap .textArea a {
	display: block;
	margin: 0 0 0 auto;
}



/*
*
  Quick Links
*
*/
.quickLink {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 32px 32px 8px;
	position: relative;
	width: 100%;
	aspect-ratio: 1/1;
}
.quickLink .quickLinkBgrnd {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	filter: brightness(.75);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: filter .3s;
}
.quickLink:hover .quickLinkBgrnd {
	filter: brightness(1);
}
.qlTitleArea {
	z-index: 5;
}
.quickLink .qlTitleArea h3 {
	font-size: 48px;
	line-height: .865;
	margin-bottom: 4px;
}
.quickLink .qlTitleArea p {
	font-size: 20px;
}
.quickLink .qlTitleArea h3, .quickLink .qlTitleArea p {
	color: var(--whiteSmoke);
	text-shadow: 4px 4px 8px rgba(0, 0, 0, .75);
}
.quickLink a {
	margin-left: auto;
	margin-right: 0;
	z-index: 5;
}


/*
*
LARGE CALL OUT AREA
*
*/
.lrgCallOut {
	background-size: cover;
	background-repeat: no-repeat;
}
.lrgCallOut .columnOne {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 32px;
	backdrop-filter: blur(5px);
}
.lrgCallOut .titleArea h3 {
	font-size: 64px;
	line-height: .875;
	margin-bottom: 4px;
}
.lrgCallOut .columnTwo {
	padding: 32px;
	backdrop-filter: blur(5px);
	text-align: center;
}




/*
*
*
	MD Up Media Query
*
*
*/
@media (min-width: 768px) {


/*
*
*
  Featured Vintner
*
*
*/
	.featuredVintnerWrap {
		aspect-ratio: 3/3.33;
		padding: 64px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.featuredVintnerWrap .headingArea .year {
		font-size: 32px;
	}
	.featuredVintnerWrap .headingArea h3 {
		font-size: 128px;
	}
	.featuredVintnerWrap .textArea {
		margin-left: -64px;
		padding-left: 64px;
	}
	.featuredVintnerWrap .textArea p.title {
  	font-size: 22px;
	}



/*
*
  Quick Links
*
*/
	.quickLink {
		padding: 64px 64px 32px;
		aspect-ratio: 3/2;
	}
	.quickLink .qlTitleArea h3 {
		font-size: 64px;
	}
	.quickLink .qlTitleArea p {
		font-size: 24px;
	}
}



/*
*
*
	LG Up Media Query
*
*
*/
@media (min-width: 1200px) {
	.featuredVintnerWrap {
		aspect-ratio: 16/7;
		background-image: url('../images/pineRidge-mobileFeatureImg-1200pxW.jpg');
		background-size: contain;
	}
	.featuredVintnerWrap .headingArea {
  	width: 50%;
	}
	.featuredVintnerWrap.second .headingArea {
		margin-left: auto;
		margin-right: 0;
	}
	.featuredVintnerWrap .headingArea h3 {
		text-shadow: none;
	}
	.featuredVintnerWrap .textArea, .featuredVintnerWrap.second .textArea {
		margin-left: 0;
		padding: 32px;
		width: 56%;
	}
	.featuredVintnerWrap.second .textArea {
		margin-right: 0;
		margin-left: auto;
	}


/*
*
  Quick Links
*
*/
	.quickLink {
		padding: 64px 64px 32px;
		aspect-ratio: 3/2;
		width: 50%;
	}
	.quickLink .qlTitleArea h3 {
		font-size: 64px;
	}
	.quickLink .qlTitleArea p {
		font-size: 24px;
	}

}



/*
*
*
	XXL Up Media Query
*
*
*/
@media (min-width: 1440px) {
	.featuredVintnerWrap .textArea p {
  	font-size: 17px;
	}
}



/*
*
*
	1920px Up Media Query
*
*
*/
@media (min-width: 1920px) {
	.featuredVintnerWrap .headingArea .year {
		margin-left: 16px;
		font-size: 40px;
	}
	.featuredVintnerWrap .headingArea h3 {
		font-size: 178px;
	}
	.featuredVintnerWrap .textArea, .featuredVintnerWrap.second .textArea {
		margin-left: 162px;
		width: 40%;
		filter: drop-shadow(2px 2px 8px rgba(0,0,0,0.5));
	}
	.featuredVintnerWrap.second .textArea {
		margin-left: auto;
		margin-right: 162px;
	}
	.featuredVintnerWrap .textArea p {
		line-height: 1.5;
	}
/*
*
  Quick Links
*
*/
	.quickLink .qlTitleArea h3 {
		font-size: 80px;
	}
	.quickLink .qlTitleArea p {
		font-size: 24px;
	}
}




/*
*
*
	2400px Up Media Query
*
*
*/
@media (min-width: 2400px) {
	.featuredVintnerWrap {
		padding: 96px 128px;
	}
	.featuredVintnerWrap .headingArea h3 {
		font-size: 224px;
		-webkit-text-stroke: 5px var(--jewelGoldDrk);
	}
	.featuredVintnerWrap .headingArea .year {
		font-size: 40px;
		line-height: 1;
	}
}