/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

$gold: #bda98e;
$darkgold: #937c5d;
$blue: #1a1a1f;
$dark: #242424; //winery body color
$link: #946d3b; //for links and hr

@mixin transition($property: all, $timing: 500ms) {
	transition: $property $timing;
}

@mixin fadeIn($timing: 500ms, $delay: 250ms) {
	-webkit-animation: fadein $timing $delay;
	-moz-animation: fadein $timing $delay;
	-ms-animation: fadein $timing $delay;
	-o-animation: fadein $timing $delay;
	animation: fadein $timing $delay;
}

@mixin subMenuTransition($property: all, $timing: 500ms) {
	.submenu-transitioning & {
		transition: $property $timing;
	}
}

@-webkit-keyframes fadein{
	from{opacity:0;}
	to{opacity:1;}
}
@-moz-keyframes fadein{
	from{opacity:0;}
	to{opacity:1;}
}
@-ms-keyframes fadein{
	from{opacity:0;}
	to{opacity:1;}
}
@-o-keyframes fadein{
	from{opacity:0;}
	to{opacity:1;}
}
@keyframes fadein{
	from{opacity:0;}
	to{opacity:1;}
}

body{
	font-family: 'Muli', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.8em;
	color: #606065;
	overflow-x: hidden;
	@include fadeIn(500ms, 0ms);
	.oldie & {
		min-width: 768px;
	}
	&.fadeout{
		opacity: 0;
		transition: opacity 500ms 500ms;
	}
}

h1,h2,h3,h4,h5,h6 {
	font-family: 'Average', serif;
	font-weight: 300;
}

a{
	color: $gold;
	@include transition(color);
	&:hover, &:focus {
		color: $darkgold;
		outline: 0;
		text-decoration: none;
	}
}

.container,div[class*="col-"] {transition: width 500ms, margin 500ms;}
.gold {color: $gold;}
.relative {position: relative;}
.margin-top-20 {margin-top: 20px;}
.gold-border {border: 2px solid $gold}
.anchor {position: relative; top: -100px; @media (min-width: 768px) {top: 0;}} 
p.small{line-height: 1.4em;}
.fade60 {opacity: .6}
.btn {letter-spacing: 2px;}
.fadein {@include fadeIn;}
.inline-block {display: inline-block;}
.oldie .img-responsive {width: auto;}

.icon-social {
	width: 22px;
	height: 21px;
	background-image: url('../images/social-map.png');
	background-repeat: no-repeat;
	display: inline-block;
	&.icon-tw {
		background-position: -25px 0;
		width: 26px;
		margin-left: 15px;
	}
}

.icon-map {
	width: 23px;
	height: 18px;
	background-image: url('../images/icon-map.png');
	background-repeat: no-repeat;
	display: inline-block;
	&.icon-back{
		width: 9px;
		height: 13px;
		background-position: 0 -47px;
		margin-right: 10px;
	}
}

.header {
	display: none;
	@media (min-width: 768px) {
		display: block;
		background-color: #1a1a1f;
		height: 30px;
		background-repeat: no-repeat;
		background-position: left top;
		background-image: url('../images/bg-header.png');
		position: fixed;
		z-index: 1000;
		top: 0;
		width: 100%;
		color: $gold;
		a{
			color: $gold;
			&:hover {
				color: $gold;
				text-decoration: none;
			}
		}
		.top-menu-border {
			color: #606065;
			margin: 0 5px;
		}
	}
}

.content {
	margin-top: 98px;
	#home-page & {
		margin-top: 51px;
	}
	@media (min-width: 768px) {
		margin-top: 30px;
		#home-page & {
			margin-bottom: 0;
		}
		margin-bottom: 131px;
		@include transition(margin);
		.menu-open & {
			margin-bottom: 224px;
		}
		.menu-open.our-wines-menu-open & {
			margin-bottom: 310px;
		}
	}
}

.absolute-bg {
	position: absolute;
	z-index: -1;
	top: 51px;
	left: 0;
	width: 100%;
	@media (min-width: 768px) {
		top: 0;
	}
}

.slider {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	margin-left: -15px;
	.slide {
		width: 100%;
		height: 100%;
		background-position: center;
		// background-image: url('../images/slider1.jpg');
		position: absolute;
	}
}

.gradient {
	position: absolute;
	bottom: 0;
	background-repeat: repeat-x;
	background-image: url('../images/gradient-verticle.png');
	height: 131px;
	width: 100%;
	@media (min-width: 768px) {
		top:0;
		left: 0;
		width: 155px;
		height: 100%;
		background-image: url('../images/gradient-horizontal.png');
		background-repeat: repeat-y;
	}
}

.welcome-text {
	@media (min-width: 768px) {
		margin: 0;
	}
	h1{
		margin: 0 0 15px;
		color: $darkgold;
		text-transform: uppercase;
		letter-spacing: 5px;
	}
	h2{
		font-family: 'Montserrat', sans-serif;
		color: $darkgold;
		text-transform: uppercase;
		font-size: 20px;
		letter-spacing: 4px;
		margin: 0;
		&:after {
			content: "";
			border-bottom: 1px solid $gold;
			display: block;
			width: 120px;
			margin: 30px auto;
			position: relative;
		}
	}
}

.home-section {
	position: relative;
}

.section-bg  {
	background-position: top center;
	background-repeat: no-repeat;
	.wines-home-section & {
		height: 470px;
		background-image: url('../images/mobile-home-ourwines.jpg');
	}
	.visit-home-section & {
		background-image: url('../images/mobile-home-visitus.jpg');
		height: 442px;
	}
	.estate-home-section & {
		background-image: url('../images/mobile-home-tourourestate.jpg');
		height: 387px;
	}
}

.estate-home-section {
	padding-bottom: 40px;
}

.footer {
	position: relative;
	z-index: 1000;
	@media (min-width: 768px) {
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 100;
	}
}

.logo {
	position: relative;
	width: 170px;
	display: block;
	float: left;
	margin: 9px 0;
	@media (min-width: 768px) {
		float: none;
		margin: 0 auto;
		top: 55px;
	}
}

.social {
	display: none;
	@media (min-width: 768px) {
		display: block;
		float: right;
		margin-top: 65px;
	}
}

.copyright-container-bg {
	position: relative;
	background-color: $blue;
	background-image: url('../images/bg-mobile-footer.png');
	background-position: left top;
	background-repeat: no-repeat;
	@media (min-width: 768px) {
		
		background-image: none;
	}
}

.btn-back {
	&:hover, &:focus {
		text-decoration: none;
	}
}

.copyright {
	font-size: 14px;
	margin: 0;
	padding: 20px 0;
	text-align: center;
	line-height: 1.2em;
	a {
		color: $gold;
		&:hover, &:focus {
			color: $gold;
		}
	}
	@media (min-width: 768px) {
		padding: 5px 0;
	}
}

// SUBPAGES   ////////////////////////////////////////////////////////////////////////////////////////////////

.page-title {
	color: $darkgold;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-align: center;
	margin-top: 45px;
	&:after {
		content: "";
		display: block;
		border-top: 1px solid $darkgold;
		position: relative;
		width: 100px;
		margin: 20px auto;
	}
	.small {
		font-family: 'Montserrat', sans-serif;
		color: $darkgold;
		font-size: 22px;
	}
}

.subsection-title {
	color: $darkgold;
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;	
	font-size: 22px;
	font-weight: 400;
	position: relative;
	z-index: 0;
	margin: 50px 0;
	display: inline-block;
	padding: 0 10px;
	background-color: #fff;
	letter-spacing: 2px;
	@media (min-width: 768px) {
		padding: 0 40px;
	}
}

.subsection-subtitle {
	font-family: 'Montserrat', sans-serif;	
	text-transform: uppercase;
	font-size: 18px;
	color: $darkgold;
}

.title-container {
	text-align: center;
}

.subsection-line {
	display: block;
	border-top: 8px solid #f2f2f2;
	position: absolute;
	top: 57px;
	width: 100%;
	z-index: -1;
}

.seconary-nav {
	position: fixed;
	top: 51px;
	@include transition(top);
	background-color: #fff;
	z-index: 50;
	@media (max-width: 767px) {
		width: 100%;
	}
	@media (min-width: 768px) {
		position: inherit;
		background-color: transparent;
	}
	.menu-open & {
		top: 98px;
	}
	.teaser {

		background-image: url('../images/white-teaser.png');
		.left-menu-scrolled & {
			opacity: 0;
		}
	}
}

.teaser {
	position: absolute;
	right: 0;
	height: 43px;
	width: 52px;
	background-image: url('../images/blue-teaser.png');
	display: block;
	z-index: 100;
	opacity: 0;
	@include transition(opacity);
	@media (min-width: 768px) {
		display: none;
	}
	&.shown{
		opacity: 1
	}
}


.current-location-container {
	padding: 10px 0;
	position: relative;
	cursor: pointer;
	@media (min-width: 768px) {
		display: none;
	}
	.page-location {
		color: $gold;
		float: left;
		font-weight: 400;
	}
	.current-location {
		position: relative;
		display: inline-block;
		float: left;
		margin-left: 15px;
		.nav {
			li{
				position: absolute;
				top: 0;
				left: 0;
				a{
					opacity: 0;
					white-space: nowrap;
					padding: 0;
					font-weight: 400;
					color: $darkgold;
					@include transition(opacity);
					&:hover, &:focus {
						background-color: transparent;
					}
				}
				&.active {
					a{
						opacity: 1;
					}	
				}
			}
		}
	}
	.location-fade{
		position: absolute;
		right: -15px;
		top: 0;
		background-image: url('../images/nav-gradient.png');
		width: 65px;
		height: 48px;
		.dropdown-arrow{
			background-image: url('../images/arrow.png');
			width: 14px;
			height: 7px;
			display: inline-block;
			position: absolute;
			top:20px;
			right: 15px;
			-webkit-transition: -webkit-transform 500ms;
			-moz-transition: -moz-transform 500ms;
			-o-transition: -o-transform 500ms;
			transition: transform 500ms;
			.sticky-left-menu.menu-open & {
				-webkit-transform: rotate(180deg);     /* Chrome and other webkit browsers */
				-moz-transform: rotate(180deg);        /* FF */
				-o-transform: rotate(180deg);          /* Opera */
				-ms-transform: rotate(180deg);         /* IE9 */
			  transform: rotate(180deg);             /* W3C complaint browsers */

			  /* IE8 and below */
			  filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand');
			}
		}
	}
}

.sticky-left-menu {
	.left-menu {
		height: 0;
		overflow: hidden;
		position: relative;
		opacity: 0;
		transition: height 500ms, top 500ms, opacity 500ms;
		@media (min-width: 768px) {
			height: auto;
			position: fixed;
			z-index: 1;
			top: 75px;
			opacity: 1;
			.left-menu-slide-down & {
				top: 125px;	
			}
		}
	}
	&.menu-open .left-menu {
		height: 48px;
		opacity: 1;
	}
}

.left-menu ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	white-space: nowrap;
	overflow: auto;
	&::-webkit-scrollbar { 
		display: none; 
	}
	li{
		display: inline-block;
		margin-left: 10px;
		@media (min-width: 768px) {
			display: block;
			margin: 0;
		}	
		&:first-child{
			margin-left: 0;
		}
		&.active .hover-arrow{
			opacity: 1;
		}
	}
	a{
		color: $darkgold;
		font-weight: 400;
		display: block;
		padding: 10px 3px;
		&:hover, &:focus {
			text-decoration: none;
			background-color: transparent;
		}
		@media (min-width: 768px) {
			padding: 0;
			display: inline-block;
			.hover-arrow {
				width: 9px;
				height: 13px;
				display: inline-block;
				opacity: 0;
				@include transition(opacity);
				background-image: url('../images/icon-map.png');
				background-repeat: no-repeat;
				background-position: 0 -96px;
			}
			&:hover .hover-arrow{
				opacity: 1;
			}
		}
	}
}

.section-summery {
	text-align: center;
	@media (min-width: 768px) {
		//max-width: 400px;
		
	}
	@media (min-width: 992px) {
		// max-width: 400px;
	}
	@media (min-width: 1200px) {
		max-width: 500px;
		margin: 0 auto;
		position: relative;
	}
}

.narrow-form {
	@media (min-width: 768px) {
		max-width: 300px;
		margin: 50px auto;
		position: relative;
	}
	@media (min-width: 992px) {
		max-width: 375px;
	}
	@media (min-width: 1200px) {
		max-width: 450px;
	}
}


// COLLECTION ////////////////////////////////////////////////////////////////////////////////////////////////

.wine-club-section {
	@media (min-width: 768px) {
		background-image: url("../images/bg-club.jpg");
		background-repeat: no-repeat;
		background-position: right center;
		min-height: 645px;
	}
}

.bottle-menu {
	overflow: hidden;
	margin: 20px 0;
	height: 110px;
	position: relative;
	z-index: 1;
	ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
		white-space: nowrap;
		position: relative;
		overflow: auto;
	}
	li {
		display: inline-block;
		margin-left: 20px;
		&:first-child {
			margin-left: 0;
		}
	}
	span {
		display: inline-block;
		line-height: 1.2em;
		margin: 20px 0 0 10px;
	}
	img {
		float: left;
	}
	.teaser {
		height: 110px;
		background-image: url('../images/large-teaser.png');
		.wine-menu-scrolled & {
			opacity: 0;
		}
	}
}

.add-cart-quantity {
	max-width: 100px;
	padding-left: 5px;
	line-height: normal;
}

.wine-section{
	position: relative;
	&:last-child {
		min-height: 675px;
		padding-bottom: 75px;
		@media (min-width: 992px) {
			padding-bottom: 0;
		}
	}
}

.collection-overview {
	background-image: url('../images/collections.jpg');
	background-position: center top;
	background-repeat: no-repeat;
	padding-top: 400px;
	width: 100%;
	@media (min-width: 768px) {
		background-image: url('../images/bg-default.jpg');
		min-height: 581px;
		padding-top: 0;
	}
}

.wines-content {
	background-image: url('../images/wines.jpg');
	background-position: center top;
	background-repeat: no-repeat;
	width: 100%;
	padding-top: 290px;
	@media (min-width: 768px) {
		background-image: url('../images/bg-default.jpg');
		min-height: 581px;
		padding-top: 0;
	}
}

.wine-club-section .xs-bg {
	background-image: url('../images/dish.jpg');
	background-position: center top;
	background-repeat: no-repeat;
	width: 100%;
	min-height: 275px;
	@media (min-width: 768px) {
		background-image: none;
		min-height: inherit;
	}
}

.collection-link {
	line-height: 1.2em;
	display: inline-block;
	color: $darkgold;
	@include fadeIn(500ms, 250ms);
	text-align: left;
	@media (min-width: 768px) {
		text-align: center;
		margin: 20px 0;
	}
	@media (min-width: 992px) {
		margin: 100px 0 50px;
	}
	br {
		display: none;
		@media (min-width: 768px) {
			display: block;
		}
	}
	.collection-thumb {
		display: none;
		@media (min-width: 768px) {
			display: block;
		}
	}
	&:hover, &:focus {
		text-decoration: none;
		color: $darkgold;
	}
}

.wines-menu-line {
	border-left: 1px solid $darkgold;
	width: 1px;
	height: 20px;
	position: relative;
	top: 4px;
	@media (min-width: 768px) {
		top:0;
		border: 0;
		height: 1px;
		background-color: $darkgold;
		width: 100px;
		margin: 15px 0 15px 15px;
	}
}

.where-to-buy-section {
	background-image: url('../images/bottle.jpg');
	background-repeat: no-repeat;
	background-position: center bottom;
	min-height: 650px;
	@media (min-width: 768px) {
		background-image: url('../images/bg-wheretobuy.jpg');
		background-position: right bottom;
		min-height: 600px;
		margin-bottom: 100px;
	}
}

.purchase-wine {
	margin-top: 20px;
	label {
		font-weight: 400;
	}
}

.wine-links {
	margin-top: 20px;
}

.btn-purchase {
	margin: 20px 0;
}

.winery a {
	color: $link;
}

.products-content{
	.collection-menu {
		margin:  30px 0 0 0;
		@media (min-width: 768px) {
			margin:  0 0 10px 0;
		}
		&:focus {
			border-color: #937c5d;
			box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(147,124,93,.6)
		}
	}
}

.wine-bottle {
	@include fadeIn(500ms, 250ms);
	margin-left: auto;
	margin-right: auto;
	max-height: 420px;
	.wine-section-overview & {
		@media (min-width: 992px) {
			margin-top: 50px;
		}
		@media (min-width: 1200px) {
			margin-top: 0;	
		}
	}
}

.awards-accolades-section .table-select {
	@media (min-width: 768px) {
		width: 50%;
		margin: 50px 0 20px;
	}
}

.awards-accolades-section {
	thead {
		border-bottom: 1px solid $darkgold;
		// font-weight: 600;
		color: $darkgold;
		text-transform: uppercase;
		font-family: 'Montserrat', serif;
	}
}

// VISIT US /////////////////////////////////////////////////////////////////////////////////////////////////////

.visit-content {
	.subsection-subtitle {
		margin-top: 0;
	}
}

.visit-us {
	background-image: url('../images/visit.jpg');
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 250px;
	@media (min-width: 768px) {
		background-image: url('../images/bg-visit-us.jpg');
		min-height: 828px;
		padding-top: 0;
	}
	.subsection-subtitle {
		margin-top: 75px; 
	}
}

.tasting-room-section .col-lg-4 {
	background-image: url('../images/tastingroom.jpg');
	background-repeat: no-repeat;
	background-position: center top;
	min-height: 250px;
	@media (min-width: 768px) {
		background-image: none;
		min-height: inherit;
	}
}

.estate-experience-section .col-lg-4 {
	background-image: url('../images/chairs.jpg');
	background-repeat: no-repeat;
	background-position: center top;
	min-height: 250px;
	@media (min-width: 768px) {
		background-image: none;
		min-height: inherit;
	}
}

.gallery-section .xs-bg {
	background-image: url('../images/gallery.jpg');
	background-repeat: no-repeat;
	background-position: center top;
	min-height: 275px;
	@media (min-width: 768px) {
		background-image: none;
		min-height: inherit;
	}
}

.section-img {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 15px;
	&.section-img-left {
		margin-left: auto;
		margin-right: auto;
		@media (min-width: 768px) {
			margin-left: 0;
			margin-right: 30px;
			margin-bottom: 0;
			float: left;	
		}
		@media (min-width: 1200px) {
			margin-left: 0;
			margin-right: 0;
			float: none;	
		}
	}
	&.section-img-right {
		margin-left: auto;
		margin-right: auto;
		@media (min-width: 768px) {
			margin-right: 0;
			margin-left: 30px;
			margin-bottom: 0;
			float: right;	
		}
		@media (min-width: 1200px) {
			margin-left: 0;
			margin-right: 0;
			float: none;	
		}
	}
}

.estate-experience .col-right-mod{
	@media (min-width: 768px) {
		float: right;
	}
	@media (min-width: 1200px) {
		float: left;	
	}	
}

.btn-app-container {
	text-align: center;
	margin-top: 30px;
	@media (min-width: 768px) {
		text-align: left;
	}
}

.btn-app {
	display: inline-block;
	font-size: 14px;
	vertical-align: top;
	margin-left: 20px;
	&:first-child{
		margin-left: 0;
	}
}

.gallery-teaser-group {
	margin-bottom: 30px;
	position: relative;
}

.bg-gallery {
	position: absolute;
	right: -60px;
	top: 30px;
	background-image: url('../images/gallery-bottle.png');
	width: 201px;
	height: 329px;
	background-repeat: no-repeat;
	background-position: center;
	z-index: 1;
	pointer-events:none;
}

.gallery-section {
	min-height: 575px;
}

.gallery-teaser-img {
	@media (min-width: 768px) {
		margin: 0 auto;
	}
}

// GALLERY ////////////////////////////////////////////////////////////////////////////////////////////////////

.gallery-content {
	background-image: url('../images/bg-visit-us-xs.jpg');
	background-repeat: no-repeat;
	background-position: center top;
	min-height: 800px;
	@media (min-width: 768px) {
		background-image: url('../images/bg-gallery.jpg');
		min-height: 828px;
	}
}

.gallery-img {
	margin-top: 15px;
	margin-bottom: 15px;
}

.gallery-container {
	margin-top: 50px;
}

.gallery-thumb {
	border: 2px solid #fff;
}

.pagination {
	>li{
		&:first-child a, &:first-child span{
			border-radius: 0;
		}
		&:last-child a, &:last-child span{
			border-radius: 0;
		}
		>a, >span{
			border: 0;
			color: $gold;
			&:hover, &:focus {
				color: $darkgold;
				background-color: transparent;
			}
		}
	}
}

// PAIRING ////////////////////////////////////////////////////////////////////////////////////////////////////

.pairing-content {
	.pairings {
		background-image: url('../images/pairings.jpg');
		background-repeat: no-repeat;
		background-position: center top;
		padding-top: 275px;
		@media (min-width: 768px) {
			background-image: url('../images/bg-pairing.jpg');
			min-height: 633px;
			padding-top: 0;
		}
	}
}

.recipe-listing {
	margin-top: 30px;
}

.recipe-img {
	margin-top: 20px;
}

.ingredients-list {
	list-style-type: none;
	color: $darkgold;
	margin: 30px 0;
	padding: 0;
	li{
		padding: 2px 0;
	}
}

// ABOUT US ////////////////////////////////////////////////////////////////////////////////////////////////////

.about-content {
	.about {
		background-image: url('../images/about.jpg');
		background-repeat: no-repeat;
		background-position: center top;
		padding-top: 225px;
		@media (min-width: 768px) {
			@include transition(background-position);
			background-image: url('../images/bg-about-us.jpg');
			min-height: 720px;
			padding-top: 0;
		}
	}
}

.region-listing .col-lg-4 {
	background-image: url('../images/grapes.jpg');
	background-repeat: no-repeat;
	background-position: center top;
	min-height: 230px;
	@media (min-width: 768px) {
		background-image: none;
		min-height: inherit;
	}
}


.region-listing {
	margin-top: 30px;
}

.region-img {
	margin-top: 20px;
	margin-bottom: 30px;
}

// NEWS & EVENTS ///////////////////////////////////////////////////////////////////////////////////////////////

.news-events-content {
	.news-events {
		background-image: url('../images/news-events.jpg');
		background-repeat: no-repeat;
		background-position: center top;
		padding-top: 235px;
		@media (min-width: 768px) {
			@include transition(background-position);
			background-image: url('../images/bg-news-events.jpg');
			min-height: 803px;
			padding-top: 0;
		}
	}
	@media (min-width: 768px) {
		.subsection-subtitle {
			margin-top: 0;
		}
	}
}

.news-listing,
.events-listing {
	margin-bottom: 30px;
}

.btn-read-more {
	margin: 15px 0;
	display: inline-block;
}

.full-news-img {
	border: 2px solid #fff;
}

.news-content,
.events-content {
	background-image: url('../images/bg-default-xs.jpg');
	background-repeat: no-repeat;
	background-position: center -125px;
	min-height: 568px;
	@media (min-width: 768px) {
		background-image: url('../images/bg-default.jpg');
		min-height: 581px;
	}
}

.news-header,
.events-header {
	.subsection-subtitle {
		margin-top: 50px;
	}
}

.news-date {
	text-transform: capitalize;
	display: block;
	margin: 10px 0 30px;
	font-weight: 400;
	font-family: 'Muli', sans-serif;
}

.news-footer {
	margin-top: 50px;
}

.news-img,
.events-img {
	@media (min-width: 768px) {
		margin-bottom: 30px;
	}
}

/* Small devices (tablets, 768px and up @screen-sm-min) */
@media (min-width: 768px) {}

/* Medium devices (desktops, 992px and up @screen-md-min) */
@media (min-width: 992px) {}

/* Large devices (large desktops, 1200px and up @screen-lg-min) */
@media (min-width: 1200px) {}


// E-WINERY /////////////////////////////////////////////////////////////////////////////////////////////////////
.form-ewinery {
	font-size: 14px;
	color: $dark;
	padding-bottom: 60px;
	margin-bottom: 30px;
	.small {
		font-size: 13px;
	}
	label {
		color: $darkgold;
		text-transform: uppercase;
		font-family: 'Montserrat', serif;
		letter-spacing: 2px;
		font-weight: 400;
		line-height: 1;
		padding-top: 2px;
	}
	h1 {	
		text-transform: uppercase;
		text-align: center;
		color: $darkgold;
	}
	h3 {
		color: $darkgold;
		text-transform: uppercase;
		font-size: 15px;
		font-weight: 700;
		letter-spacing: 2px;
		font-family: 'Montserrat', serif;
	}
}

.help-block {
	line-height: 1.2em;
}

.bg-login {
	background: url('../images/bg-winery-login.jpg') top center no-repeat;
	min-height: 650px;
	@media (max-width:767px){
		.form-horizontal {
			max-width:270px;
			margin: 0 auto;
		}
	}
}

input[type="number"] {
	width: 40px;
	height:25px;
	padding-left: 5px;
	position: relative;
	z-index: 1;
	-moz-appearance:textfield;
	&:hover {
		-moz-appearance:spinner;
		border: 1px solid #937c5d;
	}
}

.bg-red {
	background: url('../images/bg-red-wine.jpg') top center no-repeat;
	min-height: 650px;
}
.bg-red-2 {
	background: url('../images/bg-red.jpg') top center no-repeat;
	min-height: 650px;
}
.bg-white {
	background: url('../images/bg-white.jpg') top center no-repeat;
	min-height: 650px;
	@media (max-width: 992px) {
		background-position: top right -800px;
	}
}
.bg-gold {
	background: url('../images/bg-gold.jpg') top center no-repeat;
	min-height: 650px;
}

.hr-short {
	width: 100px;
	color: $darkgold;
	background-color: $link;
	height: 1px;
	margin-bottom: 20px;
}

.bg-login .form-control {
	max-width: 270px;
}

.form-control {
	border-radius: 0;
	color: $dark;
	border-color: $darkgold;
	height: 24px;
	margin-top: 8px;
	padding: 0 0 0 5px;
	.control-label {
		text-align: left;
	}
	@media (max-width:768px) {
		margin-top: 0;
	}
}

.form-horizontal .control-label {
	padding-top: 12px;
	text-align: left;
}

.form-ewinery .form-group {
	margin-bottom: 5px;
	position: relative;
	p {
		padding: 5px 0;
		margin: 0;
		line-height: 1;
	}
}

.btn-default {
	color: $darkgold;
	border: 1px solid $darkgold;
	font-size: 12px;
	background-color: transparent;
	border-radius: 0;
	padding: 3px 20px 2px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 5px;
	@include transition;
	&:hover, &:focus { 
		outline: 0;
		background-color: transparent;
		color: $gold;
		border-color: $gold;
	}
}

.btn-cart-add {
	padding: 0;
	color: $gold;
	letter-spacing: 0;
	@include transition(color);
	&:hover, &:focus {
		color: $darkgold;
		outline: 0;
		text-decoration: none;
	}
}


.wide-head {
	text-align: center;
	margin-bottom: 30px;
	margin-top: 50px;
	h2 {
		text-transform: uppercase;
		color: $darkgold;
		font-size: 20px;
		font-family: 'Montserrat', serif;
		background-color: #fff;
		padding: 2px 15px;
		z-index: 20;
		display: inline-block;
	}
}

.line {
	background-color: #f2f2f2;
	height: 8px;
	margin-top: -27px;
	z-index: 1;
}

.big {
	font-size: 18px;
}

.checkbox span {
	margin-top: -5px;
}

.scroll-box {
	max-height: 365px;
	overflow-y: auto;
	font-size: 13px;
	position: relative;
	width: auto;
	padding: 15px;
	max-width: 1000px;
	margin: 20px auto;
	background: #FFF;
	.wide-head {
		margin-top: 0;
		margin-bottom: 0;
	}
}

.mfp-zoom-in {
	/* start state */
	.mfp-with-anim {
		opacity: 0;
		transition: all 0.2s ease-in-out; 
		transform: scale(0.8); 
	}
	&.mfp-bg {
		opacity: 0;
		transition: all 0.3s ease-out;
	}
	/* animate in */
	&.mfp-ready {
		.mfp-with-anim {
			opacity: 1;
			transform: scale(1); 
		}
		&.mfp-bg {
			opacity: 0.8;
		}
	}
	/* animate out */
	&.mfp-removing {
		.mfp-with-anim {
			transform: scale(0.8); 
			opacity: 0;
		}
		&.mfp-bg {
			opacity: 0;
		}
	}
}

.text-danger {
	color: #D44424;
	font-size: 13px;
	line-height: 1.5;
	margin-top: 5px;
}

.form-horizontal .checkbox {
	margin-left: 35px;
}

.bg-login .form-horizontal .checkbox {
	margin-left: 0;
}

#shiptostate-page .wide-head .line, #addtocart-page .wide-head .line {
	margin-top: -38px;
}

#login-page .page-title {
	@media(min-width:768px) {
		margin-top: 150px;
	}
}

select {
	@media(max-width: 767px) {
		margin-bottom: 5px;
	}
}

// CART ////////////////////////////////////////////////////////////////////////////////////////////////////////////
.cart {
	margin-bottom: 30px;
	line-height: 1;
	.title {
		color: $darkgold;
		font-weight: 700;
		margin-bottom: 30px;
	}
	.item {
		margin-bottom: 40px;
	}
	.clearfix {
		margin-top: 8px;
	}
}

.nav-pills>li>a {
	color: $darkgold;
	background-color: transparent;
	opacity: 0.5;
	text-transform: uppercase;
	font-family: 'Montserrat', serif;
	font-size: 15px;
	@include transition(opacity);
	padding: 10px 20px;	
	@media (max-width:768px) {
		display: block;
	}
}

.nav-pills>li>a:hover {
	opacity: 1.0;
	background-color: transparent;
}

.nav-pills>li.active>a, 
.nav-pills>li.active>a:hover, 
.nav-pills>li.active>a:focus {
	color: $darkgold;
	background-color: transparent;
	opacity: 1.0;
}

.nav-pills>li {
	float: none;
	display: inline-block;
}

ul.nav.nav-pills {
	text-align: center;
	margin-bottom: 50px;
}

.cart-img {
	max-height: 150px;
	margin-left: 10px;
}

#viewcart-page {
	@media (max-width:990px) {
		table .btn-default {
			margin-bottom: 5px;
			display: inline-block;
			width: 94px;
			margin-left: auto;
			margin-right: auto;
		}
	}
}

.table>thead>tr>th, 
.table>tbody>tr>th, 
.table>tfoot>tr>th, 
.table>thead>tr>td, 
.table>tbody>tr>td, 
.table>tfoot>tr>td {
	border-top: none;
}

.table>thead>tr>th {
	border-bottom: none;
	padding-bottom: 15px;
	color: $darkgold;
}

td .btn-default:first-child {
	margin-right: 10px;
}

.cart .btn {
	@media (max-width:500px) {
		display: block;
		margin: 15px auto;
	}
}

input[type=radio], 
input[type=checkbox] {
	margin: 8px 0 0;
}

// MENU SYSTEM /////////////////////////////////////////////////////////////////////////////////////////////////////

.menu-section {
	position: fixed;
	top: 0;
	width: 100%;
	@media (min-width: 768px) {	
		position: relative;
	}
}

.footer-top {
	height: 50px;
	background-repeat: no-repeat;
	background-position: left top;
	background-image: url('../images/bg-mobile-nav.png');
	@media (min-width: 768px) {	
		height: 100px;
		background-position: center top;
		background-image: url('../images/bg-footer.png');
	}
}

.menu-toggle {
	float: right;
	color: $gold;
	border-radius: 0;
	border: 0;
	background-color: transparent;
	line-height: 13px;
	padding: 14px;
	&:hover, &:focus {
		text-decoration: none;
		color: $gold;
		border: 0;
		outline: 0; 
	}
	span {
		display: none;
	}
	@media (min-width: 768px) {
		float: left;
		margin-top: 65px;
		padding: 0;
		line-height: 18px;
		span {
			display: inline;
		}
		i{
			float: left;
			margin-right: 10px;
		}
	}
}

.footer-menu {
	background-color: $blue;
	background-image: url('../images/bg-mobile-subnav.png');
	background-repeat: no-repeat;
	background-position: left bottom;
	@media (min-width: 768px) {
		background-image: none;
	}
}

.menu-container {
	overflow: hidden; 
	-webkit-overflow-scrolling: touch;
	position: relative;
	height: 0;
	@include transition(height);
	.menu-open &{
		height: 48px;
		@media (min-width: 768px) {
			height: 94px;
		}
	}
	.menu-open.submenu-open.our-wines-menu-open &{
		@media (min-width: 768px) {
			height: 180px;
		}
	}
	.teaser {
		.menu-scrolled & {
			opacity: 0;
		}
	}
}

.main-menu {
	list-style-type: none;
	margin: 0;
	padding: 0;
	position: relative;
	left: 0;
	white-space: nowrap;
	overflow: auto;
	&::-webkit-scrollbar { 
		display: none; 
	}
	@media (min-width: 768px) {
		font-size: 0;
		text-align: center;
		margin: 30px 0;

	}
	.social-xs {
		display: inline-block;
		@media (min-width: 768px) {
			display: none;
		}
		a{
			display: inline;
			i{
				position: relative;
				top: 4px;
			}
		}
		.icon-social {
			margin: 0;
		}
	}

	li{
		display: inline-block;
		margin-left: 10px;
		&:first-child{
			margin-left: 0;
		}
		@media (min-width: 768px) {
			font-size: 17px;
			margin: 0 15px;
		}
		a {
			display: block;
			color: $gold;
			@include transition(color);
			padding: 10px 3px;
			font-weight: 400;
			&:hover, &.active, &:focus {
				color: #fff;
				text-decoration: none;
			}
		}
	}
	.submenu-open & {
		left: -100%;
		@media (min-width: 768px) {
			left: -750px;
		}
		@media (min-width: 992px) {
			left: -970px;
		}
		@media (min-width: 1200px) {
			left: -1170px;
		}
	}
	@include subMenuTransition;
}

.submenu {
	position: absolute;
	left: 100%;
	top:0;
	width: 100%;
	@media (min-width: 768px) {
		left: 750px;
	}
	@media (min-width: 992px) {
		left: 970px;
	}
	@media (min-width: 1200px) {
		left: 1170px;
	}
	ul{
		list-style-type: none;
		padding: 0;
		margin: 0;
		li {
			a {
				color: $gold;
				@include transition(color);
				padding: 0;
				font-weight: 400;
				display: inline-block;
				&:hover, &.active, &:focus {
					color: #fff;
					text-decoration: none;
				}
			}
		}
	}
	.submenu-open & {
		left: 0;
	}
	@include subMenuTransition;
}

.menu-back-container {
	opacity: 0;
	@include transition(opacity, 250ms);
	display: table-cell;
	vertical-align: middle;
	font-size: 18px;
	white-space: nowrap;
	.submenu-open:not(.submenu-transitioning) & {
		opacity: 1;
	}
	.our-wines-menu-open & {
		height: 120px;
	}
} 

.submenu-content {
	display: none;
	margin: 30px 0;
	.our-wines-menu-open &.our-wines-menu{
		display: block;
	}
	.visit-us-menu-open &.visit-us-menu{
		display: block;
	}
	.pairing-menu-open &.pairing-menu{
		display: block;
	}
	.about-menu-open &.about-menu{
		display: block;
	}
	.news-events-menu-open &.news-events-menu{
		display: block;
	}

	.submenu-list-inline {
		font-size: 0;
		text-align: center;
		margin-top: 3px;
		li{
			display: inline-block;
			font-size: 16px;
			line-height: 1.55em;
			margin: 0 15px;
			
			@media (min-width: 768px) {
				margin: 0 5px;
				font-size: 13px;
			}
			@media (min-width: 992px) {
				margin: 0 13px;
				font-size: 16px;
				transition: font-size 500ms, margin 500ms;
			}
			@media (min-width: 1200px) {
				margin: 0 15px;
			}
		}
	}
}

.menu-img {
	float: right;
}

.submenu-list {
	line-height: 1.55em;
} 

.submenu-listing-title {
	padding: 0;
	font-weight: 600;
	font-family: 'Average', serif;
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: $gold;
}

.menu-back-item {
	margin: 30px 0;
	border-right: 1px solid #606065;
}

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

	.wine-name {
		font-family: 'Montserrat', sans-serif;
		color: $darkgold;
	}

	.mobile-table {
		margin-top: 30px; 
	}

    /* Force table to not be like tables anymore */
    .mobile-table table, 
    .mobile-table thead, 
    .mobile-table tbody, 
    .mobile-table th, 
    .mobile-table td, 
    .mobile-table tr { 
    	display: block; 
    }

	/* Hide table headers (but not display: none;, for accessibility) */
	.mobile-table thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	// .mobile-table tr { border: 1px solid #ccc; }

	.mobile-table td { 
		/* Behave  like a "row" */
		border: none;
		// border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
		white-space: normal;
		text-align:left;
	}

	.mobile-table td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}

	/*
	Label the data
	*/
	.mobile-table td:before { content: attr(data-title); }
}


// AGEGATE ////////////////////////////////////////////////////////////////////////////////////////////////////////////

.agegate-container {
	max-width: 600px;
	text-align: center;
	img {
		margin-top: 50px;
		margin-bottom: 50px;
	}
	.btn-default {
		margin: 30px 0 50px;
		display: inline-block;
	}
}