@import url('https://fonts.googleapis.com/css2?family=Passion+One&display=swap');


/*	■■■■■■■■■■■■■■■■■■■	PAGE BACKGROUND COLORS, PAGE STYLE DEFAULTS	*/

*	{ box-sizing: border-box; }
body	{ margin: 0; background-color: #eef; background-image: linear-gradient(to bottom, #fff, #ddf); 
	background-repeat: no-repeat; }

body, footer, .HeadingContainer, .Content, h2	{ font-family: arial; }



/*	■■■■■■■■■■■■■■■■■■■	FIXED HEADER & TOP MENU	*/

header		{ position: fixed; top: 0; width: 100%; background: #006; height: 140px; z-index: 2; }
.HeaderPic	{ width: 90%; max-width: 1000px; height: 140px; margin: 0 auto; background: #eee; 
		background-image: url(/images/mold.press.jpg); background-position: left top; background-repeat: no-repeat; }


/* ··········· LOGO PIXELS: 432×300 ·········· 

	SCALED:	145×101		102×71		59×41

·············································	*/


.Logo		{ position: relative; width: 180px; left: 10px; top: 5px; opacity: 0.85; }
.HeaderPicCtrl	{ width: 165px; }

.HeadingContainer	{ position: fixed; top: 0; width: 100%; z-index: 2; }
#menu			{ width: 90%; max-width: 1000px; height: 140px; margin: 0 auto; cursor: default; }
#menu #list		{ position: relative; top: 111px; max-height: 0; overflow: hidden; background: #447; border-radius: 0 0 17px 17px;
						transition: max-height 0.60s ease-out; }
#menu:hover #list	{ max-height: 1000px; 	transition: max-height 1.00s ease-in; }
#MenuBurger		{ position: relative; text-align: right; font-weight: bold; height: 29px; background: #f5f5f5; 
			border: 1px solid #000; border-width: 1px 0; top: 111px; }
.BurgerTxt		{ float: right; padding-top: 4px; width: 60px; font-family: arial; }
.BurgerIconBlock	{ float: right; width: 37px; padding: 0 4px 0 8px; }
.BurgerIcon		{ background: #000; margin: 3px 0; height: 3px; }

#menu:hover #MenuBurger .BurgerIconBlock .BurgerIcon	{ background: #a44; }
#menu:hover #MenuBurger .BurgerTxt			{ color: #a44; }
#menu:hover #MenuBurger 				{ background: #fff; top: 111px; cursor: pointer; }

.MenuButton	{ position: relative; left: 50%; margin-left: -442px; width: 884px; padding: 2px 2px 4px; text-align: center; }
.MenuButton2	{ width: 880px; float: left; }
.MenuButton3		{ width: 218px; border: 1px solid #55b; border-radius: 14px; padding: 3px 8px; margin: 2px 2px 0 0; 
			color: #aae; float: left; }
.MInfo			{ padding: 1px 8px 2px; }
.MenuButton2 a:hover	{ text-decoration: none; }
.MenuButton3 #Info	{ font-size: 14pt; }

.MenuButton3 #PhNo, .MenuButton3 #Eml, .MenuButton3 #Info	{ color: #55b; }

.MenuButton3:hover		{ border: 1px solid #4af; color: #fff; font-weight: bold; }
.MenuButton3:hover #PhNo	{ color: #f40; font-weight: normal; }
.MenuButton3:hover #Eml		{ color: #49f; font-weight: normal; }
.MenuButton3:hover #Info	{ color: #5f5; font-weight: normal; }

.BuffCtrle	{ position: relative; left: 50%; margin-left: -110px; }



/*	■■■■■■■■■■■■■■■■■■■	GENERAL CONTENT STYLES	*/

html		{ scroll-behavior: smooth; }

.NoBr, .NoBrFoot	{ white-space: nowrap; }
.Content		{ margin: 0 auto; width: 90%; max-width: 1000px; padding: 140px 90px 40px; background-color: #fff; 
			box-shadow: 10px 10px 10px #aaa; }
#Intro		{ font-size: 14pt; color: #866; }
.QuoteTxt	{ font-style: italic; color: #453; }
.Bld		{ font-weight: bold; }
.Ital		{ font-style: italic; }
.Content h1	{ font-size: 40pt; color: #fda; text-align: center; margin: 40px 0 50px; line-height: 35pt; text-shadow: 0 0 6px #000; 
		font-family: "Passion One"; }
.Content h2	{ font-size: 18pt; color: #477; }
.CMarg h3	{ font-size: 16pt; color: #995; }
.Content p	{ font-size: 12pt; margin-bottom: 20px; }

#Img001, #Img002, #Img003	{ border-radius: 15px; width: 30%; }

#Img001	{ margin: 10px 0 10px 15px; float: right; }
#Img002	{ margin: 10px 15px 10px 0; float: left; }
#Img003	{ margin: 10px 0 10px 15px; float: right; }
.Diff			{ background: #eeb; border: 1px dashed #884; border-width: 1px 0; margin: 60px 0 50px; padding: 0 25px 15px; }
.TopBotClearance	{ clear: both; }
.BullItem		{ padding-bottom: 7px; }
.LogoBot	{ position: relative; width: 250px; margin: 50px auto 12px; text-align: center; }
.PicCtrlBot	{ width: 250px; }
.AddrBot	{ width: 280px; margin: auto; background: #777; padding: 10px; border-radius: 40px; border: 3px double #000;
		text-align: center; font-size: 12pt; line-height: 13pt; color: #fff; background-image: linear-gradient(to bottom, #77a, #006); 
		background-repeat: no-repeat; }
.WtHilite	{ background: #fff; padding: 0 6px 0 6px; border-radius: 7px; }



/*	▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪	RELEVANT TOPICS	*/

.ky		{ width: 300px; font-family: arial,helvetica; font-size: 10pt; position: fixed; top: 60px; 
		padding: 10px; background-color: #ddf; border: 1px solid #006; border-radius: 12px; 
		z-index: 2; visibility: hidden; }
.RelTop01	{ font-size: 9pt; text-align: center; padding: 10px 0 0 0; white-space: nowrap; }
.RelTop02	{ text-decoration: none; color: #038; font-size: 9pt; }
.RelTop02:hover	{ text-decoration: underline; color: #a50; }
.Div01		{ padding: 0 0 12px 0; }
.RelTopic01	{ text-align: right; margin: 20px 0 -38px; }
.RelTop02	{ text-decoration: none; color: #038; font-size: 9pt; }
.RelTop02:hover	{ color: #a50; }
.XClose		{ border: 1px solid #000; padding: 0 1px; font-size: 6pt; position: relative; top: -2px; }
.XC		{ font-size: 10pt; padding: 0 0 2px; position: relative; top: 2px; }


/*	▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪	TOP OF PAGE LINK	*/

.TopOfPage		{ position: fixed; bottom: 0; left: 50%; margin-left: -41px; padding: 3px 3px 4px 5px; border-radius: 18px 18px 0 0;
			border-top: 2px solid #ddf; border-left: 2px solid #99f; border-bottom: 2px solid #000; border-right: 2px solid #000;
			z-index: 3; text-align: center; width: 72px; font-variant: small-caps; font-family: verdana; font-size: 12pt;
			letter-spacing: 0.2em; background-color: #006; color: #fff; }
.TopOfPage:hover	{ background-color: #bbf; cursor: pointer; color: #000; }
.TopOfPageShadow	{ position: fixed; bottom: 0; left: 50%; margin-left: -31px; width: 74px; height: 24px; z-index: 2; border-radius: 18px 18px 0 0;
			background-color: #000; opacity: 0.5; }



/*	■■■■■■■■■■■■■■■■■■■	PICTURE SQUARE LINKS	*/

.SimPicHolder	{ display: block; height: 230px; background: #fff; border-radius: 19px 19px 0 0; border-bottom: 4px solid #ddd; 
		text-align: center; padding-top: 20px; }
a.PicLink h3	{ display: block; text-decoration: none; }
a.PicLink:hover	h3	{ color: #d00; text-decoration: none; }



/*	■■■■■■■■■■■■■■■■■■■	CAROUSEL SLIDER	*/

.Carousel		{ width: 60%; float: right; padding: 0 30px; }
.SingleSlide		{ padding: 0 5px; }
.SingleSlide img	{ border-radius: 15px; border: 1px solid #000; }



/*	■■■■■■■■■■■■■■■■■■■	FOOTER	*/

.FooterBg	{ width: 100%; background: #006; padding: 0 0 1px; }
.FootContent	{ width: 90%; max-width: 1000px; margin: 0 auto 40px; padding: 20px 20px 20px; background: #447; 
		border-radius: 0 0 30px 30px; }

.Contain .Contain2 .NoBr a		{ color: #ddf; text-decoration: none; display: block; }
.Contain .Contain2 .NoBr a:hover	{ color: #fc0; }
.Contain .Contain2 .NoBr a .SqBull		{ color: #55b; }
.Contain .Contain2 .NoBr a:hover .SqBull	{ color: #2f8; }
.Contain .Contain2 .NoBr .RTopic		{ color: #66d; }

.Contain .Contain2 .NoBr a #PhNo, .Contain .Contain2 .NoBr a #Eml, .Contain .Contain2 .NoBr a #Info	{ color: #55b; }

.Contain .Contain2 .NoBr a #Info	{ font-size: 14pt; line-height: 14pt; }
.Contain .Contain2 .NoBr a:hover #PhNo	{ color: #f60; }
.Contain .Contain2 .NoBr a:hover #Eml	{ color: #48f; }
.Contain .Contain2 .NoBr a:hover #Info	{ color: #f7f; }

footer			{ position: relative; bottom: 0; margin-top: 30px; padding: 3px; background: #bbb; color: #fff;
			background-image: linear-gradient(to bottom, #aad, #337); background-repeat: no-repeat; text-align: center; 
			font-size: 0.9em; border-radius: 15px; }
.DiamondSeperate	{ padding: 0 14px; display: inline; }
.FootBrk		{ display: none; }








/*	■■■■■■■■■■■■■■■■■■■	TABLET DEVICE STYLES	*/

@media only screen and (max-width: 64em) {
	header		{ height: 110px; }
	.HeaderPic	{ height: 110px; }
	.Logo		{ width: 137px; }
	.HeaderPicCtrl	{ width: 118px; }
	#menu		{ height: 110px; }
	#menu #list	{ top: 81px; }
	#MenuBurger			{ top: 81px; }
	#menu:hover #MenuBurger 	{ top: 81px; }
	.Content			{ padding: 110px 40px 40px; }
	#Img002, #Img003	{ width: 35%; }
	.Content h1		{ font-size: 32pt; line-height: 30pt; }
}



@media only screen and (max-width: 50em) {
	#Img001	{ width: 40%; }
}




/*	■■■■■■■■■■■■■■■■■■■	MOBILE DEVICE STYLES	*/

@media only screen and (max-width: 37.5em) {
	header		{ height: 80px; }
	.HeaderPic	{ width: auto; margin: 0 20px 0 0; height: 80px; }
	.Logo		{ width: 94px; }
	.HeaderPicCtrl	{ width: 66px; }
	#menu		{ height: 80px; width: auto; margin: 0 20px 0 0; }
	#menu #list	{ top: 51px; }
	#MenuBurger		{ top: 51px; }
	#menu:hover #MenuBurger { top: 51px; }
	.NoBr			{ white-space: normal; }
	.Content	{ width: auto; margin: 0 20px 0 0; padding: 80px 20px 40px; border-radius: 0; }
	#Img001		{ width: 50%; }
	#Img002		{ width: 100%; margin: 0 0 25px 0; float: none; }
	#Img003		{ width: 55%; }
	.Content h1	{ font-size: 26pt; line-height: 22pt; }
	.Carousel		{ width: 100%; float: none; }
	.SingleSlide		{ padding: 0 3px; }
	.SingleSlide img	{ border-radius: 10px; }
	.FootContent		{ width: auto; margin: 0 20px 0 0; border-radius: 0; }

	.ky		{ width: 60%; max-width: 300px; }
}




/*	■■■■■■■■■■■■■■■■■■■	MINIMUM SCREEN HEIGHTS	*/

@media only screen and (min-height: 1000px) and (max-height: 1200px) {
	#menu:hover #list	{ max-height: 800px; overflow: scroll; }
}


@media only screen and (min-height: 800px) and (max-height: 999px) {
	#menu:hover #list	{ max-height: 600px; overflow: scroll; }
}


@media only screen and (min-height: 600px) and (max-height: 799px) {
	header		{ height: 110px; }
	#menu		{ height: 110px; }
	#menu #list		{ top: 81px; }
	#menu:hover #list	{ max-height: 400px; overflow: scroll; }
	#menu:hover #MenuBurger	{ top: 81px; }
	#MenuBurger		{ top: 82px; }
}


@media only screen and (min-height: 400px) and (max-height: 599px) {
	header		{ height: 80px; }
	#menu		{ height: 80px; }
	#menu #list		{ top: 51px; }
	#menu:hover #list	{ max-height: 200px; overflow: scroll; }
	#menu:hover #MenuBurger	{ top: 51px; }
	#MenuBurger		{ top: 52px; }
}


@media only screen and (max-height: 399px) {
	header		{ height: 80px; }
	#menu		{ height: 80px; }
	#menu #list		{ top: 51px; }
	#menu:hover #list	{ max-height: 120px; overflow: scroll; }
	#MenuBurger		{ top: 52px; }
	#menu:hover #MenuBurger	{ top: 51px; }
}




/*	■■■■■■■■■■■■■■■■■■■	OTHER SCREEN WIDTHS	*/

@media only screen and (max-width: 29.6em) {
	.DiamondSeperate	{ display: none; }
	.FootBrk		{ display: inline; }
}




/*	■■■■■■■■■■■■■■■■■■■	TOP MENU PLACEMENTS

.BuffCtrla
.BuffCtrlb
.BuffCtrlc
.BuffCtrld
.BuffCtrle

*/




/*	▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪	ADDED MENU CONTROLS FOR LIMITED MENU

.BuffCtrla	{ position: relative; left: 50%; margin-left: -220px; width: 440px; }

	END OF: ADDED MENU CONTROLS FOR LIMITED MENU	▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪	*/





@media only screen and (max-width: 990px) {
	.MenuButton	{ margin-left: -332px; width: 664px; }
	.BuffCtrla	{ position: relative; left: 50%; margin-left: -220px; width: 440px; }
}

@media only screen and (max-width: 750px) {
	.MenuButton	{ margin-left: -222px; width: 444px; }
	.BuffCtrla	{ position: static; left: auto; margin-left: auto; }
}

@media only screen and (max-width: 470px) {
	.MenuButton	{ position: static; left: auto; margin-left: auto; width: 100%; }
	.BuffCtrla	{ width: 100%; }
	.MenuButton2	{ width: 100%; float: none; }
	.MenuButton3	{ width: 100%; }
}










/*	■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
	■■■■■■■■■■■■■■■■■■■	FLEX BOXES	*/

*, ::after, ::before	{ box-sizing: border-box; }


/*	■■■■■■■■■■■■■■■■■■■	grid styles */




/*	▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪	TURN OFF THESE STYLES DUE TO LIMITED MENU ITEMS		*/
	
.Contain, .Contain2, .Contain3	{ max-width: 1000px; margin: 0 auto; display: flex; }

/*	END OF: TURN OFF THESE STYLES DUE TO LIMITED MENU ITEMS ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪	*/




/*	▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪	ADDED THESE STYLES DUE TO LIMITED MENU ITEMS

.Contain, .Contain3	{ max-width: 1000px; margin: 0 auto; display: flex; }
.Contain2		{ width: 100%; }

	END OF: ADDED THESE STYLES DUE TO LIMITED MENU ITEMS ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪	*/




.Contain3 .Coln-04		{ border: 1px solid #000; margin: 0 4px 0 0; border-radius: 20px; }
.Contain3 .Coln-12		{ border: 1px solid #000; margin: 0 125px 0 125px; border-radius: 20px; }
.Contain3			{ margin: 70px 0 60px 0; }

.Contain .Contain2		{ width: 50%; margin: 0 auto; }
.Coln			{ color: #fff; margin: 4px; padding: 12px 16px 25px; border: #55b 1px solid; border-radius: 20px; }
.Coln-01	{ flex-basis: 8.333%; }
.Coln-02	{ flex-basis: 16.666%; }
.Coln-03	{ flex-basis: 25%; }
.Coln-04	{ flex-basis: 33.333%; }
.Coln-05	{ flex-basis: 41.666%; }
.Coln-06	{ flex-basis: 50%; }
.Coln-07	{ flex-basis: 58.333%; }
.Coln-08	{ flex-basis: 66.666%; }
.Coln-09	{ flex-basis: 75%; }
.Coln-10	{ flex-basis: 83.333%; }
.Coln-11	{ flex-basis: 91.666%; }
.Coln-12	{ flex-basis: 100%; }

.CMarg		{ margin: 10px 15px 20px 15px; }


@media only screen and (max-width: 60.0em) {
	.Contain		{ display: block; }
	.Contain3 .Coln-12	{ margin: 0 75px 20px 75px; }
}


@media only screen and (max-width: 50.0em) {
	.Contain .Contain2	{ width: 100%; }
	.Contain3		{ display: block; }
	.CMarg			{ margin: 10px 40px 20px 40px; }
	.Contain3 .Coln-04	{ margin: 0 0 20px 0; }
	.Contain3 .Coln-12	{ margin: 0 10px 20px 10px; }
}


@media only screen and (max-width: 30.0em) {
	.MenuButton2	{ width: 100%; float: none; }
	#Img001		{ display: none; }

	.Contain .Contain2	{ display: block; }
	.Contain3 .Coln-12	{ margin: 0 40px 20px 40px; }

	.OneCol1	{ margin: 4px 0 0; padding: 12px 30px 0; border-radius: 20px 20px 0 0; border-width: 1px 1px 0; }
	.OneCol2	{ margin: 0; padding: 0 30px 0; border-radius: 0; border-width: 0 1px; }
	.OneCol3	{ margin: 0 0 4px; padding: 0 30px 20px; border-radius: 0 0 20px 20px; border-width: 0 1px 1px; }

	.CMarg		{ margin: 10px 15px 20px 15px; }
}