@charset "utf-8";

/*
   Design sheet Sycamore Hill Venue website
   Author: Dianna Main
	   Date:   10/26/24
	  	   Filename: stylesheet1SH.css
	   
	   url:    www.sycamorehillvenue.com
	   
	  This style sheet is for style changes from the basic stylesheetSH.css to accomodate mobile only
	  
	  Size breaks
	  0-667px  Mobile only
	  668px-1200px Tablet ranges
	  1201px and greater see stylesheetSH.css
*/

/* ========================================================================================================================
   Mobile Devices: 0 to 667px 
   ========================================================================================================================
*/
@media only screen and (max-width: 667px) {

	/*drop down navigation styles in the header only for mobile only 0-667px============HEADER=======================*/
		/*removing the horizontal list unless you click on the icon*/
		nav.horizontal ul{
		display: none;
		}
		/*Removing the desktop logo from the left corner*/
		img#headerLogo {
		display: none;  
		}

		/*showing the list if you click on the navicon*/
		a#navicon:hover+ul{
		display: block;
		}
	
		nav.horizontal ul:hover {
		display: block;
		}/*takes you to page if you click on nav links*/
		
		/*making the dropdown list full width*/
		ul.mainMenu li {
		display: block;
		float: right;
		width: 100%;
		font-size: 4.8em;
		}

		/*sizing the 3 line navicon section for mobile only 0-667px*/
		a#navicon {
			width: 50px;
			height: 50px;
			position: absolute;
			z-index: 3;
		}
		
		/*showing the 3 line navicon image on mobile only 0-667px*/
		a#navicon > img {  
		display: block;
		}

	/*the logo in the dropdown menu for mobile only 0-667px*/
		img#headerLogoSpan {
			display: block;
			margin-left: auto;
			margin-right: auto;
			width: 100%;
			max-height: 100px;
			max-width: 200px;
			z-index: 2;
		}

	/*the top row of the dropdown menu for mobile only 0-667px
	this is the background and box sizing only for the span image*/
		ul.mainMenu > li#leftNavMobile {
			width: 100%;
			background-color: white;
			opacity: .95;
			padding-top: 10px;
			z-index: 1;
		}	

	/*the 5 nav rows of the dropdown menu for mobile only 0-667px
	this is the background and box sizing only for the menu*/
		ul.mainMenu > li#rightNav {
			width: 100%;
			background-color: white;
			opacity: .95;
			margin: 0;
			padding: 0;
			line-height: .5em;
			z-index: 1;
		}	
	
	/*changing the full navigation list on mobile only to column
	  single column instead of across the top*/
		ul.mainMenu > li > a {
		display: block;
		width: 100%;
		color: #838f7b; /*font color*/
		font-size: .4em;
		font-family: "fave-script-pro", sans-serif;
		font-weight: 200;
		font-style: normal;
		}

	/*h1 style for mobile only===============================================*/	
		/*moving header down so drop down doesn't overlap*/
		div.headerTitle {
			padding-top: 140px;
		}
		
		h1#galleryH1 {
			padding-left: 5%;
			padding-right: 5%;
		}
		
		h1#aboutH1 {
			font-size: 30px;
		}
		
	/*h2 styles for mobile subtitle in the header only*/	

		h2#headerSubtitle {
			font-size: 3.0rem;
		}

		.textBlockHeader {
			font-size: 45px;
			padding: 3%; 
		}

		.textBlockText {
			font-size: 20px;
			padding: 3%;
		}
	
/*flex container styles for mobile only screen size 0-667px wide====================BODY SECTION MOBILE ONLY=======*/	

	/*the full body container section between the header and footer*/
	.flexContainer {
			padding-top: 5%;
			display: flex;
			width: 100%;
			flex-wrap: wrap;
			background-color: white;
	}
/*the individual div's within the full flex container*/	
	.flexContainer > div {
			width: 100%;
			min-height: 300px;
			margin: 10px;
			padding: 10px;
	}
	
/*the div row in the contact page to override the min-height above on mobile only 0-667px*/	
div#contactAddress, div#contactPhone, div#contactEmail {
	min-height: 80px;
}

div#contactImg {
	min-height: 200px;
}

div#contactFlex {
	width: 100%;
	min-height: 80px;
}

/*contact page verse on mobile only <667*/
div#contactVerse {
	min-height: 150px;
	
}

div#contactVerse h1#fVerse1{
	line-height: 22px;
	font-size: 22px;
	padding-left: 0%;
}
div#contactVerse h2{

	font-size: 32px;
	line-height: 32px;
}
div#contactVerse p#fVerse3 {
	padding-right: 0%;
	font-size: 18px;
}

	
	/*hiding elements to make it more readable*/
	p#homeP1, div#homeImg, p#homeP4, p#homeP6, img#homeImg4, div#amenitiesImg1 {
		display: none;
	}

/*adding an image to mobile only that I am hiding on desktop*/
	img#homeImgMobile {
	display: block;
	}

/*Closing up some gaps, not needed on mobile*/
div.flexContainer, img.dividerImage {
	padding-top: 0px;
	padding-bottom: 0px;
}

iframe#google{
	width: 100%;
}

/*LIST styles for mobile only screen size 0-667px wide=======================================FOOTER=========*/

.amenitiesList li {
		font-size: 16px;
	line-height: 22px;
}


/*footer styles for mobile only screen size 0-667px wide=======================================FOOTER=========*/
	/*the flex box that contains the entire footer, this changes the footer to 
	  a single column*/
	.flexFooter {
		flex-wrap: wrap;
	}
	

	/*the text in the footer navigation list mobile only*/
	li.footerNav {
		width: 100%;
		text-align: center;
		font-size: 16px;
		list-style-type: none;
		padding: 5px;
	}
	
	/*resizing logo mobile only*/
	img#footerLogo {
		width: 110px;
		height: 110px;
	}

	/*resizing font mobile only*/
	a#footerEmailRight, a#footerPhoneRight {
		font-size:	16px;
	}

	/*moving to the center of column*/
	li#footerEmail, li#footerPhone {
		text-align: center;
	}

	/*moving social icons to the center of column*/
	li.socialIcons {
		text-align: center;
	}

	/*centering footer address and resizing for mobile only*/
	li#addressHeading {
		text-align: center;
		font-size: 18px;
		padding: 0px;
		line-height: 16px;
	} 
	
	/*centering footer address and resizing for mobile only */
	li#address {
		text-align: center;
		font-size: 16px;
		line-height: 18px;
	}

	/*setting mobile only font*/
	div#footCopyright > p, div#footCopyright > p > a {
		font-size: 16px;
	}
			
}


	
/* ===============================================================================MID RANGE ONLY=====================
   Tablet Styles: 668px to 1200px
   ==================================================================================================================
*/
@media only screen and (max-width: 1200px){
	
	/*Closing up some gaps, not needed on mobile or tablet*/
	div.flexContainer, img.dividerImage {
		padding-top: 0px;
		padding-bottom: 0px;
	}
	
	/*hiding elements to make it more readable*/
	p#homeP1, p#homeP4, p#homeP6 {
		display: none;
	}
	/*closing the sides to strink the text*/
	h1#galleryH1 {
		padding-left: 10%;
		padding-right: 10%;
	}
	
	/*hiding the side image and centering the amenities list on tablet only 667-1200px====*/
	div#amenitiesImg1 {
	display: none;
	}
	.amenitiesList li {
	padding-left: 10%;
	}
	
	/*contact page verse on tablet only*/
	div#contactVerse {
	min-height: 150px;
	padding: 5%;
	}

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

		font-size: 35px;
		line-height: 35px;
	}
	div#contactVerse p{
		padding-right: 20%;
		font-size: 20px;
	}


}


/* ===========================================================PLACE HOLDERS ONLY FROM HERE DOWN=====================
   Additional tablet range: greater than 815px
   ================================================================================
*/

@media only screen and (min-width: 815px) {}


/*this makes the slider on the gallery page responsive for tablet and mobile===========*/
@media (max-width: 900px)
{
.slider {
	position: absolute;
	inset: 40px 40px 200px 40px;
}

.slider .slides {
	width: 100px;
	height: 100px;
	top: initial;
	bottom: -170px;
	box-shadow: 0 10px 20px rgb(0,0,0,.25);
}

.slider .slides:nth-child(1),
.slider .slides:nth-child(2)
{
		top: initial;
		bottom: 0px;
}
.slider .slides:nth-child(3){
left: 0px;
}
.slider .slides:nth-child(4){
left: 120px;
}
.slider .slides:nth-child(5){
left: 240px;
}
.slider .slides:nth-child(6){
left: 360px;
}

}

/* ================================================================================
   Desktop Styles: 1100px and greater
   ================================================================================
*/

@media only screen and (min-width: 1100px) {}