/**************************** _Base2024.1.css ****************************/
/**************************** START **********************/
/**************************** START **********************/
/**************************** START **********************/


/**************************** GENERAL **/
/* Do not change anything in these configurations */
html
{
	margin: 0;
	padding: 0;
	min-width: 320px;
	min-height: 100%;
}
body
{
	background-color: var(--BodyBackgroundColor);
	margin: 0px;
	padding: 0px;
	clear: none;
    min-height: 100%;
    min-width: 320px;
}

body, p, table, tr, td, th, q, li
{
	font-size: calc(var(--MainFontSize) * var(--FontRatio));
	font-family: var(--MainFontFamily);
	font-weight: var(--MainFontWeight);
	text-align: left; 
    line-height: calc(var(--MainFontSize) * var(--MainLineHeightRatio));
	color: var(--MainFontColor);
}
h1, h2, h3, h4, h5, h6
{
	font-family: var(--HsFontFamily);
	font-weight: var(--HsFontWeight);
    color: var(--HsColor);
	text-align: left; 
    clear: both;
}
p, q, li
{
	padding: 0px;
	margin: calc(var(--T0MA) * var(--MarginRatio)) 0px calc(var(--T0MB) * var(--MarginRatio)) 0px;
	clear: none;
}
input:not([type='submit']):not([type='radio']), select, textarea, option
{
	font-family: var(--FormControlFontFamily);
	font-weight: var(--FormControlFontWeight);
	font-size: var(--FormControlFontSize);
	text-align: left; 
    vertical-align: baseline;
    background: var(--FormControlBackgroundColor);
}
input[type='submit'], button
{
	font-family: var(--FormButtonFontFamily);
	font-weight: var(--FormButtonFontWeight);
	font-size: var(--FormButtonFontSize);
	text-align: left; 
    vertical-align: baseline;
    background: var(--FormButtonBackgroundColor);
    color: var(--FormButtonTextColor);
}
ul, ol
{
    color: var(--ListColor);
	margin: 0px;
    padding: 0px 0px 0px calc(var(--M3) * var(--PaddingRatio));
	margin-bottom: calc(var(--M1) * var(--MarginRatio));
}
ul ul, ul ol, ol ol, ol ul
{
    margin: calc(var(--D3) * var(--MarginRatio)) 0 0 0;                            /** CanChange on _Root.css: Spacing between UL/OL inside UL/OL **/
}
li 
{
	margin: calc(var(--D3) * var(--MarginRatio)) 0px calc(var(--D3) * var(--MarginRatio)) 0px;        /** CanChange on _Root.css: Inter LI Spacing, typically D3 or D2 **/
}
table, tr, td, th, thead, tfoot, tbody
{
	margin: 0px;
	padding: 0px;
	clear: none;
    text-align: left;
	border-spacing: 0;
}
table
{
	border-collapse: collapse;
}
td, th
{
	vertical-align: top;
}
strong
{
    font-weight: var(--StrongFontWeight);
}

/**************************** ADDITIONAL STYLING FOR Hs ELEMENTS **********************/
/* Your styles in here */
/* Font family, weight are var-configured, but can be overriden. Text-align is configured above.*/
/* Required configurations include font-size and color; padding and margin and line-height. */

h1 
{
	font-size: calc(var(--T1) * var(--HeaderRatio));
    padding: calc(var(--T1P) * var(--PaddingRatio)) 0px 0px 0px;
    margin: calc(var(--T1M) * var(--MarginRatio)) 0px calc(var(--T1M) * var(--MarginRatio)) 0px;
    line-height: calc(var(--T1) * var(--HeaderRatio) * var(--HsLineHeightRatio));
}
h2
{
	font-size: calc(var(--T2) * var(--HeaderRatio));
    padding: calc(var(--T2P) * var(--PaddingRatio)) 0px 0px 0px;
    margin: calc(var(--T2M) * var(--MarginRatio)) 0px calc(var(--T2M) * var(--MarginRatio)) 0px;
    line-height: calc(var(--T2) * var(--HeaderRatio) * var(--HsLineHeightRatio));
}
h3
{
	font-size: calc(var(--T3) * var(--HeaderRatio));
    padding: calc(var(--T3P) * var(--PaddingRatio)) 0px 0px 0px;
    margin: calc(var(--T3M) * var(--MarginRatio)) 0px calc(var(--T3M) * var(--MarginRatio)) 0px;
    line-height: calc(var(--T3) * var(--HeaderRatio) * var(--HsLineHeightRatio));
}
h4
{
	font-size: calc(var(--T4) * var(--HeaderRatio));
    padding: calc(var(--T4P) * var(--PaddingRatio)) 0px 0px 0px;
    margin: calc(var(--T4M) * var(--MarginRatio)) 0px calc(var(--T4M) * var(--MarginRatio)) 0px;
    line-height: calc(var(--T4) * var(--HeaderRatio) * var(--HsLineHeightRatio));
}
h5
{
	font-size: calc(var(--T5) * var(--HeaderRatio));
    padding: calc(var(--T5P) * var(--PaddingRatio)) 0px 0px 0px;
    margin: calc(var(--T5M) * var(--MarginRatio)) 0px calc(var(--T5M) * var(--MarginRatio)) 0px;
    line-height: calc(var(--T5) * var(--HeaderRatio) * var(--HsLineHeightRatio));
}
h6
{
	font-size: calc(var(--T6) * var(--HeaderRatio));
    padding: calc(var(--T6P) * var(--PaddingRatio)) 0px 0px 0px;
    margin: calc(var(--T6M) * var(--MarginRatio)) 0px calc(var(--T6M) * var(--MarginRatio)) 0px;
    line-height: calc(var(--T6) * var(--HeaderRatio) * var(--HsLineHeightRatio));
}

/****************************  ADDITIONAL STYLING FOR FORM CONTROL ELEMENTS **/
input:not([type='submit']):not([type='file']):not([type='radio']):not([type='checkbox']), select, textarea
{
    padding: calc(var(--FormControlPaddingV) * var(--PaddingRatio)) calc(var(--FormControlPaddingH) * var(--PaddingRatio));
    border-radius: var(--FormControlRadius);
    box-sizing: border-box;
    outline: none;
    border: var(--FormControlBorder);
    box-shadow: var(--FormControlShadow);
}
textarea
{
    resize: none;
}
input:not([type='submit']):not([type='radio']):not([type='checkbox']), select
{
    height: var(--FormControlHeight);
}
label {
    user-select: none;
    cursor: pointer;
}

/**************************** APS Class - If not used, first H's, P's, OL's, UL's have a margin-top and padding-top of 0; and last childs have a margin-bottom of 0 **/
div>h1:not(.APS):first-child, div>h2:not(.APS):first-child, div>h3:not(.APS):first-child, div>h4:not(.APS):first-child, div>h5:not(.APS):first-child, div>h6:not(.APS):first-child, div>p:not(.APS):first-child, div>ul:not(.APS):first-child, div>ol:not(.APS):first-child,
td>h1:not(.APS):first-child, td>h2:not(.APS):first-child, td>h3:not(.APS):first-child, td>h4:not(.APS):first-child, td>h5:not(.APS):first-child, td>h6:not(.APS):first-child, td>p:not(.APS):first-child, td>ul:not(.APS):first-child, td>ol:not(.APS):first-child,
th>h1:not(.APS):first-child, th>h2:not(.APS):first-child, th>h3:not(.APS):first-child, th>h4:not(.APS):first-child, th>h5:not(.APS):first-child, th>h6:not(.APS):first-child, th>p:not(.APS):first-child, th>ul:not(.APS):first-child, th>ol:not(.APS):first-child,
li:not(.APS):first-child
{
    margin-top: 0;
	padding-top: 0;
}
div>h1:not(.APS):last-child, div>h2:not(.APS):last-child, div>h3:not(.APS):last-child, div>h4:not(.APS):last-child, div>h5:not(.APS):last-child, div>h6:not(.APS):last-child, div>p:not(.APS):last-child, div>ul:not(.APS):last-child, div>ol:not(.APS):last-child,
td>h1:not(.APS):last-child, td>h2:not(.APS):last-child, td>h3:not(.APS):last-child, td>h4:not(.APS):last-child, td>h5:not(.APS):last-child, td>h6:not(.APS):last-child, td>p:not(.APS):last-child, td>ul:not(.APS):last-child, td>ol:not(.APS):last-child,
th>h1:not(.APS):last-child, th>h2:not(.APS):last-child, th>h3:not(.APS):last-child, th>h4:not(.APS):last-child, th>h5:not(.APS):last-child, th>h6:not(.APS):last-child, th>p:not(.APS):last-child, th>ul:not(.APS):last-child, th>ol:not(.APS):last-child,
li:not(.APS):last-child
{
	margin-bottom: 0;
}

/**************************** FIX ELEMENTS **/
div, form { margin: 0px; padding: 0px; }
div { padding-top: 0.02px; padding-bottom: 0.02px; text-align: left; }
img { border: none; display: block;}
p img { display: inline;}
table { border-spacing: 0px; border-collapse: collapse; }
td, th { border-spacing: 0px; vertical-align: top; }
object {display: block}

/**************************** A ELEMENT **/
a 
{
    color: var(--AColor);
    text-decoration: none;
	cursor: pointer;
	font-weight: inherit;
}
a:hover
{
    text-decoration: underline;
}
a:hover, a:active
{
	outline: none;
}

/**************************** LEGACY STYLES **********************/
.Bordered 
{
    border: black 1px solid;
}

/**************************** LAYOUT BLOCKS & INLINEs ***********************/
.CenterSelfBlock
{
    margin-left: auto;
    margin-right: auto;
    width: max-content;
    display: block;
}
.RightSelfBlock
{
    margin-left: auto;
    margin-right: 0;
    width: max-content;
    display: block;
}
.CenterChildrenInlineBlocks
{
    text-align: center;
}
span.NoBreak
{
	white-space: nowrap;
	text-wrap: avoid;
}
DIV.CenterContentWrapper
{
    width: 100%; margin-left: auto; margin-right: auto; max-width: var(--LayoutMaxWidth)
}
DIV.CenterContent	
{
    margin-left: var(--LayoutMargin); margin-right: var(--LayoutMargin); overflow-x: clip; 
}

/**************************** VALIDATOR **********************/
div.ValidatorErrors 
{    
	background-color: var(--ValidatorErrorBackgroundColor);
	border: none;
	margin-bottom: calc(var(--M1) * var(--MarginRatio));
    padding: calc(var(--M1) * var(--PaddingRatio)) 0;
    box-sizing: border-box;
    display: none;
    border-radius: var(--FormControlRadius);
    margin-bottom: calc(var(--M2) * var(--MarginRatio));
}
div.ValidatorErrors p {
	color: var(--ValidatorErrorTextColor);
	margin: calc(var(--D2) * var(--FontRatio)) calc(var(--M1) * var(--FontRatio));
}
div.ValidatorOK
{
	background-color: var(--ValidatorOKBackgroundColor);
	border: none;
	margin-bottom: calc(var(--M1) * var(--MarginRatio));
    padding: calc(var(--M1) * var(--PaddingRatio)) 0;
    box-sizing: border-box;
    display: none;
    border-radius: var(--FormControlRadius);
    margin-bottom: calc(var(--M2) * var(--MarginRatio));
}
div.ValidatorOK p {
	color: var(--ValidatorOKTextColor);
	margin: calc(var(--D2) * var(--FontRatio)) calc(var(--M1) * var(--FontRatio));
}
div.ButtonResultOK /* This is the style while showing the OK result*/
{
    cursor: wait !important;
    background-color: var(--ValidatorOKBackgroundColor) !important;
}
div.ButtonSubmitting
{
    cursor: wait;
}

div.ResultOK {
} /* This is the class that is set on the div's when the result OK shows, can be changed in _Root.css */

/**************************** END **********************/
/**************************** END **********************/
/**************************** END **********************/

/**************************** _FormGrid.v4.css ****************************/
div.FormGrid
{
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-column-gap: 0;
    grid-row-gap: 4px;
    align-items: stretch;
}

div.FormGrid div.Field input[type='text'], div.FormGrid div.Field input[type='password'], div.FormGrid div.Field select, div.FormGrid div.Field textarea {
    display: inline-block;
    min-width: 240px;
    box-sizing: border-box;
    vertical-align: baseline;
    width: 100%;
}
div.FormGrid div.ColumnSpanner input[type='text'], div.FormGrid div.ColumnSpanner input[type='password'], div.FormGrid div.ColumnSpanner select, div.FormGrid div.ColumnSpanner textarea {
    box-sizing: border-box;
    width: 100%;
}
div.FormGrid>div
{
    padding: 4px 0;
    align-self: baseline;
}
div.FormGrid>div.Background.ErrorField
{
    background-color: var(--ValidatorErrorBackgroundColor);
    align-self: stretch;
    border-radius: 6px;
}
div.FormGrid>div.ErrorField, div.FormGrid>div.ErrorField p
{
    color: var(--White);
}
div.FormGrid>div.ColumnSpanner p
{
    margin-top: 8px;
    margin-bottom: 12px;
}

div.FormGrid>div.Caption
{
    padding-right: 20px;
}
div.FormGrid>div.ButtonWrapper
{
    padding-top: 12px;
}


div.FormGrid div.Background:nth-child(1) { grid-row: 1; grid-column: 1/3; }
div.FormGrid div.Background:nth-child(4) { grid-row: 2; grid-column: 1/3; }
div.FormGrid div.Background:nth-child(7) { grid-row: 3; grid-column: 1/3; }
div.FormGrid div.Background:nth-child(10) { grid-row: 4; grid-column: 1/3; }
div.FormGrid div.Background:nth-child(13) { grid-row: 5; grid-column: 1/3; }
div.FormGrid div.Background:nth-child(16) { grid-row: 6; grid-column: 1/3; }
div.FormGrid div.Background:nth-child(19) { grid-row: 7; grid-column: 1/3; }
div.FormGrid div.Background:nth-child(22) { grid-row: 8; grid-column: 1/3; }
div.FormGrid div.Background:nth-child(25) { grid-row: 9; grid-column: 1/3; }
div.FormGrid div.Background:nth-child(28) { grid-row: 10; grid-column: 1/3; }
div.FormGrid div.Background:nth-child(31) { grid-row: 11; grid-column: 1/3; }
div.FormGrid div.Background:nth-child(34) { grid-row: 12; grid-column: 1/3; }
div.FormGrid div.Background:nth-child(37) { grid-row: 13; grid-column: 1/3; }
div.FormGrid div.Background:nth-child(40) { grid-row: 14; grid-column: 1/3; }
div.FormGrid div.Background:nth-child(43) { grid-row: 15; grid-column: 1/3; }

div.FormGrid div.Caption:nth-child(2) { grid-row: 1; grid-column: 1; }
div.FormGrid div.Caption:nth-child(5) { grid-row: 2; grid-column: 1; }
div.FormGrid div.Caption:nth-child(8) { grid-row: 3; grid-column: 1; }
div.FormGrid div.Caption:nth-child(11) { grid-row: 4; grid-column: 1; }
div.FormGrid div.Caption:nth-child(14) { grid-row: 5; grid-column: 1; }
div.FormGrid div.Caption:nth-child(17) { grid-row: 6; grid-column: 1; }
div.FormGrid div.Caption:nth-child(20) { grid-row: 7; grid-column: 1; }
div.FormGrid div.Caption:nth-child(23) { grid-row: 8; grid-column: 1; }
div.FormGrid div.Caption:nth-child(26) { grid-row: 9; grid-column: 1; }
div.FormGrid div.Caption:nth-child(29) { grid-row: 10; grid-column: 1; }
div.FormGrid div.Caption:nth-child(32) { grid-row: 11; grid-column: 1; }
div.FormGrid div.Caption:nth-child(35) { grid-row: 12; grid-column: 1; }
div.FormGrid div.Caption:nth-child(38) { grid-row: 13; grid-column: 1; }
div.FormGrid div.Caption:nth-child(41) { grid-row: 14; grid-column: 1; }
div.FormGrid div.Caption:nth-child(44) { grid-row: 15; grid-column: 1; }

div.FormGrid div.Field:nth-child(3) { grid-row: 1; grid-column: 2; }
div.FormGrid div.Field:nth-child(6) { grid-row: 2; grid-column: 2; }
div.FormGrid div.Field:nth-child(9) { grid-row: 3; grid-column: 2; }
div.FormGrid div.Field:nth-child(12) { grid-row: 4; grid-column: 2; }
div.FormGrid div.Field:nth-child(15) { grid-row: 5; grid-column: 2; }
div.FormGrid div.Field:nth-child(18) { grid-row: 6; grid-column: 2; }
div.FormGrid div.Field:nth-child(21) { grid-row: 7; grid-column: 2; }
div.FormGrid div.Field:nth-child(24) { grid-row: 8; grid-column: 2; }
div.FormGrid div.Field:nth-child(27) { grid-row: 9; grid-column: 2; }
div.FormGrid div.Field:nth-child(30) { grid-row: 10; grid-column: 2; }
div.FormGrid div.Field:nth-child(33) { grid-row: 11; grid-column: 2; }
div.FormGrid div.Field:nth-child(36) { grid-row: 12; grid-column: 2; }
div.FormGrid div.Field:nth-child(39) { grid-row: 13; grid-column: 2; }
div.FormGrid div.Field:nth-child(42) { grid-row: 14; grid-column: 2; }
div.FormGrid div.Field:nth-child(45) { grid-row: 15; grid-column: 2; }

div.FormGrid.div.ButtonWrapper:nth-child(1) { grid-row: 1; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(4) { grid-row: 2; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(7) { grid-row: 3; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(10) { grid-row: 4; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(13) { grid-row: 5; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(16) { grid-row: 6; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(19) { grid-row: 7; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(22) { grid-row: 8; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(25) { grid-row: 9; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(28) { grid-row: 10; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(31) { grid-row: 11; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(34) { grid-row: 12; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(37) { grid-row: 13; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(40) { grid-row: 14; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(43) { grid-row: 15; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(46) { grid-row: 16; grid-column: 2 }

div.FormGrid div.ColumnSpanner:nth-child(2) {grid-row: 1; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(5) {grid-row: 2; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(8) {grid-row: 3; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(11) {grid-row: 4; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(14) {grid-row: 5; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(17) {grid-row: 6; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(20) {grid-row: 7; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(23) {grid-row: 8; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(26) {grid-row: 9; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(29) {grid-row: 10; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(32) {grid-row: 11; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(35) {grid-row: 12; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(38) {grid-row: 13; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(41) {grid-row: 14; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(44) {grid-row: 15; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(47) {grid-row: 16; grid-column: 1/3}

div.FormGrid.AtLeastOneError div.Caption, div.FormGrid.AtLeastOneError div.ColumnSpanner
{
    padding-left: 12px;
}
div.FormGrid.AtLeastOneError div.Field, div.FormGrid.AtLeastOneError div.ColumnSpanner
{
    padding-right: 12px;
}
div.FormGrid.ResultOK div.Caption, div.FormGrid.ResultOK div.Field
{
}     /* I could do the same as above if I need to show something on the fields when the result is OK */

@media (max-width: 1200px) and (min-width: 900px), (max-width: 500px) {
    div.FormGrid
    {
        display: grid;
        grid-template-columns: 1fr;
        grid-column-gap: 0;
        grid-row-gap: 0;
        align-items: stretch;
    }
    div.FormGrid>div.Background 
    {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    div.FormGrid>div.Caption
    {
        padding: 4px 0 4px 0 ;
    }
    div.FormGrid>div.Field
    {
        padding: 0 0 4px 0 ;
    }
    div.FormGrid>div.ColumnSpanner p
    {
        margin-top: 4px;
        margin-bottom: 4px;
    }

    div.FormGrid div.Background:nth-child(1) { grid-row: 1/3; grid-column: 1; margin-bottom: 4px;}
    div.FormGrid div.Background:nth-child(4) { grid-row: 3/5; grid-column: 1; margin-bottom: 4px;}
    div.FormGrid div.Background:nth-child(7) { grid-row: 5/7; grid-column: 1; margin-bottom: 4px;}
    div.FormGrid div.Background:nth-child(10) { grid-row: 7/9; grid-column: 1; margin-bottom: 4px;}
    div.FormGrid div.Background:nth-child(13) { grid-row: 9/11; grid-column: 1; margin-bottom: 4px;}
    div.FormGrid div.Background:nth-child(16) { grid-row: 11/13; grid-column: 1; margin-bottom: 4px;}
    div.FormGrid div.Background:nth-child(19) { grid-row: 13/15; grid-column: 1; margin-bottom: 4px;}
    div.FormGrid div.Background:nth-child(22) { grid-row: 15/17; grid-column: 1; margin-bottom: 4px;}
    div.FormGrid div.Background:nth-child(25) { grid-row: 17/19; grid-column: 1; margin-bottom: 4px;}
    div.FormGrid div.Background:nth-child(28) { grid-row: 19/21; grid-column: 1; margin-bottom: 4px;}
    div.FormGrid div.Background:nth-child(31) { grid-row: 21/23; grid-column: 1; margin-bottom: 4px;}
    div.FormGrid div.Background:nth-child(34) { grid-row: 23/25; grid-column: 1; margin-bottom: 4px;}
    div.FormGrid div.Background:nth-child(37) { grid-row: 25/27; grid-column: 1; margin-bottom: 4px;}
    div.FormGrid div.Background:nth-child(40) { grid-row: 27/29; grid-column: 1; margin-bottom: 4px;}
    div.FormGrid div.Background:nth-child(43) { grid-row: 29/31; grid-column: 1; margin-bottom: 4px;}

    div.FormGrid div.Caption:nth-child(2) { grid-row: 1; grid-column: 1; }
    div.FormGrid div.Caption:nth-child(5) { grid-row: 3; grid-column: 1; }
    div.FormGrid div.Caption:nth-child(8) { grid-row: 5; grid-column: 1; }
    div.FormGrid div.Caption:nth-child(11) { grid-row: 7; grid-column: 1; }
    div.FormGrid div.Caption:nth-child(14) { grid-row: 9; grid-column: 1; }
    div.FormGrid div.Caption:nth-child(17) { grid-row: 11; grid-column: 1; }
    div.FormGrid div.Caption:nth-child(20) { grid-row: 13; grid-column: 1; }
    div.FormGrid div.Caption:nth-child(23) { grid-row: 15; grid-column: 1; }
    div.FormGrid div.Caption:nth-child(26) { grid-row: 17; grid-column: 1; }
    div.FormGrid div.Caption:nth-child(29) { grid-row: 19; grid-column: 1; }
    div.FormGrid div.Caption:nth-child(32) { grid-row: 21; grid-column: 1; }
    div.FormGrid div.Caption:nth-child(35) { grid-row: 23; grid-column: 1; }
    div.FormGrid div.Caption:nth-child(38) { grid-row: 25; grid-column: 1; }
    div.FormGrid div.Caption:nth-child(41) { grid-row: 27; grid-column: 1; }
    div.FormGrid div.Caption:nth-child(44) { grid-row: 29; grid-column: 1; }

    div.FormGrid div.Field:nth-child(3) { grid-row: 2; grid-column: 1; margin-bottom: 12px; }
    div.FormGrid div.Field:nth-child(6) { grid-row: 4; grid-column: 1; margin-bottom: 12px; }
    div.FormGrid div.Field:nth-child(9) { grid-row: 6; grid-column: 1; margin-bottom: 12px; }
    div.FormGrid div.Field:nth-child(12) { grid-row: 8; grid-column: 1; margin-bottom: 12px; }
    div.FormGrid div.Field:nth-child(15) { grid-row: 10; grid-column: 1; margin-bottom: 12px; }
    div.FormGrid div.Field:nth-child(18) { grid-row: 12; grid-column: 1; margin-bottom: 12px; }
    div.FormGrid div.Field:nth-child(21) { grid-row: 14; grid-column: 1; margin-bottom: 12px; }
    div.FormGrid div.Field:nth-child(24) { grid-row: 16; grid-column: 1; margin-bottom: 12px; }
    div.FormGrid div.Field:nth-child(27) { grid-row: 18; grid-column: 1; margin-bottom: 12px; }
    div.FormGrid div.Field:nth-child(30) { grid-row: 20; grid-column: 1; margin-bottom: 12px; }
    div.FormGrid div.Field:nth-child(33) { grid-row: 22; grid-column: 1; margin-bottom: 12px; }
    div.FormGrid div.Field:nth-child(36) { grid-row: 24; grid-column: 1; margin-bottom: 12px; }
    div.FormGrid div.Field:nth-child(39) { grid-row: 26; grid-column: 1; margin-bottom: 12px; }
    div.FormGrid div.Field:nth-child(42) { grid-row: 28; grid-column: 1; margin-bottom: 12px; }
    div.FormGrid div.Field:nth-child(45) { grid-row: 30; grid-column: 1; margin-bottom: 12px; }

    div.FormGrid.div.ButtonWrapper:nth-child(1) { grid-row: 1; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(4) { grid-row: 3; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(7) { grid-row: 5; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(10) { grid-row: 7; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(13) { grid-row: 9; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(16) { grid-row: 11; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(19) { grid-row: 13; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(22) { grid-row: 15; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(25) { grid-row: 17; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(28) { grid-row: 19; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(31) { grid-row: 21; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(34) { grid-row: 23; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(37) { grid-row: 25; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(40) { grid-row: 27; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(43) { grid-row: 29; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(46) { grid-row: 31; grid-column: 1 }

    div.FormGrid div.ColumnSpanner:nth-child(2) {grid-row: 1; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(5) {grid-row: 3; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(8) {grid-row: 5; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(11) {grid-row: 7; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(14) {grid-row: 9; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(17) {grid-row: 11; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(20) {grid-row: 13; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(23) {grid-row: 15; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(26) {grid-row: 17; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(29) {grid-row: 19; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(32) {grid-row: 21; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(35) {grid-row: 23; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(38) {grid-row: 25; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(41) {grid-row: 27; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(44) {grid-row: 29; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(47) {grid-row: 31; grid-column: 1; margin-bottom: 12px;}


    div.FormGrid.AtLeastOneError div.Caption
    {
        padding-left: 12px;
        padding-right: 12px;
    }
    div.FormGrid.AtLeastOneError div.Field
    {
        padding-left: 12px;
        padding-right: 12px;
    }
    div.FormGrid.ResultOK div.Caption, div.FormGrid.ResultOK div.Field
    {
    }     /* I could do the same as above if I need to show something on the fields when the result is OK */

    
}

div.FormGrid div.Field table.RadioFields
{
    display: inline-block;
    vertical-align: top;
}
div.FormGrid div.Field table.RadioFields td {
    display: inline-block;
    vertical-align: unset;
}
div.FormGrid div.Field input[type='radio']
{
    vertical-align: baseline;
}
div.FormGrid div.Field table.RadioFields p {
    display: inline-block;
    vertical-align: baseline;
    margin-bottom: 0;
}

div.FormGrid div.Field.ErrorField>input {
    background-color: var(--ValidatorErrorFieldBackgroundColor);
    color: var(--ValidatorErrorFieldTextColor);
}

form div.FieldHighlighter
{
    position: absolute;
    clip-path: polygon(0 20px, 20px 20px, 40px 0, 60px 20px, 100% 20px, 100% 100%, 0 100%, 0 0);
    background-color: var(--ValidatorFieldHighlighterBackgroundColor);
    display: none;
    padding: 30px 10px 10px 10px;
    color: var(--ValidatorFieldHighlighterTextColor);
}
form div.FieldHighlighter p
{
    color: var(--ValidatorFieldHighlighterTextColor);
}

/**************************** _Root.css ****************************/
/* Override Hs*/
h1 {
    font-weight: 400;
}
h2 {
    font-weight: 400;
    color: var(--Orange1);
    text-transform: uppercase;
}
h3 {
    font-weight: 400;
    text-transform: uppercase;
}
h4 {
    font-weight: 400;
    color: var(--Green);
    text-transform: uppercase;
}
h5 {
    color: var(--Green);
}
h6 {
    color: var(--Green);
}

/* Other classes*/
div.WidthConstraint
{
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
    box-sizing: border-box;
}
div.WidthConstraintTight
{
	max-width: 850px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
    box-sizing: border-box;
}
div.WidthConstraintNoPadding
{
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
    box-sizing: border-box;
}

div.Separation4x
{
    height: var(--M4);
}
div.Separation8x
{
    height: var(--M8);
}

div.GrayGradientBottom
{
    background-image: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, transparent 120px);
}
body
{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main
{
    flex: 1;
}
div.ButtonMore
{
    text-align: right;
    border-radius: var(--M1);
    box-shadow: rgba(255,255,255,1) 0 0 10px 5px;
    background-color: rgba(255,255,255,0.2);
    padding: 0 var(--M1);
    cursor: pointer;
}
div.ButtonMore img
{
    width: var(--T1);
    display: inline-block;
    vertical-align: middle;
}


/**************************** _Variables.css ****************************/
:root
{
    /* Standard variables*/
    --FontRatio: 1;
    --HeaderRatio: 1;
    --PaddingRatio: 1;
    --MarginRatio: 1;
    --FontRatioFixed: 1;

    --BodyBackgroundColor: #ffffff;

    --MainFontFamily: 'Rubik', sans-serif;
    --MainFontWeight: 340;
    --MainFontSize: var(--T0);
    --MainLineHeightRatio: 1.5;
    --MainFontColor: var(--BodyText);

    --HsFontFamily: 'BioSans-Regular', sans-serif;
    --HsFontWeight: 700;
    --HsLineHeightRatio: 1.25;
    --HsColor: var(--Blue);

    --FormControlFontFamily: 'Nunito Sans', sans-serif;
    --FormControlFontWeight: 400;
    --FormControlFontSize: 16px;
    --FormControlTextColor: var(--Black);
    --FormControlBackgroundColor: var(--White);
    --FormControlShadow: #cccccc 2px 2px 4px inset;
    --FormControlPaddingV: 8px;
    --FormControlPaddingH: 20px;
    --FormControlRadius: var(--D2);
    --FormControlBorder: 2px solid #ffffff;
    --FormControlHeight: 50px;

    --FormButtonFontFamily: 'Nunito Sans', sans-serif;
    --FormButtonFontWeight: 700;
    --FormButtonFontSize: 1.3rem;
    --FormButtonTextColor: var(--White);
    --FormButtonBackgroundColor: var(--Orange1);
    --FormButtonTextColorHover: var(--White);
    --FormButtonBackgroundColorHover: var(--Orange2);

    --ValidatorOKBackgroundColor: var(--DarkGrayBackground);
    --ValidatorOKTextColor: var(--White);
    --ValidatorErrorBackgroundColor: var(--Orange1);
    --ValidatorErrorTextColor: var(--White);
    --ValidatorFieldHighlighterBackgroundColor: var(--Orange2);
    --ValidatorFieldHighlighterTextColor: var(--White);
    --ValidatorErrorFieldBackgroundColor: var(--Orange2);
    --ValidatorErrorFieldTextColor: var(--White);

    --ListColor: var(--Orange1);
    --AColor: var(--Orange1);
    --StrongFontWeight: 550;

    --LayoutMaxWidth: 1280px;
    --LayoutMargin: 20px;

    --M1: 12px;
    --M2: 24px;
    --M3: 36px;
    --M4: 48px;
    --M8: 96px;
    --M10: 120px;
    --M12: 144px;
    --D2: 6px;
    --D3: 4px;
    --D6: 2px;

    --T0: 18px;     --T0MA: 18px;      --T0MB: 36px;  /* For standard texts, T0MA is typically M1, while T0MB can be M1 or M2 */
    --T1: 48px;     --T1M: 48px;   --T1P: 48px;   /* As H1 */
    --T2: 36px;     --T2M: 36px;   --T2P: 36px;   /* As H2 */
    --T3: 28px;     --T3M: 28px;   --T3P: 28px;     /* As H3 */
    --T4: 24px;     --T4M: 24px;   --T4P: 24px;     /* As H4 */
    --T5: 21px;     --T5M: 21px;   --T5P: 21px;     /* As H5 */
    --T6: 18px;     --T6M: 18px;   --T6P: 18px;     /* As H6 */

    /* Custom colors & variables*/
    --BodyText: #8b5e3c;
    --Orange1: #f58220;
    --Orange2: #f15a29;
    --Yellow1: #fbb040;
    --Brown1: #c49a6c;
    --Brown2: #8b5e3c;	
    --DarkerBrown2: #66452c;
    --DarkestBrown2: #402b1b;
    --White: #ffffff;
    --GrayBackground: #f0f0f0;
    --DarkGrayBackground: #909090;
    --DarkGrayButton: #707070;
    --DarkGrayBorder: #333333;
    --Black: #000000;
}
@media (max-width: 1000px)
{
    :root
    {
        --M1: 9px;
        --M2: 18px;
        --M3: 27px;
        --M4: 36px;
        --M8: 72px;
        --M10: 90px;
        --M12: 108px;
        --D2: 6px;
        --D3: 4px;
        --D6: 2px;

        --T0: 16.5px;
        --T1: 44px;
        --T2: 33px;
        --T3: 26px;
        --T4: 22px;
        --T5: 19px;
        --T6: 16.5px;
    }
}
@media (max-width: 800px)
{
    :root
    {
        --M1: 8px;
        --M2: 16px;
        --M3: 24px;
        --M4: 32px;
        --M8: 64px;
        --M10: 80px;
        --M12: 96px;
        --D2: 6px;
        --D3: 4px;
        --D6: 2px;

        --T0: 15px;
        --T1: 40px;
        --T2: 30px;
        --T3: 23px;
        --T4: 20px;
        --T5: 17.5px;
        --T6: 15px;
    }
}
@media (max-width: 500px)
{
    :root
    {
        --M1: 6px;
        --M2: 12px;
        --M3: 18px;
        --M4: 24px;
        --M8: 48px;
        --D2: 6px;
        --D3: 4px;
        --D6: 2px;

        --T0: 13.5px;
        --T1: 36px;
        --T2: 27px;
        --T3: 21px;
        --T4: 18px;
        --T5: 16px;
        --T6: 13.5px;
    }
}

/* IMPORTANT CLASSES FOR LAYOUT */

/* Inside Grids, .Item's that need to have: div.Image, h4, div.Desc, div.Link & div.Progress*/

/* Section.Content can be .WhiteBackground or .GrayBackground */
/* Inside Section.Content, a div.Content that is .Read (adjusts line height) and .ConstraintWidth or .ConstraintWidthTight */

/* To float images, div.AvoidWidows with two divs inside: div.FL & div.Content */

/**************************** BoardOfDirectors.css ****************************/
div.BoardOfDirectors
{
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: calc(0px - var(--M8));
}
div.BoardOfDirectors div.Grid
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: var(--M4);
    grid-row-gap: var(--M4);
    position: relative;
    top: calc(0px - var(--M8))
}
@media (max-width: 1200px)
{
    div.BoardOfDirectors div.Grid
    {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 800px)
{
    div.BoardOfDirectors div.Grid
    {
        grid-template-columns: 1fr;
    }
}
div.BoardOfDirectors div.Grid > div
{
    background-color: var(--GrayBackground);
    padding: var(--M4);
    border-radius: var(--M1);
}
div.BoardOfDirectors div.Grid > div > div.Bio > h3
{
    color: var(--Orange1);
}
div.BoardOfDirectors p.More
{
    display: none;
}

/**************************** CompanyCoreValues.css ****************************/
div.CompanyCoreValuesWrapper
{
    background-color: var(--Orange1);
    padding-top: var(--M12);
    padding-bottom: var(--M8);
}
div.CompanyCoreValues h2, div.CompanyCoreValues > p
{
    color: var(--White);
}
div.CompanyCoreValues div.Grid
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: var(--M4);
    grid-row-gap: var(--M4);
}
@media (max-width: 1000px)
{
    div.CompanyCoreValues div.Grid
    {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 500px)
{
    div.CompanyCoreValues div.Grid
    {
        grid-template-columns: 1fr;
    }
}


/**************************** ExecutiveTeam.css ****************************/
div.ExecutiveTeam
{
    padding-top: var(--M4);
    padding-bottom: var(--M4);
}
div.ExecutiveTeam div.Grid
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: var(--M4);
    grid-row-gap: var(--M4);
}
div.ExecutiveTeam div.Grid > div
{
    display: flex;
    flex-direction: column;
}
div.ExecutiveTeam div.Grid > div > img
{
    flex: 0 0 auto;
}
div.ExecutiveTeam div.Grid > div > div
{
    flex: 1;
}

@media (max-width: 1200px) {
    div.ExecutiveTeam div.Grid
    {
        grid-template-columns: 1fr;
    }
    div.ExecutiveTeam div.Grid > div
    {
        display: grid;
        grid-template-columns: 300px 1fr;
        grid-column-gap: 0;
    }
}
@media (max-width: 800px) {
    div.ExecutiveTeam div.Grid
    {
        grid-template-columns: 1fr;
    }
    div.ExecutiveTeam div.Grid > div
    {
        display: block;
    }
}
div.ExecutiveTeam div.Grid > div
{
    position: relative;
}
div.ExecutiveTeam div.Grid > div > img
{
    width: calc(100% - var(--M4) - var(--M1));
    box-sizing: border-box;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    z-index: 2;
    position: relative;
    border: solid var(--D2) var(--White);
    box-shadow: var(--DarkGrayBorder) 0 0 0 var(--D2);
}
div.ExecutiveTeam div.Grid > div > div
{
    position: relative;
    top: calc(0px - var(--M4));
    padding-top: calc(var(--M4) + var(--M2));
}
@media (max-width: 1200px) {
    div.ExecutiveTeam div.Grid > div > div
    {
        position: relative;
        top: 0;
        padding-top: var(--M2);
    }
}
@media (max-width: 800px)
{
    div.ExecutiveTeam div.Grid > div > div
    {
        position: relative;
        top: calc(0px - var(--M4));
        padding-top: calc(var(--M4) + var(--M4));
    }
}
div.ExecutiveTeam p.Position
{
    margin-top: 0;
    padding-top: 0;
    color: var(--White);
}
div.ExecutiveTeam h3
{
    margin-bottom: 0;
    padding-bottom: 0;
}


/**************************** Footer.css ****************************/
footer
{
    min-height: var(--M4);
    background-color: var(--DarkestBrown2);
    padding-top: var(--M8);
    padding-bottom: var(--M8);
    border-top: solid var(--M8) var(--Orange1);
}
footer p
{
    color: var(--White);
}
footer img
{
    filter: brightness(1000%);
    max-width: 400px;
}
footer div.Sections
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: var(--M8);
}
@media (max-width: 1000px)
{
    footer div.Sections
    {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px)
{
    footer div.Sections
    {
        grid-template-columns: 1fr;
    }
}
footer div.Sections>div
{
    padding-top: var(--T0);
}
footer p.Small
{
    font-size: 14px;
}
footer li a
{
    color: var(--White);
    text-decoration: none;
}
footer li a:hover
{
    text-decoration: underline;
}

/**************************** Form.css ****************************/
form button {
    padding: var(--M1) var(--M2);
    color: var(--White);
    font-weight: 400;
    border-radius: var(--M1);
    text-align: center;
    cursor: pointer;
    box-shadow: rgba(255,255,255,0.5) 0 0 10px;
    height: 100%;
    transition: all linear 0.25s;
    background-color: var(--Orange1);
    box-sizing: border-box;
}
form button:hover
{
    background-color: var(--Orange2);
    box-shadow: rgba(0,0,0,0.2) 0 0 10px;
    transition: all linear 0.25s;
}
form textarea
{
    height: 180px;
    padding-bottom: var(--M1);
    padding-top: var(--M1);
}
form#CUSForm
{
    padding-bottom: var(--M4);
}

/**************************** GridOverOrange.css ****************************/
div.GridOverOrange > div
{
    background-color: rgba(255,255,255,0.1);
    box-shadow: rgba(255,255,255,0.8) 0 0 4px;
    border-radius: var(--M1);
    padding: var(--M2);
}
div.GridOverOrangeWithImages > div > div
{
    background-color: rgba(255,255,255,0.1);
    box-shadow: rgba(255,255,255,0.8) 0 0 4px;
    border-radius: var(--M1);
    padding: var(--M2);
}
div.GridOverOrange h2, div.GridOverOrange h3, div.GridOverOrange h4, div.GridOverOrangeWithImages h2, div.GridOverOrangeWithImages h3, div.GridOverOrangeWithImages h4
{
    color: var(--DarkerBrown2);
}
div.GridOverOrange p
{
    color: var(--DarkestBrown2);
}

/**************************** IndustryAnalysis.css ****************************/
div.IndustryAnalysis
{
    padding-top: var(--M4);
    column-count: 2;
    column-gap: var(--M8);
}
@media (max-width: 800px) {
    div.IndustryAnalysis
    {
        column-count: 1;
    }
}


/**************************** InternalHeader.css ****************************/
div.InternalHeader
{
    background-image: linear-gradient(20deg, var(--DarkestBrown2) 30%, transparent 100%), url('/images/InternalHeader.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: calc(var(--M4) + 10vw);
    background-position: center bottom;
}
div.InternalHeader h1
{
    color: var(--White);
}

/**************************** InternalPages.css ****************************/
div.Orange
{
    background-color: var(--Orange1);
}
div.Orange p
{
    color: var(--DarkestBrown2);
}
div.TwoTextBoxes
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: var(--M4);
    grid-row-gap: var(--M8);
    padding-top: var(--M8);
    padding-bottom: var(--M8);
}
@media (max-width: 600px) {
    div.TwoTextBoxes
    {
        grid-template-columns: 1fr;
    }
}

/**************************** IsologoDecoration.css ****************************/
div.IsologoDecoration
{
    display: grid;
    grid-template-columns: 1fr var(--M4) var(--M8) var(--M4) 1fr;
    align-items: center;
    padding-top: var(--M4);
    padding-bottom: var(--M4);
}
div.IsologoDecoration img
{
    width: var(--M8);
}
div.IsologoDecoration hr
{
    height: 2px;
    background-color: var(--Brown1);
    width: 100%;
}

/**************************** Menu.css ****************************/
header div.Menu
{
    margin-top: var(--M2);
    display: grid;
    grid-template-columns: repeat(7, 174px);
    grid-column-gap: var(--M2);
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
}
header div.Menu div.Button
{
    padding: var(--M1) var(--M2);
    color: var(--White);
    font-weight: 400;
    border-radius: var(--M1);
    text-align: center;
    cursor: pointer;
    box-shadow: rgba(255,255,255,0.5) 0 0 10px;
    height: 100%;
    transition: all linear 0.25s;
    background-color: var(--Orange1);
    box-sizing: border-box;
}
header div.Menu div.Button a
{
    text-decoration: none;
    color: var(--White);
}
header div.Menu div.ButtonWrapper.Active div.Button
{
    background-color: var(--DarkerBrown2);
}
@media (max-width: 1400px) 
{
    header div.Menu
    {
        display: flex;
        flex-wrap: wrap;
        padding-left: var(--M2);
        padding-right: var(--M2);
    }
    header div.Menu div.ButtonWrapper
    {
        padding-bottom: var(--M1);
    }
}

@media (max-width: 800px) 
{
    header div.Menu
    {
        display: none;
    }
}
header div.Menu div.ButtonWrapper div.Button:hover
{
    background-color: var(--Orange2);
    box-shadow: rgba(0,0,0,0.2) 0 0 10px;
    transition: all linear 0.25s;
}

div.MenuMobile
{
    position: fixed;
    z-index: 5;
    display: none;
    background-color: rgba(255,255,255,0.8);
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: var(--M4);
    padding-bottom: var(--M4);
    box-sizing: border-box;
}

div.MenuMobile div.Menu
{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-left: var(--M4);
    padding-right: var(--M4);
    box-sizing: border-box;
    justify-content:space-around;
    height: 100%;
}
div.MenuMobile div.Menu div.ButtonWrapper
{
    height: calc(100% / 7);
}

div.MenuMobile div.Menu div.Button
{
    padding: var(--M1) var(--M2);
    color: var(--White);
    font-weight: 400;
    font-size: var(--T5);
    border-radius: var(--M1);
    text-align: center;
    cursor: pointer;
    box-shadow: rgba(255,255,255,0.5) 0 0 10px;
    transition: all linear 0.25s;
    background-color: var(--Orange1);
    height: 100%;
}
div.MenuMobile div.Menu div.Button a
{
    color: var(--White);
    text-decoration: none;

}
div.MenuMobile div.Menu div.ButtonWrapper.Active div.Button
{
    background-color: var(--DarkerBrown2);
}
div.MenuMobile div.Menu div.ButtonWrapper div.Button:hover
{
    background-color: var(--Orange2);
    box-shadow: rgba(0,0,0,0.2) 0 0 10px;
    transition: all linear 0.25s;
}


/**************************** OurMission.css ****************************/
div.OurMission 
{
    background-color: var(--DarkGrayBackground);
    padding: var(--M4);
    border-radius: var(--M1);
}
div.OurMission h2, div.OurMission p
{
    color: var(--White);
}
div.OurMission div
{
    column-count: 2;
    column-gap: var(--M8);
}
@media (max-width: 700px) {
    div.OurMission div
    {
        column-count: 1;
    }
}


/**************************** OurVision.css ****************************/
div.OurVision 
{
    background-color: var(--GrayBackground);
    padding: var(--M4);
    border-radius: var(--M1);
}
@media (min-width: 800px)
{
    div.OurVision
    {
        padding-right: 30%;
        background-image: url('/images/OurVisionBack.jpg');
        background-repeat: no-repeat;
        background-position: right center;
        background-size: cover;
    }
}
@media (min-width: 1000px)
{
    div.OurVision
    {
        background-size: contain;
    }
}


/**************************** PicDecoration.css ****************************/
div.PicDecoration img
{
    width: 100%;
    border-radius: var(--M1);
}

/**************************** Staff.css ****************************/
div.Staff
{
    padding-top: var(--M4);
    padding-bottom: var(--M4);
}
div.Staff div.Grid > div
{
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-column-gap: 0;
}

@media (max-width: 800px) {
    div.Staff div.Grid > div
    {
        display: block;
    }
}
div.Staff div.Grid > div
{
    position: relative;
}
div.Staff div.Grid > div > img
{
    width: calc(100% - var(--M4) - var(--M1));
    box-sizing: border-box;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    z-index: 2;
    position: relative;
    border: solid var(--D2) var(--White);
    box-shadow: var(--DarkGrayBorder) 0 0 0 var(--D2);
}
div.Staff div.Grid > div > div
{
    border-radius: var(--M1);
    background-color: var(--GrayBackground);
    padding: var(--M4);
}
@media (max-width: 800px)
{
    div.Staff div.Grid > div > div
    {
        position: relative;
        top: calc(0px - var(--M4));
        padding-top: calc(var(--M4) + var(--M4));
    }
}
div.Staff p.Position
{
    margin-top: 0;
    padding-top: 0;
    color: var(--Orange2);
}
div.Staff h3
{
    color: var(--Orange1);
    margin-bottom: 0;
    padding-bottom: 0;
}

/**************************** TheCompany.css ****************************/
div.TheCompany
{
    column-count: 2;
    column-gap: var(--M8);
    padding-top: var(--M8);
    padding-bottom: 0;
}
@media (max-width: 700px) {
    div.TheCompany {
        column-count: 1;
    }
}

/**************************** Top.css ****************************/
header
{
    position: sticky;
    top: 0;
    z-index: 3;
}
div.TopWrapper
{
    width: 100%;
    min-width: 320px;
}
div.Top1
{
    background-color: var(--Orange1);
    height: var(--M2);
    box-sizing: border-box;
}
div.Top2
{
    background-color: var(--White);
    padding-top: var(--M2);
    padding-bottom: var(--M2);
    padding-left: var(--M2);
    padding-right: var(--M2);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
div.Top2 div.Logo
{
    flex: 1;
    justify-content:flex-start;
}
div.Top2 div.Logo img:hover
{
    cursor: pointer;
}
div.Top2 div.Logo img
{
    height: var(--M8);
    margin-left: auto;
    margin-right: auto;
}
div.Top2 div.Separation
{
    display: none;
}
div.Top2 div.DonateButtonWrapper
{
    position: absolute;
    width: 100%;
    max-width: 1400px;
}
div.Top2 div.DonateButton
{
    background-color: var(--Orange1);
    color: var(--White);
    text-align: center;
    width: auto;
    display: inline-block;
    position: absolute;
    right: var(--M2);
    bottom: -28px;
    height: 30px;
    padding: var(--M1) var(--M2);
    font-weight: 400;
    font-size: var(--T6);
    border-radius: var(--M1);
    cursor: pointer;
    box-shadow: rgba(255,255,255,0.5) 0 0 10px;
    transition: all linear 0.25s;
}
div.Top2 div.MenuMobileButton
{
    display: none;
    flex: 0;
    width: calc(100% - var(--M4));
    height: 100%;
    text-align: center;
    color: var(--White);
    background-color: var(--DarkGrayButton);
    z-index: 3;
    cursor: pointer;
    transition: all linear 0.25s;
}
div.Top2 div.MenuMobileButton:hover
{
    background-color: var(--Orange2);
    transition: all linear 0.25s;
}
@media (max-width: 1000px) {
    div.Top2 div.Logo img
    {
        height: var(--M10);
        max-width: 100%;
    }
}
@media (max-width: 800px) {
    div.Top2 div.Logo img {
        margin-left: 0;
    }
    div.Top2 div.Separation
    {
        display: block;
        flex: 0 0 48px;
    }
    div.Top2 div.MenuMobileButton
    {
        display: block;
        flex: 0 0 80px;
        box-sizing: border-box;
    }
    div.Top2 div.DonateButtonWrapper
    {
        display: none;
    }
}
div.Top3
{
    background-image: linear-gradient(90deg, var(--DarkerBrown2) 0%, var(--Brown1) 50%, var(--DarkerBrown2) 100%);
    min-height: var(--M2);
    box-sizing: border-box;
    padding-top: var(--M3);
    padding-bottom: var(--M3);
}
div.Top3 p
{
    font-size: var(--T2);
    color: var(--White);
    text-align: center;
}
@media (max-width: 600px) {
    div.Top3 p
    {
        font-size: var(--T3);
        color: var(--White);
        text-align: center;
    }
}

div.TopPictureWrapper
{
    height: 75vh;
    max-height: calc(800px + 15vw);
    position: relative;
}
div.TopPicture1
{
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    background-image: url('/images/Home1.webp');
    background-size: cover;
    background-position: center 75%;
    border-bottom: solid var(--M2) var(--Orange1);
}
div.TopPicture2
{
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    background-image: url('/images/Home2.webp');
    background-size: cover;
    background-position: center 0%;
    border-bottom: solid var(--M2) var(--Orange1);
    animation: animTopPicture2 18s infinite;
}
div.TopPicture3
{
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    background-image: url('/images/Home3.webp');
    background-size: cover;
    background-position: center 50%;
    border-bottom: solid var(--M2) var(--Orange1);
    animation: animTopPicture3 18s infinite;
}

@keyframes animTopPicture2
{
    0% { opacity: 0;}
    33% { opacity: 0;}
    36% { opacity: 1;}
    94% { opacity: 1;}
    97% { opacity: 0;}
    100% { opacity: 0;}
}
@keyframes animTopPicture3
{
    0% { opacity: 0;}
    66% { opacity: 0;}
    69% { opacity: 1;}
    97% { opacity: 1;}
    100% { opacity: 0;}
}

div.TopPicture div.MessageWrapper
{
    position: relative;
    width: 100%;
    height: 100%;
}
        
div.Message
{
    background-color: var(--Orange1);
    position: absolute;
    bottom: calc(0px - var(--M4));
    width: 100%;
    min-width: 300px;
    max-width: 750px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    padding: var(--M4);
    box-sizing: border-box;
}
@media (max-width: 800px) {
    div.Message
    {
        bottom: calc(0px - var(--M12));
    }
    div.TopPicture+div
    {
        padding-top: var(--M10);
    }
}
@media (max-width: 1000px) {
    div.Message
    {
        bottom: calc(0px - var(--M10));
    }
    div.TopPicture+div
    {
        padding-top: var(--M8);
    }
}
div.Message p
{
    color: var(--White);
    font-size: var(--T3);
    line-height: calc(var(--T3) * 1.25);
}