/* 
	Author: Michelle C. Basey
	Project: michellebasey.com
	Purpose: Landing Page CSS

	Notes: see declarations file (declarations and includes)

	Reminders: 
	# = ID = 1 use per page (e.g. header/footer/menu)
	. = Class = can apply to more than one element
*/


/* ============ Landing Page ============ */

/* ~~~~~~ LOGO ~~~~~~ */

.headerLand {
	text-align: center;
	height: 3em;
}


.logoLandFlex {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	align-content: center;
	justify-content: center;

	color: var(--textColor_logo);
	text-align: center;
}

.logoLandItem {
}

.logoLandPara {
	color: var(--textColor_logo);
	text-align: center;

}

.logoLandParaTagline {
/*	height:3em; */
	margin-top:		.6em;
	margin-bottom:	1em;
}


.logoLandItemImg img  {		width: 380px;	}
@media (min-width: 607px) { 

	.logoLandItemImg img {	width: 547px;	}
}
			/*imgW 547 + generous margin = 607px */


.logoLandItemImg2 img  {	width: 300px;	}
@media (min-width: 607px) { 

	.logoLandItemImg2 img {	width: 360px;	}
}


.logoLandItem {
}

.menuLandFlex {
	flex-direction: row;
	justify-content: center;
	margin-top: 1.5em;
	margin-bottom: 1em;
}

.menuRing {

	margin-top:		var(--marh_menuRing);
	margin-bottom:	var(--marh_menuRing);

}

.menuRingAlt {
	margin-top:		var(--marh_menuRingAlt);

}

.menuLand {
	color: var(--textColor_global);
	text-decoration: none;
	font-size: 78%;

	border-color: var(--brdColor_global);
	border-style: var(--brdStyle_menuLand);
	border-top-width: 0;
	border-bottom-width: 0;
	border-right-width: 3px;
	border-left-width: 3px;

	border-radius: 50%;
	
	padding-top:	var(--padh_menuLand);
	padding-bottom:	var(--padh_menuLand);
	padding-left:	var(--padw_menuLand);
	padding-right:	var(--padw_menuLand);

	margin-top:		var(--marh_menuLand);
	margin-bottom:	var(--marh_menuLand);
	margin-left:	var(--marw_menuLand);
	margin-right:	var(--marw_menuLand);

}

.menuLand:hover {

	font-size: 80%;
	color: var(--brdColor_global);

	border-color: var(--brdColor_global);
	border-style: var(--brdStyle_hoverMenuLand);

	border-radius: 50%;

	border-top-width: 3px;
	border-bottom-width: 3px;
	border-right-width: 2px;
	border-left-width: 2px;


	padding-top:	var(--padh_menuLand);
	padding-bottom:	var(--padh_menuLand);
	padding-left:	var(--padw_menuLand);
	padding-right:	var(--padw_menuLand);
}


/* ~~~~~~ MENU ~~~~~~ */


/* ~~~~~~ essence Main ~~~~~~ */

.essenceMain {

	height: var(--eleh_essenceMain);
	color: var(--textColor_contrast);

	font-family: var(--font_contrast2);
		font-size: var(--fontSize_essence);
		font-style: italic;
		text-align: center;
}

/* ~~~~~~ Lead In Sections ~~~~~~ */ 

.leadin {
	display: block;
	background-color: var(--backgroundColor_contrast);
	color: var(--textColor_contrast);

	
	font-family: var(--font_contrast1);
	font-size: var(--fontSize_leadin);
	font-style: italic;
	text-align: center;

	border-color: var(--brdColor_global);
	border-style: var(--brdStyle_gallery);
	border-width: var(--brdw_global);

	margin-left:	var(--marw_leadinSm);
	margin-right:	var(--marw_leadinSm);
}

		/* leadinSm = cellFriendly */

@media (min-width: 607px) { 
	.leadin {	
		margin-left:	var(--marw_leadin);
		margin-right:	var(--marw_leadin);
	}
}
		/* leadinLg = fullDesktop still looks good*/

@media (min-width: 1200px) {
	.leadin {	
		margin-left:	var(--marw_leadinLg);
		margin-right:	var(--marw_leadinLg);
	}
}