/* ----------------------------------------------------------------
	BIG SMOOTH custom CSS
-----------------------------------------------------------------*/

/*--===== TRANSITIONS =====--*/
a, a:hover, .btn, .btn-join, #gotoTop, :hover {
	transition: all 0.3s ease-out !important;
	-webkit-transition: all 0.3s ease-out !important;
	-moz-transition: all 0.3s ease-out !important;
}


/*---========== ALL PAGES styles ==========---*/
body	{font-family: 'Fira Sans', Helvetica, sans-serif; font-size: 18px; line-height: 1.7; color: #FFF; font-weight: 300; text-align: center; background-color: #101010;}
h1, h2, h3, h4, h5 {font-family: 'Fira Sans Condensed', Helvetica, sans-serif; font-weight: 300; letter-spacing: 1px;}
h1 {font-size: 3rem; line-height: 1.1;}
h2 {font-size: 1.3rem; line-height: 1.5;}
p {}
a, a:link, a:visited {font-family: 'Fira Sans', Helvetica, sans-serif; color: #dedede; text-decoration: none; cursor: pointer;}

/*--------- HEADER styles ---------*/
.navbar {padding: 0 1rem;}
.navbar a {cursor: pointer;}
.solid-color.navbar {background-color: rgba(0,0,0,0.9);}
.navbar-brand {margin: 0; padding: 0;}
#logo {margin: 0 auto;}
img.menu-logo {width: auto; height: 50px; display: block; margin-top: 20px; transition: all 0.3s ease-out !important; -webkit-transition: all 0.3s ease-out !important; -moz-transition: all 0.3s ease-out !important;}
img.menu-logo:hover {opacity: 0.5;}
.navbar-toggler {position: absolute; top: 25px; right: 15px;}
/* Hamburger icon/animation */
.header-button-item {position: absolute; display: block; right: 0; width: 25px; height: 2px; background: #FFF; transition: all .3s ease-in;}
.header-button-item.top {top: 0; }
.header-button-item.middle {top: 8px;}
.header-button-item.bottom {top: 16px;}
.header-button-item.top.open {width: 23px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform-origin: left;}
.header-button-item.middle.open {width: 0 !important; background: #353535;}
.header-button-item.bottom.open {width: 23px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform-origin: left;}
/* navbar */
.navbar-nav {padding: 25px 0;}
.nav-link {padding: 1.2rem !important; color: #dedede !important;}
/* Plus toggle icon */
.plusToggle {position: relative; display: inline-block; left: 8px; transform: translateY(-6px); -webkit-transform: translateY(-6px); -ms-transform: translateY(-6px); -moz-transform: translateY(-6px);}
.plusToggle::before, .plusToggle::after {position: absolute; content: ""; width: 10px; height: 1px; display: inline-block; background-color: #777;}
.plusToggle::before {transform: rotate(90deg); transform-origin: center;}
/* Dropdown styles */
.dropdown-menu {height: 0; padding: 0; overflow: hidden; background-color: transparent; border-radius: 0; text-align: center; opacity: 0; visibility: hidden; transition: all 1s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease;}
.dropdown-menu.show {height: 90px; opacity: 1; visibility: visible; transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out;}
.dropdown-item {padding: 0.5rem; color: #888 !important;}
.dropdown-item.zinfandel {padding-top: 0;}
.dropdown-item.active, .dropdown-item:active {background-color: transparent;}

/*--- FOOTER styles ---*/
#footer {background: #111 url('../images/fishstocking-bg.png') repeat-x; color: #999; text-align: center;}
#footer li {float: left; margin: 0 8px; font-size: 0.9em; list-style: none;}
#footer a {color: #999;}
#footer a:hover {color: #FFF;}
.top-footer {padding: 60px 0;}
.footer-logo {height: 70px; width: auto; display: inline-block; margin-bottom: 15px; opacity: 0.7;}
ul.horiz-links {display: flex; justify-content: center; padding-left: 0;}
#copyrights {padding: 20px 0; font-size: 0.8em; line-height: 1.5; color: #757575; background-color: rgba(0,0,0,0.8);}
.copyrights-logo {width: auto; height: 30px; opacity: 0.6;}
.legal {margin-top: 15px;}

/*--- BUTTONS ---*/
button:focus {outline: none;}
/* Learn button */
.btn-learn {position: relative; margin: 10px; padding: 5px; display: inline-block; color: #efefef !important; text-transform: uppercase; letter-spacing: 2px; opacity: 0.7;}
.btn-learn::before {content: ''; position: absolute; top: 50%; right: -10px; width: 10px; height: 10px; border-left: 2px solid #efefef; border-top: 2px solid #efefef; transform: translateY(-50%) rotate(135deg); transition: right .3s ease-in; -webkit-transition: right .3s ease-in; -moz-transition: right .3s ease-in;}
.btn-learn::after {content: ''; position: absolute; top: 50%; right: -20px; width: 20px; height: 2px; background: #efefef; transform: translateY(-50%) scaleX(0); transition: transform .3s ease-in; -webkit-transition: transform .3s ease-in; -moz-transition: transform .3s ease-in;}
.btn-learn:hover {opacity: 1;}
.btn-learn:hover::before {right: -20px; transition: right .3s ease-out; -webkit-transition: right .3s ease-out; -moz-transition: right .3s ease-out;}
.btn-learn:hover::after {transform: translateY(-50%) scaleX(1); transform-origin: right center; transition: transform .3s ease-out .1s; -webkit-transition: transform .3s ease-out .1s; -moz-transition: transform .3s ease-out .1s;}
/* Buy button */
.btn-buy {padding: 15px 30px; display: inline-block; color: #FFF !important; text-transform: uppercase; letter-spacing: 2px; background: #bf242c; background: linear-gradient(to left, #bf242c 0%, #8517a9 100%) no-repeat; background-size: 200% ; background-position: 0%; transition: all 0.3s cubic-bezier(1,.5,.1,.7); -webkit-transition: all 0.3s cubic-bezier(1,.5,.1,.7);}
.btn-buy:hover {background-position: 100%; transition: all 0.3s cubic-bezier(.7,.1,.5,1); -webkit-transition: all 0.3s cubic-bezier(.7,.1,.5,1);}
/* Scroll to top */
.scrollToTop {display: none; position: fixed; bottom: 25px; right: 25px; z-index: 99; font-size: 18px; line-height: 14px; border: none; outline: none; background-color: rgba(0,0,0,0.4); color: white; cursor: pointer; padding: 10px;}
.scrollToTop:hover {background-color: rgba(0,0,0,0.9);}

/*---========== INDEX styles ==========---*/
.carousel-item {height: 100vh;} /* 100vh if header is fixed-top */
.slide1 {background: #151515 url('../images/bs-big-flavor.jpg') no-repeat; background-size: cover; background-position: right center;}
.slide2 {background: #222222 url('../images/bigsmooth-intro-ovz-award.jpg') no-repeat; background-size: cover; background-position: -200px center;}
.slide1::before {content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #151515; opacity: 0.35;}
.slide2::before {content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #151515; opacity: 0.35;}
.carousel-item .container {position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%);}
.carousel-item h2 {padding: 0 40px;}
.carousel-item .btn-buy {display: none; margin: 15px; }
#bigsmoothCarousel img.award-callout {width: 150px; height: auto; margin-left: 120px;}
.carousel-indicators li {width: 50px; height: 1px;}
#slide-two-title {width: 100%; margin-bottom: 35px;}
/* Home About */
#homeAbout {position: relative; height: auto; width: 100%; overflow: hidden; background-color: rgba(0,0,0,0.8);}
#homeAbout .imageBG {position: absolute; height: 100vh; width: 100%; overflow: hidden; background: url('../images/bigsmooth-bokeh-bg.jpg') no-repeat; background-size: cover; background-position: center top; opacity: 0.5;}
.home-about-wrapper {position: relative; top: 50%; padding: 100px 0;}
.gradient-text {background: linear-gradient(45deg, #f70d0d, #8517a9); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.watercolorBG {background: url('../images/bigsmooth-watercolor-bg.jpg') no-repeat;}
.home-about-wrapper h2 {font-size: 2rem; color: transparent;}
/* Home wines */
.home-wines-image img {width: 100%;}
.wine-wrapper .btn-buy {margin: 0 25%}
.zin, .cab {position: relative; height: 400px; display: inline-block;}
.zin {width: 100%; background: url('../images/bigsmooth-home-zin.jpg') no-repeat; background-size: cover; background-position: 40% center;}
.cab {width: 100%; background: url('../images/bigsmooth-home-cab_2019.jpg') no-repeat; background-size: cover; background-position: 40% center;}
.zin::before, .cab::before {content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(0deg, #000, #000); opacity: 0.2; transition: all 1s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease;}
.wine-wrapper {position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%);}
h3.varietal {position: relative; top: 0; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;}
p.descriptor {position: relative; top: 0; opacity: 0; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;}
.wineHome.btn-learn {position: relative; top: -50px; transition: all 1s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease;}
.wine-wrapper .btn-buy {display: none;}


/*---========== WINES styles ==========---*/
/* ZINFANDEL */
#zinIntro, #cabIntro {position: relative; height: 100vh; width: 100%; overflow: hidden;}
#zinIntro .imageBG {position: absolute; height: 100%; width: 100%; overflow: hidden; background: #444 url('../images/bigsmooth-zin-header.jpg') no-repeat; background-size: cover; background-position: 70% center;}
.zin-intro-wrapper, .cab-intro-wrapper {position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%);}
img.wine-award {display: inline-block; width: 160px; height: auto; margin: 20px;}
#zinDetails {position: relative; height: auto; padding: 60px 0; background: #613d7a url('../images/velvet-texture-purple.jpg') repeat-x; background-size: cover;}
.wine-ctas, .winespecs {margin-bottom: 25px;}
img.bottleshot {position: relative; left: 50%; height: 600px; width: auto; display: block; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%);}
.winespecs ul {padding-left: 0; list-style: none; font-size: 0.9rem;}
li.specs-header {display: block; font-family: 'Fira Sans Condensed', Helvetica, sans-serif; text-transform: uppercase;}
#zinDetails .specs-header {color: #bf242c;}
.infoText h3 {text-transform: uppercase; letter-spacing: 2px;}
#zinDetails .infoText h3 {color: #bf242c;}
#zinDetails .btn-buy, #cabDetails .btn-buy {display: block; margin: 20px;}
#zinDetails .btn-learn, #cabDetails .btn-learn {margin-bottom: 20px;}
/* CAB SAUV */
#cabIntro .imageBG {position: absolute; height: 100%; width: 100%; overflow: hidden; background: #444 url('../images/bigsmooth-cab-header.jpg') no-repeat; background-size: cover; background-position: 70% center;}
#cabDetails {position: relative; height: auto; padding: 60px 0; background: #613d7a url('../images/velvet-texture-red.jpg') repeat-x; background-size: cover;}
#cabDetails .specs-header {color: #bf242c;}
#cabDetails .infoText h3 {color: #bf242c;}
.btn-buy.red {background-position: 100%;}
.btn-buy.red:hover {background-position: 0%;}

/*---========== ABOUT styles ==========---*/
/* INTRO section */
#aboutIntro {position: relative; height: auto; width: 100%; overflow: hidden; }
#aboutIntro .imageBG {position: relative; height: 80vh; width: 100%; overflow: hidden; background: url('../images/bigsmooth-about-header_2019.jpg') no-repeat; background-size: cover; background-position: 10% center;}
.about-intro-wrapper {position: relative; padding: 50px 0;}
.about-intro-wrapper h1 {margin-bottom: 15px; padding: 0 5%;}
.about-intro-wrapper h4 {color: #cdcdcd; line-height: 1.3;}
img.headshot {width: 80%; height: auto; margin: 30px; border-radius: 50%;}
/* WINEMAKER */
#winemaker-ava {position: relative; height: auto; width: 100%; overflow: hidden; background: #020003;}
#winemaker-ava .imageBG {position: absolute; height: 200vh; width: 100%; overflow: hidden; background: url('../images/bigsmooth-bokeh-bg.jpg') no-repeat; background-size: cover; background-position: center top;}
.winemaker-wrapper {padding-bottom: 30px;}
.ava-wrapper {padding: 30px 0;}
img.lodiMap {width: 80%; height: auto; margin: 30px;}


/*---========== FIND styles ==========---*/
#findIntro {position: relative; height: auto; width: 100%; overflow: hidden;}
#findIntro .imageBG {position: absolute; height: 100%; width: 100%; overflow: hidden; background: url('../images/bigsmooth-bokeh-bg.jpg') no-repeat; background-size: cover; background-position: center top;}
.find-intro-wrapper {position: relative; margin-top: 100px; height: auto; padding-bottom: 60px;}
.find-intro-wrapper h4 {margin-bottom: 30px;}
/* Brand Finder styles */
.brand-finder {width: 100%; display: inline-block; }
.brand-finder-window {width: 100%; height: 475px; border: none;}
#find_shop_online_link {padding-top: 40px; padding-bottom: 40px;}
#find_shop_online_link h3 {font-size: 2.2rem; margin-bottom: 20px;}

/*--- POLICIES ---*/
#policies {position: relative; height: auto; width: 100%; overflow: hidden;}
#policies .imageBG {position: absolute; height: 100vh; width: 100%; overflow: hidden; background: url('../images/bigsmooth-bokeh-bg.jpg') no-repeat; background-size: cover; background-position: center top;}
.policies-wrapper {margin-top: 100px; padding-bottom: 50px;}
.policies-wrapper h2 {margin-bottom: 25px;}
.subhead {margin-bottom: 0 !important; color: #bf242c !important;}


/*--========== HELPER CLASSES styles ==========-- */
.notation-txt {font-style: italic; margin-bottom: 15px;}
.bold-txt {font-weight: 600;}
.bigsmoothPurple {color: #613d7a !important;}
.bigsmoothRed {color: #bf242c !important;}
.white-txt {color: #FFF !important;}
.divider-line {width: 15%; border-bottom: 1px solid #000; margin: 30px 0 25px;}
.dot-separator {position: relative; bottom: 4px; height: 8px; width: 8px; display: inline-block; margin: 0 10px; border-radius: 50%;}
.dot-separator.purpleBG {background-color: #613d7a;}
.dot-separator.redBG {background-color: #bf242c;}
.last-list-item {margin-bottom: 10px;}


/*---========== MEDIA QUERIES ==========---*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .home-about-wrapper h2, .about-intro-wrapper h1, .winemaker-wrapper h3, .ava-wrapper h3, .find-intro-wrapper h1 {color: #ce1131; background: transparent;}
}
@media screen and (min-width: 576px) {
	.navbar-nav {padding: 0;}
	.nav-link {padding: 0.5rem !important;}
	.carousel-item .container {top: 60%;}
	.carousel-item h1 {display: inline-block;}
	.slide2 {background-position: center center;}
	#bigsmoothCarousel img.award-callout {width: 120px; margin-left: auto; margin-right: auto;}
	.zin-intro-wrapper, .can-intro-wrapper {top: 60%;}
	#homeAbout {padding-bottom: 60px;}
	.zin-intro-wrapper, .cab-intro-wrapper {top: 55%;}
	#aboutIntro {height: 150vh;}
	#aboutIntro .imageBG {position: absolute; height: 100%;}
	#aboutIntro .imageBG::before {content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #151515; opacity: 0.4;}
	.about-intro-wrapper {top: 40vh; padding: 0;}
	img.headshot, img.lodiMap {width: 50%;}
}
@media screen and (max-width: 575px) {
	#bigsmoothCarousel img.award-callout {width: 120px; margin-left: auto; margin-right: auto;}
}
/* iPhone X/Galaxy styles */
@media screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : portrait) {
	.slide2 {background-position: -250px center;}
}
@media screen and (min-width: 768px) {
	.btn-learn {margin: 10px 0;}
	.slide1 {background-position: right center;}
	.slide1::before {content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #151515; opacity: 0.05;}
	.slide2 {background-position: 35% center;}
	.carousel-item .container {top: 50%; text-align: left;}
	.carousel-item h1 {font-size: 3rem;}
	.carousel-item h2 {padding: 0; padding-right: 50px;}
	.carousel-item .dot-separator {display: inline-block;}
	.carousel-item .btn-buy {display: inline-block; margin: 15px 0;}
	#bigsmoothCarousel img.award-callout {width: 220px; margin-left: 0;}
	#homeAbout {padding-bottom: 20px;}
	.zin, .cab {width: 50%;}
	#zinIntro, #cabIntro {height: 80vh;}
	#zinIntro h4 {padding: 0 5%;}
	.wine-ctas {position: relative; margin-top: -60vh;}
	img.bottleshot {height: 700px;}
	.wine-ctas .btn-learn {font-size: 0.8rem;}
	#aboutIntro {height: 70vh;}
	#aboutIntro .imageBG {background-position-x: 40%;}
	#aboutIntro .imageBG::before {opacity: 0;}
	.about-intro-wrapper {top: 15vh;}
	.about-intro-wrapper h4 {font-size: 1.3rem; line-height: 1.5;}
	#winemaker-ava {padding-top: 60px; font-size: 1.2rem;}
	.winemakerBio {text-align: left;}
	img.headshot {width: 250px; margin-bottom: 15%; float: right;}
	.avaInfo {padding: 25px; text-align: left; background-color: rgba(97,61,122,0.3);}
	img.lodiMap {width: 300px; margin: 0 30px 0 0; float: left;}
	#findIntro {height: 100vh;}
	.find-intro-wrapper {top: 50%; margin: 0; padding: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%);}
}
@media screen and (min-width: 992px) {
	.navbar-nav {padding: 0;}
	.nav-link {padding: 1.3rem !important;}
	.nav-link:hover {opacity: 0.5;}
	.dropdown-menu {margin: 0; background-color: rgba(0,0,0,0.8); text-align: left; border: none;}
	.dropdown-menu.show {height: auto;}
	.dropdown-item {position: relative; padding: 1rem !important;}
	.dropdown-item:hover {color: #FFF !important; background-color: transparent;}
	.dropdown-item.zinfandel::after {content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(45deg, #9500c5, #9500c500 85%); opacity: 0; z-index: -1; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;}
	.dropdown-item.zinfandel:hover::after, .dropdown-item.cabsauv:hover::after {opacity: 0.7; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;}
	.dropdown-item.cabsauv::after {content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(45deg, #c50012, #c5001200 85%); opacity: 0; z-index: -1; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;}
	#homeAbout {padding-bottom: 50px;}
	.home-about-wrapper h2 {font-size: 2.3rem;}
	.zin, .cab {background-position-x: right;}
	.wine-wrapper {width: 60%; left: 35%; text-align: left;}
	h3.varietal {top: 20px;}
	#zinIntro h4 {padding: 0;}
	#cabIntro h4 {padding-right: 15%;}
	.wineHome.btn-learn {top: -70px;}
	.zin-intro-wrapper, .cab-intro-wrapper, .winespecs, .infoText {text-align: left;}
	.zin-intro-wrapper h1, .cab-intro-wrapper h1 {margin-bottom: 20px; font-size: 3.3rem;}
	.cab-intro-wrapper h4 {padding-right: 10%; line-height: 1.5;}
	.wine-ctas {margin-top: -70vh;}
	#zinDetails .btn-buy, #cabDetails .btn-buy {display: inline-block;}
	#aboutIntro {height: 100vh;}
	.about-intro-wrapper {top: 30vh; text-align: left;}
	.about-intro-wrapper h1 {padding: 0;}
	.winemaker-wrapper {padding: 30px 0;}
	.avaInfo {padding: 40px; padding-left: 20px;}
	.copyrights-logo {display: block;}
	.legal {margin-top: 6px; text-align: right;}
}
@media screen and (min-width: 1200px) {
	/* Home - Wines hover styles */
	.zin, .cab {height: 450px; background-position-x: right; transition: all 1s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; }
	.zin:hover .wine-wrapper h3 {top: 0; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;}
	.zin:hover p.descriptor {top: -5px; opacity: 1; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;}
	.zin:hover .wineHome.btn-learn {top: -20px; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;}
	.zin:hover::before {background-image: linear-gradient(0deg, #9500c5, #9500c500); opacity: 0.5; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;}
	.cab:hover .wine-wrapper h3 {top: 0; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;}
	.cab:hover p.descriptor {top: -5px; opacity: 1; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;}
	.cab:hover .wineHome.btn-learn {top: -20px; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;}
	.cab:hover::before {background-image: linear-gradient(0deg, #c50012, #c5001200); opacity: 0.4; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;}
	.wineHome.btn-learn {top: -40px;}

}
@media screen and (min-width: 1400px) {
	#zinIntro, #cabIntro {height: 80vh;}
	.wine-ctas {margin-top: -70vh;}
	img.bottleshot {height: 800px;}
}
@media screen and (min-width: 1824px) {

}
@media screen and (max-width: 1000px) {
.slide1::before {content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #151515; opacity: 0.55 !important;}
.slide2::before {content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #151515; opacity: 0.55 !important;}
}