@charset "utf-8";
 
/*
   Design sheet Sycamore Hill Venue website
   Author: Dianna Main
	   Date:   10/26/24
	  	   Filename: stylesheetSH.css
	   
	   url:    www.sycamorehillvenue.com
	  
	   This sheet if for the basic styles used throughout the entire website  
			used for ALL pages and all devices, 
			mobile specific see stylesheet1SH.css,
			table specific see tablestylesSH.css,
			print specific see printstylesSH.css
*/

/* HTML Styles will only see if width exceeds 1820px =========================*/

html {
	background-color: white;
}

/* Layout styles for a centered body with drop shadows =======================*/
body {
	display: block;
	margin-left: auto;
	margin-right: auto;
	min-height: 100%;
	width: 95%;  /*change back to 100% when I get done editing*/
	min-width: 360px;
	background-color: white;
	
	border-top: 4px solid #a2b099; /*I can remove these borders when I finish editing=====*/
	border-left: 4px solid #a2b099;
	border-right: 4px solid #a2b099;
}

/*General Fonts used====================================================================*/

	h1, p, address, li, label, input, button, a {
	font-family: "adobe-garamond-pro", serif;
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	}
	
	h2, legend {
	font-family: "fave-script-pro", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	}
	
	


/* Header Styles setting header to fill the width with an image or video==========HEADER STYLE SECTION=======*/
body > header {
	width: 100%;
}

/*word press style header*/
.headerVidContainer{
	display: flex;
	width: 100%;
	min-height: 800px; /*video height must be changed here and on .back-video */
	background-color: white;
	position: relative;
	align-items: center;
	justify-content: center;
}

.headerImgContainer{
	display: flex;
	width: 100%;
	min-height: 450px; /*image height must be changed here and on .back-image */
	background-color: #838f7b;
	position: relative;
	align-items: center;
	justify-content: center;
}


/*first layer of the header z-index0*/
.back-video{
	position: absolute;
	height: 800px; /*img height must change here and .headerVidContainer*/
	width: 100%;
	right: 0;
	bottom: 0;
	object-fit: cover;
	z-index: 0;
}

.back-image{
	position: absolute;
	height: 450px; /*video height must change here and .headerImgContainer*/
	width: 100%;
	right: 0;
	bottom: 0;
	object-fit: cover;
	opacity: .75;
	z-index: 1;
}

img#aboutHeader {
	opacity: .45;

}

/* Navigation Basic Main Menu Styles horizontal at the top of header==============NAVIGATION WITHIN THE HEADER========*/
/*Navigation container*/
/*the container for the top navigation row the index is to keep it on top of video
the locaton is top right corner of the header*/
nav.horizontal {
	display: block;
	float: left;
 	background-color: transparent;
	width: 100%;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}

	/*hiding the navigation icon on widths > 667px*/
	nav.horizontal > a > img {  
		display: none;
	}
	

/*contains the left and right nav section on top of homepage*/
nav.horizontal li {
	display: block;
	float: left;
	padding-top: 30px;
}


/*right side navigation list only, on top of homepage*/
li#rightNav {
	display: block;
	float: left;
	text-align: center;
	background-color: transparent;
	width: 14%;
}


/*left side logo in header set as navigation to homepage*/
li#leftNav {
	width: 30%;
	padding-top: 1%;
	padding-left: 4%;
}


/*text inside the list box for the top navigation====================*/
ul.mainMenu > li > a {
	display: inline-block;
	font-size: 2.0em;
	color: white;
	font-family: "fave-script-pro", sans-serif;
	font-weight: 200;
	font-style: normal;
	}
	

/*header Main title displays on top of header img or video all media all screens==============*/
.headerTitle {
	padding-top: 150px;
	display: inline-block;
	width: 100%;
	text-align: center;
	line-height: 1.2em;
	color: white;
	font-size: 48px;
	z-index: 1;
}

/*Main title in the header*/
	h1#header {
		font-size: 3.2rem;
	}

/*displayed on top of video as layer 2*/
h2#headerSubtitle {
	display: inline-block;
	width: 100%;
	color: white;
	font-size: 4.1rem;
	opacity: .85;
	z-index: 2;
}

h2#aboutH2 {
	padding-left: 10%;
	padding-right: 10%;
}

h1#aboutH1 {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 2.8rem;
	line-height: 3.2rem;
	color: #a2b099;
	padding: 4%;
	padding-bottom: 1%;
	padding-left: 10%;
	padding-right: 10%;
}

h1#galleryH1 {
	display: block;
	float: left;
	width: 100%;
	text-align: center;
	font-size: 2.4rem;
	line-height: 2.8rem;
	color: #a2b099;
	padding: 2%;
	padding-left: 15%;
	padding-right: 15%;
}
/*contact page verse for desktop*/
div#contactVerse {
	padding: 8% 20%;
}

div#contactVerse h1{
	line-height: 30px;
	font-size: 30px;
	padding-left: 10%;
}
div#contactVerse h2{

	font-size: 50px;
	line-height: 50px;
}
div#contactVerse p{
	padding-right: 10%;
	font-size: 28px;
}

/*header logo*/
img#headerLogo {
	display: block;
	float: left;
	margin-left: auto;
	margin-right: auto;
	width: 100%;

	max-height: 200px;
	max-width: 200px;
	z-index: 2;
}
/*Icon is hidden on desktop and tablet, it is used only for the mobile dropdown
see mobile only in stylesheet1SH.css for styling*/
	img#headerLogoSpan {
		display: none;
	}


/*=============================================================================================================*/
/*page links in the body using for navigation*/
a#linkButtonLight {
	text-decoration: none;
	display: inline-block;
	width: 10rem; /*the width of the border rem makes it responsive*/
	color: white;
	font-size: 24px;
	font-family: "adobe-garamond-pro", serif;
	font-weight: 400;
	font-style: normal;
	border: 2px solid white;
	padding: 0;
	border-radius: 50px;
	line-height: 40px;
	margin-top: 10px;
	z-index: 2;
}

a#linkButtonDark {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	text-decoration: none;
	width: 10rem; /*the width of the border rem makes it responsive*/
	color: #838f7b;
	font-size: 24px;
	font-family: "adobe-garamond-pro", serif;
	font-weight: 600;
	font-style: normal;
	border: 2px solid #838f7b;
	padding: 0;
	border-radius: 50px;
	line-height: 40px;
	margin-top: 10px;

}
	
.textBlockHeader {	
	width: 100%;
	text-align: center;
	color: #838f7b;
	padding-top: 3%;
	padding-bottom: 3%;
	font-size: 45px;
	line-height: 40px;
	font-family: "fave-script-pro", sans-serif;
	font-weight: 400;
	font-style: normal;
}
	
.textBlockText {
	padding-left: 5%;
	padding-right: 5%;
	text-align: center;
	color: #838f7b;
	font-size: 20px;
	line-height: 1em;
	font-family: "adobe-garamond-pro", serif;
	font-weight: 400;
	font-style: normal;
}	
	
.flexContainer {
		padding-top: 0;
		display: flex;
		width: 100%;
		flex-wrap: nowrap;
		background-color: white;
}
	
.flexContainer > div {
		display: block;
		background-color: white;
		align-self: center;
		width: 100%;
		margin: 1%;
		padding: 10px;
		font-size: 30px;
}

/*required to make the sunset slider work*/
img {
	width: 100%;
	height: auto;
}

/*images for the flex containers*/
img.flexImage {
	display: block;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 3%;
}

/*border around the about image only*/
div#aboutImg > img{
	padding: 0;
	padding-right: 20px;
	padding-bottom: 20px;
	background-color: #d1a197;
	border-top: 34px solid #a2b099;
	border-left: 34px solid #a2b099;

}



/*the pink lines you see above and below the paragraphs*/
img.dividerImage {
	display: block;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	max-width: 500px;
	max-height: 100px;
	padding: 3%;
}


/*Only using this image on mobile*/
img#homeImgMobile {
	display: none;
}



/*section below is for the flex images contained in a row*/
.flexImageRow {
  display: flex;
  flex-wrap: nowrap;
  background-color: #f1f1f1;
}

.flexImageRow > div {
  background-color: DodgerBlue;
  color: white;
  width: 100%;
  margin: 20px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

.flexImageRow > div > img{
  width: 100%;
  max-height: 550px;
}


		

/*paragraph styles ========================================================================================*/

p {
	font-size: 18px;
	font-family: "adobe-garamond-pro", serif;
	font-weight: 100;
	font-style: normal;

}

h2 {
	
	font-size: 45px;
	font-family: "fave-script-pro", sans-serif;
	font-weight: 200;
	font-style: normal;
}


/*LIST styles ========================================================================================*/

.amenitiesList li {
	font-size: 24px;
	line-height: 32px;
	color: #838f7b;
	list-style-type: square;
	list-style-position: inside;
}



/*Contact Page Styles============================================================*/

/*Div row 1 contact page*/ 
div#contactEmail {
	width: 100%;
	margin: 0;
	font-size: 20px;
	text-align: center;
}

div#contactPhone {
	width: 100%;
	margin: 0;
	font-size: 20px;
	text-align: center;
}

div#contactAddress {
	width: 100%;
	margin: 0;
	font-size: 20px;
	text-align: center;
	
}


div#contactFlex {
	width: 50%;
}

/*ABOUT PAGE STYLES FOR THE SUNSET SLIDESHOW====================================================*/
/*the slides in the sunset slideshow*/
.mySlides {
	width: 100%;
	}

/*flex row styling*/
.flexRow {
	display: flex;
	width: 100%;
	padding-top: 0;
	padding-bottom: 5%;
}

/* Slideshow container */
.slideshow-container {
  max-width: 800px;
  position: relative;
  margin: auto;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/*dots on the sunset slideshow color*/
.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 2.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}


/*below section is for the responsive slideshow on the GALLERY page only================================*/
/*added this to contain the slideshow*/
.flexContainerGallery {
	position: relative;
	width: 100%;
	height: 800px;
}

.container {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: white;
}

.slider {
	position: absolute;
	inset: 2% 15% 9% 9%;
}

.slider .slides {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 240px;
	height: 320px;
	background: var(--img);
	background-size: cover;
	background-position: center;
	border-radius: 20px;
	box-shadow: 0 25px 50px rgba(0,0,0,0.5);
}

/*below added the large pic*/
.slider .slides:nth-child(1),
.slider .slides:nth-child(2)
{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transform: translateY(0); 
		box-shadow: 0 25px 50px rgba(0,0,0,0);
		background-size: cover;
}

.slider .slides:nth-child(3)
{
	left: calc(65% + 240px);
	background-size: cover;
}
.slider .slides:nth-child(4)
{
	left: calc(65% + 500px);
	background-size: cover;
}
.slider .slides:nth-child(5)
{
	left: calc(65% + 760px);
	background-size: cover;
}
.slider .slides:nth-child(6)
{
	left: calc(65% + 1020px);
	background-size: cover;
	opacity: 0;
}
.slider .slides:nth-child(7)
{
	left: calc(65% + 1280px);
	background-size: cover;
	opacity: 0;
}
.slider .slides:nth-child(8)
{
	left: calc(65% + 1540px);
	background-size: cover;
	opacity: 0;
}
.slider .slides:nth-child(9)
{
	left: calc(65% + 1800px);
	background-size: cover;
	opacity: 0;
}
.slider .slides:nth-child(10)
{
	left: calc(65% + 2060px);
	background-size: cover;
	opacity: 0;
}

.slider .slides:nth-child(11)
{
	left: calc(65% + 2320px);
	background-size: cover;
	opacity: 0;
}
.slider .slides:nth-child(12)
{
	left: calc(65% + 2580px);
	background-size: cover;
	opacity: 0;
}
.slider .slides:nth-child(13)
{
	left: calc(65% + 2840px);
	background-size: cover;
	opacity: 0;
}
.slider .slides:nth-child(14)
{
	left: calc(65% + 3100px);
	background-size: cover;
	opacity: 0;
}
.slider .slides:nth-child(15)
{
	left: calc(65% + 3360px);
	background-size: cover;
	opacity: 0;
}

.slider .slides:nth-child(16)
{
	left: calc(65% + 3620px);
	background-size: cover;
	opacity: 0;
}

.slider .slides:nth-child(17)
{
	left: calc(65% + 3880px);
	background-size: cover;
	opacity: 0;
}

.slider .slides:nth-child(18)
{
	left: calc(65% + 4140px);
	background-size: cover;
	opacity: 0;
}

.slider .slides:nth-child(19)
{
	left: calc(65% + 4400px);
	background-size: cover;
	opacity: 0;
}

.slider .slides:nth-child(20)
{
	left: calc(65% + 4660px);
	background-size: cover;
	opacity: 0;
}


/*Note if I add pictures I need to add 260px to the above*/
/*arrow buttons for the slideshow on gallery page*/
.buttons
{
position: absolute;
bottom: 15px;
display: flex;
gap: 20px;	
}

.buttons span
{
	position: relative;
	width: 50px;
	height: 50px;
	background: black;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
}

.buttons span::before 
{
	content: '';
	position: absolute;
	width: 15px;
	height: 15px;
	border-top: 4px solid white;
	border-left: 4px solid white;
	transform: rotate(315deg) translate(2px, 2px);
}

.buttons span:nth-child(2)::before 
{
	transform: rotate(135deg) translate(2px, 2px);
	
}

.buttons span:active
{
	opacity: 0.5;
}


/* CONTACT FORM STYLES ===================================================================================================================*/

div#contactRow2 {
	display: block;
	float: left;
}

fieldset {
padding: 5%;
background-image: url("img/formBackground.jpg");
 background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

legend {
	font-size: 32px;
	text-align: center;
	color: #807570 ;
}

label {
	font-size: 20px;
	text-align: center;
	color: #807570 ;

}

input {
	line-height: 30px;
	margin-left: 5px;
	
}

input#name, input#email {
	width: 36%;
	
}

input#number {
	width: 100px;
}

/*font in dropdown selection box*/
select#eventType {
	font-size: 16px;
	color: #807570;
	line-height: 32px;
	padding: 5px;
}

div.formRow {
	padding-top: 2%;
	padding-bottom: 2%;
}

textArea#comment {
	width: 80%;
}

input#wordCount {
	width: 80px;
	line-height: 18px;
}
 
button#submitForm, button#clearForm {
	font-size: 20px;
	text-align: center;
	color: #807570 ;
	padding: .3%;
	margin: 1%;
}

img#contactDiv, img#contactDiv1, h2#contactH2 {
	padding: 0px;
}

/* Booking Page Styles ===================================================================================================================*/

iframe#booking{
	display: block;
	width: 100%;
	padding: 0;
	margin-left: auto;
	margin-right: auto;
}

iframe#google{
	display: block;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
}

/* Footer Styles ===================================================================================================================*/
/*footer container for all pages all media types*/
footer  {
	display: block;
	width: 100%;
	background-color: RGBA(128,117,112,.30); /*dark brown 30% obaque*/
	border-top: 4px solid #a2b099;
	border-bottom: 4px solid #a2b099;
}

div#footCopyright {
	display: block;
	float: left;
	width: 100%;
	color: #807570;
	text-align: center;
	padding-bottom: 8px;
}

div#footCopyright a {
	font-size: 20px;
	color: #807570;
}

div#footCopyright p {
		font-size: 20px; 
	color: #807570;

}


.flexFooter {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 1%;
padding-top: 1%;
}

.footContainer {
  width: 100%;
  text-align: right;
  padding: 1.5%;
}

li.footerNav {
	width: 100%;
}
 
a {
	width: 100%;
}


h1#fVerse1, h2#fVerse2, p#fVerse3 {
	text-align: center;
	line-height: 22px;
	color: #807570;
}

h1#fVerse1 {
	font-size: 20px;
	text-align: left;
	padding-left: 20%;
}

p#fVerse3 {
	text-align: right;
	padding-right: 20%;
}

/*sizing the footer social images*/
img#socialIcons {
	max-height: 40px;
	max-width: 40px;
}

li.footerNav {
	text-align: left;
	font-size: 24px;
	font-family: "adobe-garamond-pro", serif;
	font-weight: 400;
	font-style: normal;
	padding: 10px;
	padding-left: 20px;
	list-style-type: none;
	list-style-position: inside;
	color: white;
}

li.footerNav a{
	color: white;
	font-size: 22px;
}

li#addressHeading {
	color: #807570;
			font-size: 30px;
	font-family: "fave-script-pro", sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 30px;
	padding: 10px;
}

li#address {
	font-size: 24px;
	font-family: "adobe-garamond-pro", serif;
	font-weight: 400;
	font-style: normal;
	line-height: 30px;
	padding: 5px;
	color: white;
}

/*footer logo*/
img#footerLogo {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	height: 200px;
	width: 200px;
}


/*social icons in the footer*/
.socialIcons {
	padding-top: 10px;
}


/*footer email and phone text styles*/
a#footerEmailRight, a#footerPhoneRight {
	font-size: 20px;
	font-family: "adobe-garamond-pro", serif;
	font-weight: 400;
	font-style: normal;
	text-align: right;
	color: white;
	line-height: 1.4em;
}

/*ALL hyperlink link styles=======================================================*/

/*hover styles for the main menu horizontal navigation*/
ul.mainMenu > li > a:hover {
	color: #c79e81;
	font-size: 38px;
		text-decoration: underline;

} 

/*paragraph links*/
p a.pageLink {
	color: #d1a197;
	text-decoration: underline;
	}

p a.pageLink:hover {
	color: black;
}

a#footerEmailRight:hover, a#footerPhoneRight:hover, li.footerNav a:hover {
	color: #838f7b;
	text-decoration: underline;
}

div#footCopyright a:hover {
	color: #838f7b;
	text-decoration: underline;
}

a#contactAddress, a#contactPhone, a#contactEmail {
	color: #838f7b;
}

a#contactAddress:hover, a#contactPhone:hover, a#contactEmail:hover {
	color: #d1a197;
	text-decoration: underline;
}


/*preventing footer collapse, verified footer will collapse without this */
footer:after {
			 clear: both;
			 content: "";
			 display: table;
		}