/* Serenity Valley Winery stylesheet */
/* changes should also be made to the FB tab stylesheet on integritivity.com */
html{
height: 100%;				/* Force vertical scrollbars in Moz + Opera to prevent 'jumping' */
margin-bottom: 1px;
overflow-y: scroll;			/* this line is for IE */
}

.visually-hidden { 
    border: 0!important;
    padding: 0!important;
    margin: 0!important;
    position: absolute !important;
    height: 1px!important; 
    width: 1px!important;
    overflow: hidden!important;
    clip: rect(1px 1px 1px 1px)!important; /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px)!important; /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%)!important; /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap!important; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

body {
	background-color: #eee;
	padding: 0; 
	margin: 0;
	text-align: left;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}


/* ElfSight Event Listing */
.eapp-events-calendar-list-item-imageContainer {
    width: unset!important;
}
.eapp-events-calendar-date-element-item {
    color:#4b222a!important;
}

/*THRYV POPUP BOX FOR PHONES */
#livesite_active_engage { bottom: 50px!important;} /* make sure it clears taskbar of a phone */
#ls_cboxOverlay {background: #fff!important; opacity: 0.0!important; filter: alpha(opacity=0)!important;}
#livesite_active_engage .ls-close {left: 15px!important;  right: auto!important;}
#livesite_active_engage {margin: 10px 50px 0 10px!important;  width: 300px!important; }
.ls-content img {display: none!important;}
.ls-ae-title {  font-size: 14px!important; font-weight: bold; }
#livesite_active_engage div { text-align: center!important;}
#livesite_active_engage .ls-title {text-align: center!important;}
.ls-font-size-T {font-size: 10px!important;}
#livesite_active_engage .ls-content { padding: 20px!important;}
#livesite_active_engage .ls-actions-C { width: unset!important; float: unset!important;}
#livesite_active_engage .ls-action-C { width: 19%!important; }
#livesite_active_engage .ls-action-C .ls-action {  width: 29px!important;  height: 29px!important;}
#livesite_active_engage .ls-inline-actions {padding: 0px 10px 9px!important;}
#livesite_active_engage .ls-action-C .ls-action:before {line-height: 29px!important;}
#livesite_engage_button a.ls-engage-button { max-width: 250px!important;}



p {text-align: left;}

img { max-width: 100%; height: auto;}
img { border: 0px; padding: 0px;}

/* make all images inside fadeshow1 fill their container */
#fadeshow1 img { width: 100% !important; height: auto; background-color: transparent; }

* { margin:0; padding:0;}     	/* turns off extra spacing around paragraphs*/


a  {color:#4b222a;	text-decoration: none;}
a:hover{	color:#DDC585;}

.Header {
	background-color: #4b222a;
	align-content: center;
	position: relative;
	}

.BannerPhoto {	align-content: center;	}
.BannerPhoto img { width: 100%}


h1{
	color: #222a4b;
	padding-top: 20px;
	padding-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-style: italic;
	font-weight: normal;
}
h2{
	color: #222a4b;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: none;
	text-align: center;
}
h3{
	display:inline; 
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #DDC585;
	text-align: center;
}

.address{
	clear: both;
	padding-top: 10px; padding-bottom: 10px;
	color:#4b222a;
	text-align:center;
	vertical-align: middle;
	font-weight:bold;
}

.BodyText {
	color:#000;
	text-align: left;
	overflow: hidden;
}
.BodyTextWhite {
	color:#fff;
	font-size: 22px!important;
}

.bullets {
	 list-style-type:disc; 
	 margin-left: 30px;
}


a.buttonInline {
    background-color:#DDC585; 
	border-radius: 20px;
	border: 1px solid #DDC585;
	display:inline-block;
	font-size:17px;
	padding: 10px 20px 10px 20px!important;
    margin-top: 10px!important;
    margin-right: 20px!important;
 text-decoration:none!important;
 font-weight:300!important;
 color:#FFFFFF!important;
 text-align:center!important;
 transition: all 0.2s!important;
}

a.buttonInline:hover {
 background-color:#4b222a!important;
    color:#FFFFFF!important;
}


.Centered { margin: auto; }
.Clear { clear: both; }
.ClearL { clear: left;}

.ColorGreen { color: #2a4b22;}
.ColorBlue { color: #222a4b;}
.ColorGray { color: #b0b0b2;}
.ColorGray3 { color: #ccc;}
.ColorWine { color: #4b222a;}
.ColorWhWine { color: #DDC585;}

.ContentsCentered {text-align: center!important;}
.ContentsLeft {text-align: left;}
.ContentsRight {text-align: right;}

.copyright{
	color:#ffffff;
	text-align:center;
	padding-top: 10px; padding-bottom: 10px;
	display: inline-block;
	margin: auto;
}

.EventsTable td { height: 30px; vertical-align: top;}
.EventsTablePast td { height: 16px; vertical-align: top;}

.FloatL, 
.FloatL .MobileCenter {float:left; margin-right: 10px;}
.FloatR {float:right; margin-left: 10px;}

img.FrameGray {padding: 5px;}

.FrameGray {
	background-color: #777; 
	background-repeat:repeat; 
	text-align: center;
	vertical-align:top; 
	-moz-border-radius-topleft: 7px;
	border-top-left-radius: 7px;
	-moz-border-radius-topright: 7px;
	border-top-right-radius: 7px;
	-moz-border-radius-bottomleft:7px;
	border-bottom-left-radius: 7px;
	-moz-border-radius-bottomright: 7px;
	border-bottom-right-radius: 7px;
	/* end of rounded borders */
}

.KeepTogether {display: inline-block;}

.hiddenPic {display:none;}

input[type="text"], input[type="textarea"]   {line-height: 2em!important;} 
input[type="submit"] { padding: 5px 10px 5px 5px; font-weight: bold; font-size: 120%;}

.Link_Address:link, .Link_Address:visited, .Link_Address:active {
	color:#4b222a;
	text-decoration: none;
	font-weight:bold;
}
.Link_Address:hover {
	color:#DDC585;
	text-decoration: none;
	font-weight:bold;
}

.Link_Copyright:link, .Link_Copyright:visited, .Link_Copyright:active  {
	color:#fff;
	text-decoration: none;
}
.Link_Copyright:hover{
	color:#DDC585;
	text-decoration: none;
}


.Link_White:link, .Link_White:visited {
	color:#fff;
	text-decoration: none;
}
.Link_White:hover, .Link_White:active {
	color:#DDC585;
	text-decoration: none;
}

.Link_Wine:link, .Link_Wine:visited {
	color:#4b222a;
	text-decoration: none;
}
.Link_Wine:hover, .Link_Wine:active {
	color:#DDC585;
	text-decoration: none;
}

.map {width: 600px; height: 450px;}

.NavBar {
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px; 
	margin-bottom: 30px;
	text-align: left;
}

.PhotoGallery img { border: 0px; padding: 5px; width: 100%;}
.PhotoGallery {max-width: 700px;}
/*
.GalleryPhotoSingle { float: left; padding-right: 20px; padding-bottom: 10px; }
.GalleryPhotoSingle img { width: 100%; }
.GalleryPhotoSingleCaption { display:block;  }
*/
.GalleryPhotoContainer {
  display: flex;
  justify-content: center;
}
.GalleryPhotoInside {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.GalleryPhotoSingle {
  border: none;
  width: 300px;
  margin: 5px;
}

.PhotoTileFlexBox {display: flex; width: 100%; flex-direction: row; justify-content: space-between; align-items:center; align-content: center;}
.PhotoTileChild { position: relative;}
.PhotoTileCaption {
	left: 0;
    position:absolute;
    text-align:center;
    top: 30px;
    width: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 800;
	font-size: 150%;
	text-shadow: 1px 1px #000;
	z-index: 500;
	}
a.PhotoTileCaption:hover {
	color:#DDC585;
	text-decoration: none;
	text-shadow: 1px 1px #000;
	z-index: 500;
	}

	
.preload {
	display: none;
    visibility: hidden;
    position: absolute;
    left: -999em;
}

.SectionWhite {	background-color:#fff;}
.SectionWhitish {background-color:#eee; padding-top: 20px;}
.SectionGray {	background-color:#777;}
.SectionGreen {	background-color:#222a4b;}
.SectionWine {	background-color:#4b222a; padding-top: 20px; padding-bottom: 20px;}
.SectionWineLeather {background-image:url(images/graphics/BkWine.jpg); background-repeat: repeat;  padding-top: 20px; padding-bottom: 20px;}


.SidePanelR {border: 3px solid #b2caf0;	text-align: center; margin-bottom: 10px;	}
.SidebarHeading {font-weight: bold; }
.SidebarReviews {
	font-style: italic; 
	margin-right: 5px; 
	margin-left: 5px;
	color:#777;
}

table { padding: 0px;}
table td {padding-right: 5px; padding-left: 5px; vertical-align: top;}
.TableCollapse {border-collapse: collapse;}
.TableLabels img margin-right: 10px;
.TableFixed {table-layout: fixed;}
.table700 {   display: block; max-width: 700px;   border-collapse: collapse; margin: auto;   }

.TopBar {text-align: center; padding-top: 5px; padding-bottom: 5px;}

.vcard {display: inline-block;}
.VertBottom { vertical-align: bottom;}
.VertTop { vertical-align: top;}
.VertMid { vertical-align: middle;}

.W1000 {max-width: 1000px; margin: auto;}
.W1040 {max-width: 1040px; margin: auto;}
.W1020 {max-width: 1020px; margin: auto;}
.Footer {background-color:#222a4b; overflow: hidden; margin-top: 20px;}
/*
.Footer {background-image:url(images/graphics/BkGrayDk.jpg); background-repeat: repeat; }
*/


/* DROPDOWN MENU THAT WORKS PROPERY ON IPHONES AND ANDROID ==================== */
/* must be combined with dropdown menu fix in header, jquery-1.7.min.js */
.MainMenuContainer {
	align-content: center;	
	padding-top: 10px;
	padding-bottom: 10px;
}

#mainmenu {
	color: #fff;
	text-align: center;	
	padding:0;
}

#mainmenu a {			color: #FFFFFF;	text-decoration:none; font-family: Arial, Helvetica, sans-serif;}
#mainmenu a:hover { 	color: #DDC585; text-decoration:none; font-family: Arial, Helvetica, sans-serif;}
	
	
/* - - - ADxMenu:BASIC styles [ MANDATORY ] - - - */
/* remove all list stylings */
/* #mainmenu, #mainmenu ul {	margin:0;	padding:0;	border:0;	list-style-type:none;	} */

#mainmenu ul {
	margin-top: 0px;
	margin-bottom: 10px;
	padding: 5px 5px 5px 5px;
	text-align: left;
	background-color: #4b222a;
}

#mainmenu li {
	margin: 0 1px 0 0;
	padding: 5px 13px;	/* PADDING BETWEEN LINKS */
	font-weight: bold;
	vertical-align: middle;
    border: 0;
	display: inline;
	float: left;	/* move all main list items into one row, by floating them */
	position: relative;/* position each LI, thus creating potential IE.win overlap problem */
	z-index: 5;/* thus we need to apply explicit z-index here... */
	vertical-align:middle;
}

#mainmenu ul li {  display:block;	float:none;}
#mainmenu li:hover {
	z-index: 10000;		/* ...and here. this makes sure active item is always above anything else in the menu */
	white-space: normal;	/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present) */
	color: #DDC585;
}
#mainmenu li li {
	float: none;	/* items of the nested menus are kept on separate lines */
	padding: 10px 5px 0px 15px;
	width: 190px; 
}
/* #mainmenu ul > li > ul {padding-bottom: 10px;} */
#mainmenu li li:last-child  { padding-bottom: 10px;}

#mainmenu ul {
	visibility:hidden;	/* initially hide all submenus. */
	position:absolute;
	z-index:10;
	left:0;				/* while hidden, always keep them at the top left corner, */
	top:0;				/* to avoid scrollbars as much as possible */
}

#mainmenu li:hover>ul { 	visibility:visible;	/* display submenu them on hover */	top:100%;			/* 1st level go below their parent item */}
#mainmenu li li:hover>ul {/* 2nd+ levels go on the right side of the parent item */	top:0;	left:100%;}

/* -- float.clear --  force containment of floated LIs inside of UL */
#mainmenu:after, #mainmenu ul:after { 	content:".";	height:0;	display:block;	visibility:hidden;	overflow:hidden;	clear:both;}
#mainmenu, #mainmenu ul {/* IE7 float clear:*/	min-height:0;}
/* -- float.clear.END --  */

/*
#mainmenu ul { 	width:180px; }
#mainmenu ul ul {	width: 300px;} */
#mainmenu li.hidden {	display:none;}

/* Large devices */ 
@media (min-width: 1020px) { 
	.address, .Link_Address {font-size: 13px;}
	.BodyText {	font-size: 16px; line-height: 22px;}
	.copyright { font-size: 16px;}
	.FontShrink {font-size: 75% !important;}
	.Link_Copyright {font-size: 16px;}
	h1{	font-size: 24px; line-height: 30px;}
	h2{	font-size: 20px; line-height: 20px;}
	h3{	font-size: 24px; line-height: 28px;}
	.hours { font-size: 18px; font-weight: bold; line-height: 26px;}
	.BannerImage {padding-top: 20px;}	
	.Main {background-color: #fff; padding-left: 20px; padding-right: 20px; }
	.MobileHide {display: inline-block;}
	.MobileShow {display: none;} 
	.PhotoGallery {font-size: 10px;}
	#mainmenu li { font-size: 18px;}
	#mainmenu li li { font-size: 18px; line-height: 20px; }	
	.StoreLocations { font-size: inherit; line-height: 150%;}
	.FooterColumn {width: 25%; float: left;}
}
/* Tablets to Desktops */ 
@media all and (max-width: 1019px) {
	.address, .Link_Address {font-size: 12px; line-height: 16px;}
	.BodyText {	font-size: 14px; line-height: 20px; padding-left: 10px; padding-right: 10px;}
	.copyright { font-size: 14px; display: inherit;}
	.Link_Copyright {font-size: 14px;}
	.FontShrink {font-size: 70% !important;}
	h1{	font-size: 18px;	line-height: 22px;}
	h2{	font-size: 18px;	line-height: 18px;}
	h3{	font-size: 20px;	line-height: 20px;}
	.hours { line-height: 14px;}
	.BannerImage {padding-top: 20px;}	
	.Main {background-color: #fff; padding-left: 20px; padding-right: 20px; }
	.MobileShow {display: inline-block;}
	.MobileHide {display: none;}
	.PhotoGallery {font-size: 10px;}
	#mainmenu li { font-size: 14px;}
	#mainmenu li li { font-size: 14px; line-height: 18px;}
	.StoreLocations { font-size: 14px; }
	.FooterColumn {width: 50%; float: left; padding-left: 5px; padding-right: 5px;}
} 

/* Phones */ 
@media all and (max-width: 767px) {
	.address, .Link_Address {font-size: 16px; line-height: 26px;}
	.BodyText {	font-size: 14px; line-height: 18px;}
	.copyright { font-size: 14px; display: inherit;}
	.Link_Copyright {font-size: 14px;}
	.FontShrink {font-size: 70% !important;}
	h1{	font-size: 18px; line-height: 22px;}
	h2{	font-size: 18px; line-height: 18px;}
	h3{	font-size: 18px; line-height: 18px; display: inherit;}
	.hours { font-size: 14px; line-height: 14px;}
	.BannerImage { padding-top: 5px;}	 /* make same as Main padding */	
	.Main { background-color: #fff; padding-left: 5px; padding-right: 5px; }	
	.MobileHide { display: none;}
	.MobileShow { display: inline-block;}
	.PhotoGallery { font-size: 10px;}
	#mainmenu li { font-size: 15px;}
	#mainmenu li li { font-size: 12px; line-height: 18px; vertical-align: middle;}
	.StoreLocations { font-size: 14px; }
	.FooterColumn {width: 48%; float: left; padding-left: 5px; padding-right: 5px;}
} 
@media all and (max-width: 600px) {
	.FooterColumn {width: 100%; float: none; text-align: center; padding-left: 15px; padding-right: 15px;}
	.map {width: 100%; height: auto;}
	.MobileResize {width: 90%; float: none!important; text-align: center;}
} 

@media all and (min-width: 500px){ 
v	.SlideWrapper {float: left; width: 380px; height: 250px; }
	.SlideContainer {width: 360px; height: 235px; padding-top: 5px;}
	#fadeshow1{ width: 350px !important; height: 230px !important;} /* must be important to override slideshow settings */

}
@media all and (max-width: 499px){
    .MobileCenter {width: 100%; float: unset; margin-left: auto; margin-right: auto}
	.PhotoTileFlexBox {justify-content: space-around;}
	.FooterColumn {width: 100%; float: none; text-align: center; padding: 5px;}
	#mainmenu li { padding: 5px 5px;	/* PADDING BETWEEN LINKS */}
    /* TURNED THIS OFF BECAUSE IT IS NOT WORKING. FADESHOW IS NOT GETTING THE PROPER WIDTH/HEIGHT. */
    .SlideWrapper {float: left; clear: left; width: 220px; height: 151px; padding-top: 5px; margin-top: 10px; display: none;}
	.SlideContainer {width: 200px; height: 131px; padding-top: 5px; padding-left: 5px;  display: none;}
	 #fadeshow1{ width: 200px !important; height: 131px !important; display: none;}
}


/* very small devices ONLY HAVE A FEW DIFFERENCES to override the above */ 
@media all and (max-width: 480px) { 
	.PhotoTileFlexBox {justify-content: column;}
}

/* very small devices ONLY HAVE A FEW DIFFERENCES to override the above */ 
@media all and (max-width: 320px) {
	.FontShrink {font-size: 50% !important; line-height: 48px;}
	.hours { font-size: 14px; line-height: 14px;}
}