/*Reset selector*/
*{
	margin: 0;
	padding: 0;
}

html{
	background-color: #d1e7cb;
}

body{
	width: 100%;
	/**min-width:**/ 1058px;/**min-width:1216px;**/
	/*max-width:1200px; /**max-width:1024px; **/
	margin-left: auto;
	margin-right:auto;
	/**margin-left: 15%;
	margin-right:15%;**/
}

/**HEADER and TAGLINE Styling**/
/**note: can't figure out how to align the site header and tagline with the main menu for all pages**/
header{
	display: flex;
	font-size: 440%;
	font-family: Kunstler Script;
	font-weight: bold;
}
/*#site_tagline{
	font-size: 110%;
	color: black;
	margin-left: 8em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}*/

p{font-size: 110%;}

a{color: #ff3377 /*#cc0044*/;}

a:hover{color: #ff9999 ;}

/**MENU Styling**/
/*note: can't figure out how to get menu bar to shrink and expand relative to the main photo on the Home page. 
Had to add a Min Width to the body to prevent menu rapping onto next line*/

#mobile_menu{
	display: none;
}

#menu ul{
	display: flex;
	justify-content: center;
	width: 100%;
	position: relative;
	line-height: 1em;
	list-style-type: none;
	padding-top: 2%; /**padding-top: 25px;**/
	padding-bottom: .65%;
}

/**#menu ul li{
	float: left;
}**/

#menu ul ul {
	display: none;         /* Prevents submenu from showing until you hover over the li element */
	position: absolute;
	top: 100%;             /* Positions the submenu at the bottom of the main menu */
}
#menu ul ul li {
	float: none;           /* Displays the submenus vertically */
	padding-bottom: 1.30em;
}

#menu ul li:hover > ul {
	display: block;        /* Displays the submenu on hover of the li element */
}
#menu > ul::after {
	content: "";
	display: block;
	clear: both;
}

#menu a:hover{
	background-color: #ff9999;
}

/**note: for some reason this is not working. 
I want the button background color to be different for the current 
active "button" of the page you're on. Come back laterto figure out a fix.**/
#menu a:active{
	background-color; #ff9999;
}

#menu ul li a{
	text-align: center;
	display: inline/**flex-inline**/;
	position: relative;
	text-decoration: none;
	padding: .73em 2.5em;
	width: 75%;
	color: white;
	font-weight: bold;
	background-color: black;
	border-right: 2px solid white;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 90%;
}
#menu ul li a.aboutdropdown{
	border-right: none;
}
/***Note: See Mobile SlickNav Styling at end***/


#menu ul li a.lastitem{
	border-right: none;
}

/**All HEADING Styles**/
h1{
	font-size: 175%;
	font-weight: normal;
	font-style: italic;
	color: pink;
}

h2{
	font-size: 150%;
	clear: left;
	margin-left: 0;
	margin-top: 1.5em;
	margin-bottom: .5em;
}

h3{
	font-size: 115%;
	clear: left;
	margin-left: 0;
	margin-top: 1em;
	margin-bottom: 0;
	padding-top: 1em;
}

h4{
	font-size: 100%;
}

h5{
	margin-top: 1em;
	margin-bottom: .5em;
}

/**HOME Page Styling **/

/*Hero Image*/
#featured_poppies_image{
	display: flex;
	justify-content: center;
	width: 86.5%;
	/**min-width:1040px;**/
	margin-left: auto;
	margin-right: auto;
	padding-top: 0;   /**10px;**/
}

#featured_poppies_caption{
	display: flex;
	justify-content: center;
}

section {
	display: flex;
	justify-content: center;
	padding-top: 2em;
}

#HomeIntroParagraph{
	font-size: 110%;
	line-height: 1.5em;
	width: /*100%*/85%;
}

#portfolio_link{
	font-weight: bold;
	font-size: 130%;
}

#ContactKellyParagraph{
	font-size: 110%;
}

#ContactKellyLink{
	font-weight: bold;
}

/**ABOUT Page Styling**/
#kellys_portrait{
	width: 30%;
	min-width: 300px;
	margin-right: 2em;
	margin-bottom: 1em;
	float: left;
}

#bio{
	font-size: 115%;
	width: 90%;
	line-height: 1.5em;
}

#space{
	clear: both;
}

#kelly_painting_image{
	width: 50%;
	min-width: 250px;
	height: auto;
}
#melodycaption{
	width: 50%;
	min-width: 250px;
}

#kelly_alice_image{
	width: 50%;
	min-width: 250px;
	height: auto;
	
}

#kelly_alice_caption{
	width: 50%;
	min-width: 250px;
}

#studio{
	margin-left: -2.5em;
	padding-left: 0;
}

#news_article1{
	float: left;
	width: 100%;
	height: auto;
}

#news_article2{
	width: 60%;
	min-width: 450px;
	height: auto;
	margin-bottom: 1em;
}
 
#news_article3{
	width: 100%;
}

#news_article2 img{
	width: 50%;
}

/**PORTFOLIO Page Styling**/
@supports (display: grid){
	div img{width: 100% !important;}

	div{display: grid !important;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))!important;
		grid-gap: .5em !important; }
}
	/**div{
		display: flex;
	}
	div img{
		width: 105%;
	}**/
	
/*fallback layout*/
.portfolio_gallery img{
	width: 40%;       
	min-width: 200px;
}

#portfolioparagraph{
	font-size: 110%;
}

/**PRODUCTS Page Styling**/
.products{
	font-size: 110%;
	width: 90%;
}

#gicleeheading{
	padding-bottom: .75em;
}
#GicleeParagraph{
	font-size: 110%;
	width: 90%;
	line-height: 1.5em;
	}


#ProductsDisplayImage{
	width: 45%;
	float: left;
	margin-right: 1em;
}


.CardSets img{
	width: 90%;
}

#SmallNoteCards img{
	width: 100%;
}

.Calendar_Pen img{
	width:100%;
}

#MagnetCalendar img{
	max-width: 355px;
}

#Clipboard img{
	max-width: 365px;
}

#tray{
	width: 100%;
}

#pillows{
	width: 100%;
}

#tumbler img{
	max-width: 60%;
}


/**INSPIRATION Page Styling**/
.inspiration section{
	padding-bottom: 1em;
}

#inspiration_paragraph{
	width: 93%;
	float: left;
	padding-bottom: 1em;
	font-size: 110%;
}

#BackGarden{
	width: 50%;
}

#coneflowers{
	width: 50%;
}


/**EVENTS Page Styling**/
#HolidayMartBanner{
	width:60%;
	min-width: 500px;
	padding-right: 1em;

}

.events{
	padding-top: 1em;
	padding-bottom: 1em;
	width:90%;
}

#coupon{
	width:60%;
	min-width: 500px;
}



/**Contact Page Styling**/
#Hydrangea{
	width: 30%;
	min-width: 300px;
	float: right;
	margin-right: 9%;
}

#contactparagraph{
	min-width: 400px;
}

/**SLICKNAV MENU & Media Queries**/
@media only screen and (max-width:1252px){
	.LeftMargin{
		margin-left: 1em;
	}
}
/*1057px is Breakpoint from mobile to Regular Nav Menu*/
@media only screen and (max-width: 1057px){
	#menu{display:none;}
	
	#mobile_menu{
		display:block;
		padding-top: 2em; }
		
	.slicknav_menu{background-color:#facad8a;}
	
	.slicknav_menu a:hover{background-color: #ff9999;}
	
	#featured_poppies_image{width:100%;}
	
	#ProductsDisplayImage{
		min-width: 400px; }
		
	#GicleeParagraph{
		clear: left;
		width: 350px;
		padding-top: 1em;
		padding-bottom: 0;
		margin-bottom: 0; }
		
		
}

/*For Narrow Mobile Screens less than or equal to 375px wide*/
@media only screen and (max-width: 423px){
		header{
			font-size: 350%;}
		
		/*#site_tagline{font-size:90%;
		margin-left: 7em;}*/
		
		#site_logo{
			display: flex;
			max-width: 90%;
			margin: auto;
		}
		
		#HolidayMartBanner{
			padding-bottom: 1em;
		}
		
		body{
			min-width: 100vw;
		}
}

footer{
	text-align: center;
	clear: both;
	padding-top: 2em;
	padding-bottom: 2em;
}