﻿@media screen {
BODY {
	--LinkHover: #FF9D9D;
	--FooterBG: #FF9D9D;
	--BlockBG: #ECF0F1;
	--ThemeColor: #AABD90;
}

HTML					{ box-sizing: border-box; }
*, *:before, *:after	{ box-sizing: inherit; }
BODY		{ background: url(/images/bg.png); color: #656565; margin: 0px; }
BODY > DIV	{ background-color: #ffffffd4; min-height: calc(100vh); }
HEADER		{ max-width: 960px; margin: 20px auto; display: flex;
			  flex-direction: row; align-items: center; justify-content: space-between; }
HEADER IMG	{ display: inline-block; max-height: 96px; width: auto; }
HEADER U	{ cursor: pointer; display: none; position: absolute;
    top: 59px; right: 39px; width: 28px; margin: 5px; padding: 5px 0px;
    border: 3px solid #000; border-width: 3px 0px; background-color: #FFF; }

HEADER S	{ display: block;
    width: 100%;
    height: 3px;
    background-color: #000; }

HEADER NAV	{ display: inline-flex; float: right; width: 100%; justify-content: space-between;
			  flex-wrap: wrap; margin: 0px 10px 0px 40px; z-index: 2; }
HEADER A	{ color: #666; text-transform: uppercase; font: 17pt Monda,sans-serif;
			  text-decoration: none; display: inline-block; margin-left: 20px; }

MAIN.Page	{ min-height: 440px; max-width: 880px; margin: 0px auto 40px; padding: 10px 20px;
			  background-color: var(--BlockBG); }

P, LI	{ font: 14pt 'PT Sans',sans-serif; }
H2		{ text-align: center; font: 700 24pt 'PT Serif',times; text-shadow: 1px 1px 2px #fff; margin: 5px; }
H4		{ text-align: center; font: 400 18pt 'PT Sans',sans-; text-shadow: 1px 1px 2px #fff; margin: 5px; }
ARTICLE	{ max-width: 880px; margin: 80px auto; padding: 10px; }


ARTICLE.Feat,
ARTICLE.Pict	{ columns: 2 260px; column-gap: 50px; }
ARTICLE.Pict P	{ text-align: justify; }
ARTICLE.Pict S	{ text-align: center; display: block; }
ARTICLE H2		{ margin-top: 10px; }
ARTICLE H2,
ARTICLE H4 		{ column-span: all; }
ARTICLE H5		{ font: bold 15pt 'PT Sans',sans-serif; margin-bottom: 0px; }
ARTICLE H5 + P	{ margin-top: 0px; }
ARTICLE H5:first-of-type	{ margin-top: 0px; }
ARTICLE.Feat	{ background-color: var(--BlockBG); padding: 10px 20px 20px; }
ARTICLE.Feat H2	{ margin-bottom: 25px; }
ARTICLE.Faq H3	{ background: url(/images/dw.svg) 0px 8px no-repeat; padding-left: 25px;
	font: 17pt 'PT Sans',sans-serif; cursor: pointer; }

ARTICLE.Faq UL LI	{ margin-left: 20px; }
ARTICLE.Faq UL,
ARTICLE.Faq P { display: none; border: 1px solid #CCD5DD; background-color: var(--BlockBG);
			padding: 20px; }

SECTION	{ background-color: #AABD90; width: 100%; padding: 40px 20px; } /* Lazerna color: #99BDE4 */
SECTION H6	{ font: 500 25pt 'Playfair Display',times; text-transform: uppercase; color: #FFF; margin: 0px 0px 40px; text-align: center; text-shadow: 2px 2px 2px #000000CC; }
.Cont		{ max-width: 880px; margin: 0px auto; padding: 10px; }
.Cont DIV	{ display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; align-items: center; }
.Cont LABEL	{ color: #FFF; width: 32%; display: inline-block; margin-bottom: 15px; font: 14pt 'PT Sans',sans-serif; text-shadow: 2px 2px 2px #000000CC; }
.Cont DIV SELECT,
.Cont DIV INPUT	{ font: 15pt 'PT Sans',sans-serif; width: 100%; padding: 5px 0px; color: #333; }
.Cont DIV SELECT	{ padding-top: 6px; }
.Cont TEXTAREA	{ display: block; }
FORM INPUT[TYPE=BUTTON],
FORM INPUT[TYPE=SUBMIT] { padding: 5px 20px; border: 1px solid #9E9E9E; border-radius: 5px;
    cursor: pointer; color: #333; background: #E5E5E5 linear-gradient(#F8F8F8, #D8D8D8);
    text-shadow: #FFF 1px 1px 0; display: block; margin: 10px auto; font: 15pt 'PT Sans',sans-serif; }

.Conf INPUT[TYPE=BUTTON],
.Conf INPUT[TYPE=SUBMIT] { display: inline-block; margin: 10px; }


.Conf TABLE		{ border: 1px solid var(--ThemeColor); border-collapse: collapse; margin: 0px auto; }
.Conf THEAD TH	{ border: 1px solid var(--ThemeColor); background-color: var(--ThemeColor); color: #FFF; font: 15pt Monda,sans-serif; }
.Conf TBODY TH,
.Conf TBODY TD	{ font: 14pt 'PT Sans',sans-serif; padding: 2px 10px; }
.Conf TBODY TH	{ font-weight: bold; text-align: right; padding-right: 4px; }
.Conf TFOOT TH	{ padding: 15px; }
.Conf TFOOT TH DIV { margin: 0px auto; }
.Conf TFOOT TD	{ text-align: center; }




#Face	{ background: url(/images/Face1500x1200.jpg) no-repeat; background-size: contain;
			width: 100%;  margin: 0px auto; max-width: unset;
		    Zheight: 100vh;
	    aspect-ratio: 10 / 8; background-position-x: center; background-position-y: top;
		display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;
		justify-content: center; align-content: center; }

FOOTER	{ font: 12pt 'PT Sans',sans-serif; text-align: center; padding: 130px 10px 40px 10px;
		  background-color: #DDD; border-top: 1px solid #AAA;
		  background: #EEE url(/images/MultifraxLogo.png) no-repeat;
		  background-position: center 10px; background-size: 220px; }
IMG.x	{ display: none; }
DIV.Dimm	{ display: none; position: absolute; background-color: #000; z-index: 1; top: 87px;
			  left: 0px; height: calc(100vh - 102px); width: 100vw; opacity: 0.4; }


/*******************************************************/
/* Contact Form Response */
.Right, .Wrong
			{ font: 13.5pt 'PT Sans',sans-serif;
			  padding: 10px; margin: 0px auto 10px auto;
			  border: 1px solid #000; width: 560px; }
.Right	{ background-color: #C0FFC0; color: #000 ! important; text-align: left; }
.Wrong		{ background-color: #A00000; color: #FFF; text-align: center; }


} /* @media screen */
@media (max-width: 896px) {
	HEADER A	{ font-size: 16pt; }
}
@media (max-width: 860px) {
	HEADER		{ justify-content: center; }
	HEADER U	{ display: block; }
	HEADER NAV	{ display: none;
		margin: 0px;
		position: absolute;
		background-color: #444444e0;
		width: auto;
		padding: 20px;
		right: 77px;
		top: 87px;
		box-shadow: 5px 5px 7px 3px #0000006b;
		border-radius: 10px;
	}

	HEADER A { color: #AAFFAA;
		text-transform: uppercase;
		font: 18pt Monda,sans-serif;
		text-decoration: none;
		display: block;
		margin: 0px;
		text-shadow: 3px 3px 2px black;
	}
}
@media (min-width: 541px) and (max-width: 740px) {
	FORM LABEL	{ width: 48%; }
}
@media (max-width: 540px) {
	SECTION		{ padding: 40px 0px; }
	SECTION H6	{ font-size: 24pt; }
	FORM LABEL	{ width: 49%; }
}

@media (max-width: 470px) { #Face H2 { margin-top: 91px; }}
@media (max-width: 450px) {
	HEADER NAV	{ right: unset; }
	H2,
	SECTION H6	{ font-size: 23pt; }
	FORM DIV	{ justify-content: center; }
	FORM LABEL	{ width: 80%; }
}

@media (max-width: 420px) { #Face { display: block; }}
@media (max-width: 386px) {
	H2 { font-size: 22pt; }
	#Face H2	{ margin-top: 112px; }
	FORM LABEL	{ width: 100%; }
}

@media (max-width: 320px) {
	HEADER A { font-size: 16pt; padding: 2px 0px; }
}
