/**************************** _Base2023.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);
    background-image: url('/images/Background.webp');
    background-position: center center;                             
    background-size: cover;                                             
    background-attachment: fixed;
	margin: 0px;
	padding: 0px;
	clear: none;
    min-height: 100%;
}

body, p, table, tr, td, th, q, li
{
	font-family: var(--MainFontFamily);
	font-weight: var(--MainFontWeight);
	text-align: left; 
	font-size: calc(var(--MainFontSize) * var(--FontRatio));
    line-height: calc(var(--MainFontSize) * var(--MainLineHeightRatio));
	color: var(--MainFontColor);
}
h1, h2, h3, h4, h5, h6
{
	font-family: var(--HsFontFamily);
	font-weight: var(--HsFontWeight);
	text-align: left; 
    clear: both;
}
p, q, li
{
	padding: 0px;
	margin: calc(12px * var(--MarginRatio)) 0px calc(24px * var(--MarginRatio)) 0px;
	clear: none;
}
input:not([type='submit']), 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);
}
ul, ol
{
    color: var(--ListColor);
	margin: 0px;
    padding: 0px 0px 0px calc(40px * var(--PaddingRatio));
	margin-bottom: calc(12px * var(--MarginRatio));
}
ul ul, ul ol, ol ol, ol ul
{
    margin: calc(4px * var(--MarginRatio)) 0 0 0;                            /** CanChange: Spacing between UL/OL inside UL/OL **/
}
li 
{
	margin: calc(6px * var(--MarginRatio)) 0px calc(6px * var(--MarginRatio)) 0px;        /** CanChange: Inter LI Spacing **/
}
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;
}



/**************************** 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(44px * var(--HeaderRatio));
    color: var(--Green);
    padding: calc(36px * var(--PaddingRatio)) 0px 0px 0px;
    margin: calc(12px * var(--MarginRatio)) 0px calc(24px * var(--MarginRatio)) 0px;
    line-height: calc(44px * var(--HeaderRatio) * 1.15);
}
h2
{
	font-size: calc(32px * var(--HeaderRatio));
    color: var(--Green);
    padding: calc(36px * var(--PaddingRatio)) 0px 0px 0px;
    margin: calc(12px * var(--MarginRatio)) 0px calc(24px * var(--MarginRatio)) 0px;	line-height: calc(32px * 1.25);
	line-height: calc(32px * var(--HeaderRatio) * 1.15);
}
h3
{
	font-size: calc(24px * var(--HeaderRatio));
    color: var(--Green);
    padding: calc(24px * var(--PaddingRatio)) 0px 0px 0px;
    margin: calc(12px * var(--MarginRatio)) 0px calc(24px * var(--MarginRatio)) 0px;
	line-height: calc(24px * var(--HeaderRatio) * 1.15);
}
h4
{
	font-size: calc(21px * var(--HeaderRatio));
    color: var(--Green);
    padding: calc(24px * var(--PaddingRatio)) 0px 0px 0px;
    margin: calc(12px * var(--MarginRatio)) 0px calc(24px * var(--MarginRatio)) 0px;
    line-height: calc(21px * var(--HeaderRatio) * 1.15);
}
h5
{
	font-size: calc(18px * var(--FontRatio));
    color: var(--Green);
    padding: calc(12px * var(--PaddingRatio)) 0px 0px 0px;
    margin: calc(12px * var(--MarginRatio)) 0px calc(24px * var(--MarginRatio)) 0px;
    line-height: calc(18px * var(--FontRatio) * 1.15);
}
h6
{
	font-size: calc(18px * var(--FontRatio));
    color: var(--Green);
    padding: calc(12px * var(--PaddingRatio)) 0px 0px 0px;
    margin: calc(12px * var(--MarginRatio)) 0px calc(24px * var(--MarginRatio)) 0px;
    line-height: calc(18px * var(--FontRatio) * 1.15);
}

/****************************  ADDITIONAL STYLING FOR FORM CONTROL ELEMENTS **/
/* Your styles for input:not([type='submit']), select, textarea in here */
/* Standard font family, weight, size, color and background are var-configured */

input:not([type='submit']), select, textarea
{
    padding: calc(8px * var(--PaddingRatio)) calc(20px * var(--PaddingRatio));
    border-radius: 0;
    box-sizing: border-box;
    border: 0;
    outline: none;
    background-color: var(--White);
}
input:not([type='submit']):not([type='radio']), select
{
    height: auto;
}

/****************************  ADDITIONAL STYLING FOR FORM BUTTON ELEMENTS **/
/* Your styles for input[type='submit'], button in here */


/****************************  ADDITIONAL STYLING FOR TABLE ELEMENTS **/


/**************************** 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.01px; padding-bottom: 0.01px; 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(--Black);
    text-decoration: none;
	cursor: pointer;
	font-weight: inherit;
}
a:hover
{
    text-decoration: underline;
}

/**************************** LEGACY STYLES **********************/
.Bordered 
{
    border: black 1px solid;
}
div.ValidatorErrors 
{    
	background-color: var(--DarkRed);
	border: solid 1px #000000;
	margin-bottom: calc(8px * var(--MarginRatio));
    padding: calc(8px * var(--PaddingRatio)) 0;
    box-sizing: border-box;
}
div.ValidatorErrors p {
	color: var(--White);
	margin: calc(8px * var(--FontRatio)) calc(12px * var(--FontRatio));
}

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

/**************************** _FormGrid.v1._Common.css ****************************/
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;
    padding: 2px;
    border: 1px solid #666666;
    box-sizing: border-box;
    vertical-align: baseline;
}
div.FormGrid>div.Background.ErrorField
{
    background-color: var(--DarkRed);
    align-self: stretch;
}
div.FormGrid>div.ErrorField, div.FormGrid>div.ErrorField p
{
    color: var(--White);
}

div.FormGrid div.Field table.RadioFields
{
    display: inline-block;
    vertical-align: top;
    user-select: none;
}
div.FormGrid div.Field table.RadioFields td {
    display: inline-block;
    vertical-align: unset;
}
div.FormGrid div.Field table.RadioFields td:nth-child(2n):not(:last-child)
{
    padding-right: 20px;
}

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 label
{
    user-select: none;
    cursor: pointer;
}

/**************************** _FormGrid.v1.Horizontal.css ****************************/
/** En el Horizontal, el ButtonWrapper hace stretch para lograr poner un elemento que cubra todo el alto **/
/** El problema es que, al hacer stretch, no tenemos manera de alinear el texto al baseline **/
/** En AlMoghera, por ejemplo, pusimos el button que lo marcamos como table y height: 100%; y dentro de este button otro div con el contenido - que pasó a ser un table-cell con vertical-align: middle. Esto no hace que el texto quede alineado, pero no encontramos manera de resolverlo  */

div.FormGrid.Horizontal
{
    display: grid;
    grid-template-columns: max-content minmax(1fr, 240px) max-content minmax(1fr, 240px) max-content;
    grid-column-gap: 0;
    grid-row-gap: 4px;
    align-items: baseline;
    width: 100%;
}

div.FormGrid.Horizontal div.Field input[type='text'], div.FormGrid.Horizontal div.Field input[type='password'], div.FormGrid.Horizontal div.Field select, div.FormGrid.Horizontal div.Field textarea {
    min-width: 120px;
}


div.FormGrid.Horizontal div.Background:nth-child(1) { grid-row: 1; grid-column: 1/3; }
div.FormGrid.Horizontal div.Background:nth-child(4) { grid-row: 1; grid-column: 3/5; }
div.FormGrid.Horizontal div.Background:nth-child(7) { grid-row: 1; grid-column: 5/7; }

div.FormGrid.Horizontal div.Caption:nth-child(2) { grid-row: 1; grid-column: 1; }
div.FormGrid.Horizontal div.Caption:nth-child(5) { grid-row: 1; grid-column: 3; }
div.FormGrid.Horizontal div.Caption:nth-child(8) { grid-row: 1; grid-column: 5; }

div.FormGrid.Horizontal div.Field:nth-child(3) { grid-row: 1; grid-column: 2; }
div.FormGrid.Horizontal div.Field:nth-child(6) { grid-row: 1; grid-column: 4; }
div.FormGrid.Horizontal div.Field:nth-child(9) { grid-row: 1; grid-column: 6; }

div.FormGrid.Horizontal div.ButtonWrapper:nth-child(1) { grid-row: 1; grid-column: 1; }
div.FormGrid.Horizontal div.ButtonWrapper:nth-child(4) { grid-row: 1; grid-column: 4; }
div.FormGrid.Horizontal div.ButtonWrapper:nth-child(7) { grid-row: 1; grid-column: 7; }

div.FormGrid.Horizontal div.ButtonWrapper { align-self: stretch }

div.FormGrid.Horizontal.AtLeastOneError div.Caption
{
    padding-left: 12px;
}
div.FormGrid.Horizontal.AtLeastOneError div.Field
{
    padding-right: 12px;
}


div.FormGrid.Horizontal div.Caption, div.FormGrid.Horizontal div.Field
{
    padding-left: 12px;
    padding-right: 12px;
}
div.FormGrid.Horizontal>div:nth-child(2):not(.ErrorField)
{
    padding-left: 0;
}
div.FormGrid.Horizontal>div.ErrorField
{
    padding-top: 4px;
    padding-bottom: 4px;
}
div.FormGrid.Horizontal>div:last-child
{
    padding-right: 0;
}


@media (max-width: 1300px) {
    div.FormGrid.Horizontal
    {
        display: grid;
        grid-template-columns: minmax(1fr, 240px) minmax(1fr, 240px) max-content;
        grid-column-gap: 0;
        grid-row-gap: 4px;
        align-items: baseline;
    }

    div.FormGrid.Horizontal div.Background:nth-child(1) { grid-row: 1/3; grid-column: 1; }
    div.FormGrid.Horizontal div.Background:nth-child(4) { grid-row: 1/3; grid-column: 2; }
    div.FormGrid.Horizontal div.Background:nth-child(7) { grid-row: 1/3; grid-column: 3; }

    div.FormGrid.Horizontal div.Caption:nth-child(2) { grid-row: 1; grid-column: 1; }
    div.FormGrid.Horizontal div.Caption:nth-child(5) { grid-row: 1; grid-column: 2; }
    div.FormGrid.Horizontal div.Caption:nth-child(8) { grid-row: 1; grid-column: 3; }

    div.FormGrid.Horizontal div.Field:nth-child(3) { grid-row: 2; grid-column: 1; }
    div.FormGrid.Horizontal div.Field:nth-child(6) { grid-row: 2; grid-column: 2; }
    div.FormGrid.Horizontal div.Field:nth-child(9) { grid-row: 2; grid-column: 3; }

    div.FormGrid.Horizontal div.ButtonWrapper:nth-child(1) { grid-row: 1; grid-column: 1 / 3 ; padding-top: 12px; }
    div.FormGrid.Horizontal div.ButtonWrapper:nth-child(4) { grid-row: 3; grid-column: 1 / 3; padding-top: 12px; }
    div.FormGrid.Horizontal div.ButtonWrapper:nth-child(7) { grid-row: 3; grid-column: 1 / 3; padding-top: 12px; }

    div.FormGrid.Horizontal>div:nth-child(3):not(.ErrorField)
    {
        padding-left: 0;
    }
    div.FormGrid.Horizontal>div.Field 
    {
        padding-bottom: 4px;
    }
    div.FormGrid.Horizontal>div.Caption.ErrorField
    {
        padding-top: 12px;
        padding-bottom: 0;
    }
    div.FormGrid.Horizontal>div.Field.ErrorField
    {
        padding-top: 0;
        padding-bottom: 12px;
    }
}



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

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

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

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

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

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

div.FormGrid.Standard.AtLeastOneError div.Caption
{
    padding-left: 12px;
}
div.FormGrid.Standard.AtLeastOneError div.Field
{
    padding-right: 12px;
}

@media (max-width: 600px) {
    div.FormGrid.Standard
    {
        display: grid;
        grid-template-columns: 1fr;
        grid-column-gap: 0;
        grid-row-gap: 0;
        align-items: stretch;
    }
    div.FormGrid.Standard>div.Background 
    {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    div.FormGrid.Standard>div.Caption
    {
        padding: 4px 0 0 0 ;
    }
    div.FormGrid.Standard>div.Field
    {
        padding: 0 0 4px 0 ;
    }

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

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

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

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

    div.FormGrid.Standard.AtLeastOneError div.Caption
    {
        padding-left: 12px;
        padding-right: 12px;
    }
    div.FormGrid.Standard.AtLeastOneError div.Field
    {
        padding-left: 12px;
        padding-right: 12px;
    }
}


/**************************** _Variables.css ****************************/
:root
{
    --Shadow: 1px 0px 6px rgba(0,0,0,0.3); 
    --FontRatio: 1;
    --HeaderRatio: 1;
    --PaddingRatio: 1;
    --MarginRatio: 1;
    --FontRatioFixed: 1;
    --BodyBackgroundColor: #0f4243;
    --SectionBackgroundColor: #f0f0f0;
    --Green: #0f4243;
    --Black: #000000;
    --White: #ffffff;
    --DarkRed: #A00000;
    --MainFontFamily: 'Source Sans Pro', sans-serif;
    --MainFontSize: 16px;
    --MainFontWeight: 300;
    --MainFontColor: #333333;
    --MainLineHeightRatio: 1.35;
    --HsFontFamily: 'Cinzel', serif;
    --HsFontWeight: 600;
    --HsFontColor: #0f4243;
    --HighlightGradientA: rgba(15,66,67,1);
    --HighlightGradientB: rgba(15,66,67,0.3);
    --TableBorderColor: #cccccc;
    --TableCellABackgroundColor: #f9f9f9;
    --TableCellBBackgroundColor: #f0f0f0;
    --ButtonBackgroundColor: #000000;
}
@media all and (max-width: 1400px) 
{
    :root
    {
        --FontRatio: 1;
        --HeaderRatio: 0.9;
        --PaddingRatio: 0.9;
        --MarginRatio: 0.9;
    }
}
@media all and (max-width: 1200px) 
{
    :root
    {
        --FontRatio: 0.94;
        --HeaderRatio: 0.8;
        --PaddingRatio: 0.8;
        --MarginRatio: 0.8;
    }
}
@media all and (max-width: 1000px) 
{
    :root
    {
        --FontRatio: 0.88;
        --HeaderRatio: 0.7;
        --PaddingRatio: 0.7;
        --MarginRatio: 0.7;
    }
}
@media all and (max-width: 800px) 
{
    :root
    {
        --FontRatio: 0.8;
        --HeaderRatio: 0.6;
        --PaddingRatio: 0.6;
        --MarginRatio: 0.6;
    }
}


/* IMPORTANT CLASSES FOR LAYOUT */
/* Block elements margins and padding are not managed with a Ratio */
/* Text elements are managed with a Ratio - all font sizes should be */
/* 4px multiplier */



/**************************** Boxes.css ****************************/
/* These are the large boxes in the home page and all other pages, not the boxes in the content area */
div#BoxesSection
{
	padding: calc(40px * var(--PaddingRatio));
}
div#BoxesSection div.Box
{
	background-color: var(--Green);
	padding: calc(40px * var(--PaddingRatio));
}
div#BoxesSection div.BoxL
{
	background-size: cover, cover;
	background-repeat: no-repeat, no-repeat;
	background-position: center center, right bottom;
}
div#BoxesSection div.BoxImage5
{
	background-image: linear-gradient(to right, var(--HighlightGradientA) 30%, var(--HighlightGradientB) 100%), url('/images/Photo5.jpg');
}
div#BoxesSection div.BoxImage6
{
	background-image: linear-gradient(to right, var(--HighlightGradientA) 30%, var(--HighlightGradientB) 100%), url('/images/Photo6.webp');
	background-size: cover, contain;
}
div#BoxesSection div.BoxImage3
{
	background-image: linear-gradient(to right, var(--HighlightGradientA) 30%, var(--HighlightGradientB) 100%), url('/images/Photo3.jpg');
}

div#BoxesSection div.Box h2
{
	font-family: 'Source Sans Pro', sans-serif;
	font-size: calc(24px * var(--HeaderRatio));
	color: var(--White);
	font-weight: 600;
}
div#BoxesSection div.Box h2 span.Large
{
	font-family: 'Cinzel', serif;
	font-size: calc(40px * var(--HeaderRatio));
	color: var(--White);
	font-weight: 600;
}


div#BoxesSection div.BoxR
{
	background-size: cover, contain;
	background-repeat: no-repeat, no-repeat;
	background-position: center center, left bottom;
}

div#BoxesSection div.BoxR h2
{
	text-align: right;
}
div#BoxesSection div.Box~div.Box
{
	margin-top: calc(40px * var(--MarginRatio));
}
@media all and (max-width: 800px) {
	div#BoxesSection div.Box
	{
		background-size: cover, cover;
	}
}

div#BoxesSection div.BoxR div.Button
{
	float: right;
}
div#BoxesSection div.BoxL p, div#BoxesSection div.BoxR p
{
    color: var(--White);
    max-width: 620px;
}

/**************************** ClientArea.css ****************************/
table.ClientAreaList td {
	padding: 2px 8px 2px 8px;
	border-top: 1px solid var(--TableBorderColor);
}

table.ClientAreaList th {
	padding: 2px 8px 2px 8px;
	border-bottom: 1px solid var(--TableBorderColor);
}

table.ClientAreaList td p {
	margin-top: 2px;
	margin-bottom: 2px;
}

table.ClientAreaList tr.Row0 td {
	background-color: var(--TableCellABackgroundColor);
}

table.ClientAreaList tr.Row1 td {
	background-color: var(--TableCellBBackgroundColor);
}

table.ClientAreaList th p {
	margin-top: 2px;
	margin-bottom: 2px;
	font-weight: bold;
	color: var(--Green);
}

table.ClientAreaList {
	border-bottom: 1px solid var(--TableBorderColor);
	width: 100%;
}

table.ClientAreaList td:first-of-type {
	width: 16px;
}


/**************************** Footer.css ****************************/
div.Footer
{
	background-color: var(--Green);
	padding: calc(40px * var(--PaddingRatio));
    display: grid;
    width: 100%;
    box-sizing: border-box;
}
div.Footer div.TableA
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: calc(80px * var(--MarginRatio));
    padding-bottom: calc(80px * var(--PaddingRatio));
}
div.Footer div.CellA1 img
{
    max-width: 300px;
}
div.Footer div.CellA2
{
    align-self: end;
    justify-self: center;
}
div.Footer div.CellA3
{
    align-self: end;
    justify-self: end;
}
div.Footer div.CellA2 h4, div.Footer div.CellA3 h4
{
    padding: 0 0 10px 0;
}
div.Footer div.TableB
{
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-column-gap: calc(80px * var(--MarginRatio));
}
div.Footer div.CellB0
{
    display: none;
}
div.Footer p, div.Footer h4
{
	color: var(--White);
}
div.Footer p
{
	line-height: normal;
}
div.Footer a
{
	color: var(--White);
    font-weight:600;
}
div.Footer ul
{
	margin: 0;
	padding: 0;
}
div.Footer ul li{
    display: block;
}

@media all and (max-width: 1400px) {
    div.Footer div.TableA 
    {
        grid-template-columns: 1fr auto auto;
    }
}

@media all and (max-width: 1300px) {
    div.Footer div.TableB {
        grid-template-columns: 1fr 1fr;
        grid-row-gap: 40px;
    }
    div.Footer div.TableB div.CellB1 {
        grid-column: 1/3;
        grid-row: 1;
    }
    div.Footer div.TableB div.CellB2 {
        grid-column: 2/4;
        grid-row: 1;
    }
    div.Footer div.TableB div.CellB3 {
        grid-column: 2/4;
        grid-row: 2;
    }
    div.Footer div.TableB div.CellB4 {
        grid-column: 1/3;
        grid-row: 2;
    }

}

@media all and (max-width: 1200px) {
    div.Footer div.TableA {
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 40px;
    }
    div.Footer div.TableA div.CellA2
    {
        justify-self: center;
    }
    div.Footer div.TableA div.CellA3
    {
        justify-self: center;
    }
    div.Footer div.TableA div.CellA1
    {
        display: none;
    }

    div.Footer div.TableB {
        grid-template-columns: 1fr auto auto;
        grid-row-gap: 40px;
    }
    div.Footer div.TableB div.CellB0
    {
        display: block;
        grid-column: 1; grid-row: 1;
    }
    div.Footer div.TableB div.CellB0 img
    {
        max-width: 300px;
        width: 100%;
    }
    div.Footer div.TableB div.CellB1
    {
        grid-column: 2; grid-row: 1;
    }
    div.Footer div.TableB div.CellB2
    {
        grid-column: 3; grid-row: 1;
    }
    div.Footer div.TableB div.CellB3
    {
        grid-column: 3; grid-row: 2;
    }
    div.Footer div.TableB div.CellB4
    {
        grid-column: 2; grid-row: 2;
    }

}

@media all and (max-width: 1000px) {
    div.Footer div.TableB {
        grid-template-columns: 1fr 1fr;
        grid-row-gap: 40px;
    }
    div.Footer div.TableB div.CellB0
    {
        display: block;
        grid-column: 1 / 3; grid-row: 1;
    }
    div.Footer div.TableB div.CellB0 img
    {
        max-width: 300px;
        width: 100%;
    }
    div.Footer div.TableB div.CellB1
    {
        grid-column: 1; grid-row: 2;
    }
    div.Footer div.TableB div.CellB2
    {
        grid-column: 2; grid-row: 2;
    }
    div.Footer div.TableB div.CellB3
    {
        grid-column: 2; grid-row: 3;
    }
    div.Footer div.TableB div.CellB4
    {
        grid-column: 1; grid-row: 3;
    }
}

@media all and (max-width: 700px) {
    div.Footer div.TableB div.CellB1
    {
        grid-column: 1; grid-row: 2;
    }
    div.Footer div.TableB div.CellB2
    {
        grid-column: 1; grid-row: 3;
    }
    div.Footer div.TableB div.CellB3
    {
        grid-column: 2; grid-row: 3;
    }
    div.Footer div.TableB div.CellB4
    {
        grid-column: 2; grid-row: 2;
    }
}

/**************************** FormLogin.css ****************************/
#FormLogin div.Field input[type='text'], #FormLogin div.Field input[type='password'] {
    padding: 12px 8px;
    width: 100%;
    min-width: 120px;
    font-size: 20px;
    font-weight: bold;
}
#FormLogin div.Button
{
    white-space: nowrap;
    box-sizing: border-box;
    display: table;
    height: 100%;
    width: 100%;
}
#FormLogin div.Button>div
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

/**************************** Header.css ****************************/
ul.HeaderMenu
{
	display: block;
	float: right;
}
ul.HeaderMenu li
{
	display: block;
	float: left;
	margin: 0 1px 0 0;
	background-color: var(--Black);
}
ul.HeaderMenu li.Green
{
	background-color: var(--Green);
}
ul.HeaderMenu li.SearchSlide {
    display: none;
}
ul.HeaderMenu li.SearchSlide span {
	display: inline-block;
	font-family: Cinzel;
	font-weight: 700;
	font-size: calc(13px * var(--FontRatioXS));
	padding: 12px;
	color: var(--White);
}
ul.HeaderMenu li.SearchSlide input
{
	display: inline-block;
	vertical-align: baseline;
	margin-right: 4px;
}
ul.HeaderMenu input
{
	display: inline-block;
}
ul.HeaderMenu li a {
    padding: 12px 12px;
    display: block;
    color: var(--White);
    font-family: Cinzel;
    font-weight: 700;
    font-size: calc(13px * var(--FontRatioFixed));
}
ul.HeaderMenu li a:hover
{
	text-decoration: none;
}
div.Logo
{
	float: left;
	padding: 26px 0px 0px 20px;
}
@media all and (max-width: 720px) 
{
	div.Logo
	{
		clear: both;
		padding: 12px 0 0 0;
		width: 100%;
		box-sizing: border-box;
	}
}
@media all and (max-width: 720px) {
	div.Logo img
	{
		display: block;
		width: 250px;
		text-align: center;
		float: none;
		margin-left: auto;
		margin-right: auto;
	}
}
@media all and (max-width: 500px) {
	div.Logo img
	{
		display: block;
		width: 250px;
		text-align: left;
		float: none;
		margin-left: 20px;
		margin-right: auto;
	}
}
div.MainMenuMobileButton
{
	position: absolute;
	top: 0;
	right: 0;
	width: 80px;
	height: 80px;
	background-color: var(--Green);
	display: none;
	cursor: pointer;
	text-align: center;
}
div.MainMenuMobileButton i
{
	color: var(--White);
	text-align: center;
	line-height: 80px;
	font-size: calc(36px * var(--FontRatioFixed));
}

ul.MainMenu
{
	display: block;
	float: right;
	padding-top: 24px;
	padding-right: 20px;
}
ul.MainMenu li
{
	display: block;
	float: left;
	margin: 0;
}
ul.MainMenu li a
{
	padding: 8px 8px;
	display: block;
	color: #000000;
	font-family: Cinzel;
	font-weight: 600;
	font-size: 18px;
}
ul.MainMenu li a:hover
{
	text-decoration: none;
}
ul.MainMenuMobile {
    display: none;
    float: none;
    clear: both;
    margin: 0;
    padding: 12px 8px 0 8px;
}

ul.MainMenuMobile li {
    float: none;
    text-align: center;
    list-style: none;
}

ul.MainMenuMobile li a {
    padding: 12px 12px;
    display: block;
    color: var(--MainFontColor);
    font-family: Cinzel;
    font-weight: 600;
    font-size: calc(14px * var(--FontRatioFixed));
    border-top: 1px solid #666666;
}

ul.MainMenuMobile li:first-of-type a {
    border-top: none;
}

ul.MainMenuMobile li:last-of-type a {
    border-bottom: 1px solid #666666;
}

@media all and (max-width: 720px) 
{
	ul.MainMenuMobile
	{
        display: block;
	}
	div.MainMenuMobileButton
	{
		display: block;
		cursor: pointer;
	}
    ul.MainMenu 
    {
        display: none;
    }
    ul.HeaderMenu
    {
        display: none;
    }
}

div.PathBar
{
    background-color: var(--Green);
    padding: 0 calc(40px * var(--PaddingRatio)) 8px calc(40px * var(--PaddingRatio));
}
div.PathBar p
{
    color: var(--White);
    margin: 0;
}
div.PathBar p a
{
    color: var(--White);
}

/**************************** Home.css ****************************/
div.HeaderPic
{
	width: 100%;
	background-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 40%), url('/images/Photo1.jpg'); 
	background-size: cover, cover;
	overflow-y: hidden;
}
div.HeaderPic h1
{
	font-family: 'Source Sans Pro', sans-serif;
	font-size: calc(24px * var(--HeaderRatio));
	color: #ffffff;
	font-weight: 600;
	text-align: center;
	margin-top: 40px;
	margin-left: 20px;
	margin-right: 20px;
    margin-bottom: 200px;
}
div.HeaderPic h1 span.Large
{
	font-family: 'Cinzel', serif;
	font-size: calc(42px * var(--HeaderRatio));
	color: #ffffff;
	font-weight: 600;
}

div.HeaderPic p 
{
	margin-top: 280px;
	color: #ffffff;
	font-size: calc(18px * var(--FontRatio));
	font-weight: 400;
	padding: 0 40px 40px 40px;
	text-align: center;
}

/* Cliffhanger */
body.Home div.Cliffhanger
{
    display: flex;
    flex-wrap: nowrap;
    margin-top: 40px;
    margin-bottom: 40px;
    background-image: linear-gradient(to right, rgba(0,0,0,0.2), #fff)
}
@media all and (max-width: 1024px) {
    body.Home div.Cliffhanger
    {
        flex-wrap: wrap;
    }
}
body.Home div.Cliffhanger div.Picture
{
    flex: 1 0 240px;
    min-width: 240px;
}
body.Home div.Cliffhanger div.Picture img
{
    width: 100%;
    visibility: hidden;
}
body.Home div.Cliffhanger div.Text
{
    flex: 1 0 240px;
    padding: 40px 40px;
    align-self: center;
    min-width: 240px;
}
body.Home div.Cliffhanger div.Text p
{
    font-size: calc(18px * var(--FontRatio));
    color: #0f4243;
    font-weight: 400;
    margin: 0;
}

div#OilfieldGlossarySection {
	padding-left: 40px;
	padding-right: 40px;
	box-sizing: border-box;
	padding-top: 20px;
	overflow-y: hidden;
}
div#OilfieldGlossary hr
{
	margin-bottom: 20px;
	border: none;
	border-bottom: 1px solid #666666;
}
div#AboutPicWrapper
{
	padding-left: 40px;
	padding-right: 40px;
	box-sizing: border-box;
	padding-top: 40px;
    padding-bottom: 40px;
}
div#AboutPic
{
    /*background-image: linear-gradient(to right, rgba(15,66,67,1) 0%, rgba(15,66,67,0) 50%), url('/images/AboutPic2.webp');
    background-size: cover;
    background-position: center right;*/
}
/*div#AboutPic div
{
    width: 300px;
    min-height: 500px;
    padding: 20px;
}*/
div#AboutPic div p
{
    font-size: calc(18px * var(--FontRatio));
    line-height: calc(18px * var(--FontRatio) * var(--MainLineHeightRatio));
    text-align: center;
}
div#AboutPic div h2
{
    text-align: center;
}
/*@media all and (max-width: 1024px) {
    div#AboutPic
    {
        background-image: linear-gradient(to right, rgba(15,66,67,1) 0%, rgba(15,66,67,0) 80%), url('/images/AboutPic.webp');
    }
    div#AboutPic div
    {
        min-height: 360px;
    }
}
@media all and (max-width: 640px) {
    div#AboutPic
    {
        background-image: linear-gradient(to right, rgba(15,66,67,1) 50%, rgba(15,66,67,0) 100%), url('/images/AboutPic.webp');
    }
    div#AboutPic div
    {
        min-height: 240px;
    }
}*/


/**************************** Internal.css ****************************/
div.MainArea
{
	position: relative;
	overflow: hidden
}
div.MainArea div.Col1
{
	overflow: visible;
	margin-right: 300px;
	min-height: 800px; /* to allow Col2 boxes */
}
div.MainArea div.Col1Only
{
    margin-right: 0;
}
div.MainArea div.Col2
{
	background-color: var(--Green);
	position: absolute;
	right: 0;
	top: 0;
	width: 300px;
	box-shadow: rgba(0,0,0,0.4) -10px 0px 10px;
    padding-bottom: 32767px;
    margin-bottom: -32767px;
	box-sizing: border-box;
}
div.MainArea div.Col1 div.ContentArea
{
	padding-top: 40px;
    padding-bottom: 40px;
}
div.MainArea div.Col1 div.ContentAreaPaddingHStd
{
    padding-left: 120px;
    padding-right: 120px;
}
div.MainArea div.Col1 div.ContentArea a
{
    font-weight: 400;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: rgba(0,0,0,0.25);
}
div.MainArea div.Col2 div.MenuArea
{
	padding: 20px 20px 40px 20px;
	background-color: #f8f8f8;
}
div.MainArea div.Col2 div.MenuArea ul
{
	padding: 0;
	margin: 0;
}
div.MainArea div.Col2 div.MenuArea ul li
{
	list-style: none;
	margin-bottom: 8px;
	font-weight: 400;
}
div.MainArea div.Col2 div.MenuArea ul li ul
{
	padding: 0 0 0 20px;
	margin: 8px 0 8px 0;
}
div.MainArea div.Col2 div.MenuArea ul li ul li
{
	list-style: none;
	margin-bottom: 8px;
	font-weight: 400;
	font-size: calc(14px * var(--FontRatioFixed));
}
div.MainArea div.Col2 a.Highlight
{
	color: rgba(15,66,67,0.8);
	font-weight: 600;
}
div.MainArea div.Col2 div.Contact
{
	background-color: var(--SectionBackgroundColor);
	padding: 20px 20px 40px 20px;
}
div.MainArea div.Col2 div.Contact p
{
	font-weight: 400;
}
@media all and (max-width: 1500px) {
	div.MainArea div.Col1 div.ContentAreaPaddingHStd
	{
		padding-left: 80px;
        padding-right: 80px;
	}
}
@media all and (max-width: 1100px) {
	div.MainArea div.Col1 div.ContentAreaPaddingHStd
	{
		padding-left: 40px;
        padding-right: 40px;
	}
}
@media all and (max-width: 500px) {
	div.MainArea div.Col1 div.ContentAreaPaddingHStd
	{
		padding-left: 20px;
        padding-right: 20px;
	}
}
div.MainArea div.Col2 div.Resources
{
	background-image: linear-gradient(to top, var(--HighlightGradientA) 0%, var(--HighlightGradientB) 100%), url('/images/Resources.jpg');
	background-size: cover, cover;
	background-repeat: no-repeat, no-repeat;
	background-position: center center, right bottom;
	background-color: rgba(0,0,0,0.4);
	height: 220px;
	padding: 20px;
}
div.MainArea div.Col2 div.Resources h3
{
	color: #ffffff;
}
div.MainArea div.Col2 div.GotFeedback
{
	background-image: linear-gradient(to top, var(--HighlightGradientA) 0%, var(--HighlightGradientB) 100%), url('/images/GotFeedback.jpg');
	background-size: cover, cover;
	background-repeat: no-repeat, no-repeat;
	background-position: center center, right bottom;
	background-color: rgba(0,0,0,0.4);
	height: 220px;
	padding: 20px;
}
div.MainArea div.Col2 div.GotFeedback h3
{
	color: #ffffff;
}

@media all and (max-width: 1100px)
{
    div.MainArea div.Col1
    {
        margin-right: 240px;
    }
    div.MainArea div.Col2
    {
        width: 240px;
    }
}
@media all and (max-width: 900px) {
	div.MainArea div.Col2
	{
		width: 100%;
		box-shadow: none;
		position: static;
		box-shadow: rgba(0,0,0,0.4) 0px -10px 10px;
	}
	div.MainArea div.Col1
	{
		margin-right: 0;
		min-height: unset;
	}
	div.MainArea div.Col2 div.MenuArea
	{
		padding: 40px;
	}
	div.MainArea div.Col2 div.Contact
	{
		padding: 40px;
	}
	div.MainArea div.Col2 div.GotFeedback
	{
		padding: 40px;
	}
}
@media all and (max-width: 500px) {
	div.MainArea div.Col2 div.MenuArea
	{
		padding: 20px;
	}
	div.MainArea div.Col2 div.Contact
	{
		padding: 20px;
	}
	div.MainArea div.Col2 div.GotFeedback
	{
		padding: 20px;
	}
}


div.ContentArea li
{
    line-height: calc(26px * var(--FontRatio));
    margin: calc(8px * var(--MarginRatio)) 0 calc(8px * var(--MarginRatio)) 0;
}

h6+p
{
	margin-top: calc(12px - calc(24px * var(--MarginRatio)));
}

ul+table.ClientAreaFiles
{
	margin-top: 0;
}
p+table.ClientAreaFiles 
{
	margin-top: -20px;
}

p+table.ClientAreaFiles.MarginOnTop
{
	margin-top: 0;
}

table.ClientAreaFiles p
{
	margin: 2px 0 2px 0;
	padding: 0;
}
table.ClientAreaFiles td
{
	padding: 0 4px;
	vertical-align: middle;
}
table.ClientAreaFiles img
{
	padding-top: 4px;
	padding-bottom: 4px;
}

div.ContentArea p.BelowH1
{
    margin-top: calc(-24px * var(--FontRatio));
    padding-top: 0;
    font-weight: bold;
}
div.ContentArea h2 /** Matches h4 of main */
{
    font-size: calc(21px * var(--HeaderRatio));
    line-height: calc(21px * var(--HeaderRatio) * 1.15);
}
div.ContentArea h3  /** Matches h5 of main, we use font ratio so as to make it larger than the font */
{
    font-size: calc(18px * var(--FontRatio));
    line-height: calc(18px * var(--FontRatio) * 1.15);
}
div.ContentArea h4  
{
    font-size: calc(18px * var(--FontRatio));
    line-height: calc(18px * var(--FontRatio) * 1.15);
}
div.ContentArea h5 
{
    font-size: calc(18px * var(--FontRatio));
    line-height: calc(18px * var(--FontRatio) * 1.15);
}
div.ContentArea h6 
{
    font-size: calc(18px * var(--FontRatio));
    line-height: calc(18px * var(--FontRatio) * 1.15);
}

/* RelatedInformation, boxes in the contentarea */
div.ContentArea div.RelatedInformation
{
    display: flex;
    margin-right: -20px;
    flex-wrap: wrap;
}
div.ContentArea div.RelatedInformation div.Box
{
    flex: 1 1 calc(50% - 20px);
    padding: 20px;
    box-sizing: border-box;
    margin-right: 20px;
    margin-bottom: 20px;
    box-shadow: var(--Shadow);
    min-width: 200px;
    cursor: pointer;
}
div.ContentArea div.RelatedInformation div.Box p, div.ContentArea div.RelatedInformation div.Box li
{
    font-size: calc(14px * var(--FontRatio));
    line-height: calc(22px * var(--FontRatio));
}
div.ContentArea div.RelatedInformation div.Box h3:first-child
{
    margin-top: 0;
    padding-top: 0;
}
div.ContentArea div.RelatedInformation div.Box h3+p
{
	margin-top: calc(-16px * var(--FontRatio));
}

div.ContentArea div.RelatedInformation div.Box p:last-child
{
    margin-bottom: 0;
}

/* Products, boxes in the contentarea */
div.ContentArea div.ProductOfferings
{
    display: flex;
    margin-right: -20px;
    flex-wrap: wrap;
}
div.ContentArea div.ProductOfferings div.Box
{
    flex: 1 1 100%;
    padding: 20px;
    box-sizing: border-box;
    margin-right: 20px;
    margin-bottom: 20px;
    box-shadow: var(--Shadow);
    min-width: 200px;
    cursor: pointer;
}
div.ContentArea div.ProductOfferings div.Box p, div.ContentArea div.ProductOfferings div.Box li
{
    font-size: calc(14px * var(--FontRatio));
    line-height: calc(22px * var(--FontRatio));
}
div.ContentArea div.ProductOfferings div.Box h3:first-child
{
    margin-top: 0;
    padding-top: 0;
}
div.ContentArea div.ProductOfferings div.Box h3+p
{
	margin-top: calc(-16px * var(--FontRatio));
}

div.ContentArea div.ProductOfferings div.Box p:last-child
{
    margin-bottom: 0;
}

/* Cliffhanger */
div.ContentArea div.Cliffhanger
{
    display: flex;
    flex-wrap: nowrap;
    margin-top: 40px;
    margin-bottom: 40px;
    background-image: linear-gradient(to right, var(--SectionBackgroundColor), var(--White));
}
@media all and (max-width: 1024px) {
    div.ContentArea div.Cliffhanger
    {
        flex-wrap: wrap;
    }
}
div.ContentArea div.Cliffhanger div.Picture
{
    flex: 1 0 240px;
    min-width: 240px;
}
div.ContentArea div.Cliffhanger div.Picture img
{
    width: 100%;
    visibility: hidden;
}
div.ContentArea div.Cliffhanger div.Text
{
    flex: 1 0 240px;
    padding: 20px 40px;
    align-self: center;
    min-width: 240px;
}
div.ContentArea div.Cliffhanger div.Text p
{
    font-size: calc(18px * var(--FontRatio));
    color: #0f4243;
    font-weight: 400;
    margin: 0;
}

/* Picture */
div.ContentArea>div.Picture      
{
    margin-top: 40px;
    margin-bottom: 40px;
}
div.ContentArea div.Picture img
{
    width: 100%;
}

/* Tables */
div.ContentArea table:not(.RadioFields) tr td
{
    border: solid 1px var(--TableBorderColor);
    padding: 10px;
}
div.ContentArea table tr th
{
    font-weight: 600;
}
div.ContentArea table tr td ul
{
    padding-left: 20px;
}
div.ContentArea table tr td ul ul li
{
    font-size: calc(14px * var(--FontRatio));
    line-height: calc(22px * var(--FontRatio));
}
div.ContentArea table+div.SeparatorLine
{
    margin-top: 20px;
}


/**************************** Jobs.css ****************************/
body.Jobs p.Location
{
	font-size: calc(24px * var(--HeaderRatio));
	font-weight: 600;
    color: var(--Green);
    padding: calc(24px * var(--PaddingRatio)) 0px 0px 0px;
    clear: both;
}


/**************************** Lists.css ****************************/
div.ListGrayBig
{

}
div.ListGrayBig div.Item
{
	background-color: #f0f0f0;
	margin-top: 10px;
	padding: 20px;
}
div.ListGrayBig div.Item img:first-child
{
	float: left; margin: 4px 20px 4px 0;
}
div.ListGrayBig div.Item div.Content
{
	margin-left: 170px;
}
div.ListGrayBig div.Item div.Content h5
{
	margin-bottom: 12px;
}
div.ListGrayBig div.Item div.Content h5+p
{
	margin-top: 12px;
}

/**************************** MainMenu.css ****************************/
div#MainMenuProductsDropDown
{
	background-color: var(--White);
	border: solid 2px;
	padding: 20px;
	display: none;
	position: absolute;
	z-index: 3;
	box-sizing: border-box;
}
div#MainMenuProductsDropDown div.Columns {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin-right: -40px;
	margin-bottom: -40px;
}
div#MainMenuProductsDropDown div.Columns div.Column {
	flex: 1 0 190px;
	max-width: 300px;
	margin-right: 40px;
	margin-bottom: 40px;
}
div#MainMenuProductsDropDown h6 {
	margin-bottom: 10px;
}
div#MainMenuProductsDropDown p
{
	margin: 0 0 6px 0;
	font-size: calc(15px * var(--FontRatio));
	font-weight: 400;
	line-height: normal;
}

/**************************** News.css ****************************/
/** div#NewsSection is Home Page */
/** div.News is also shown under /News.aspx page */

div#NewsSection {
	padding-left: 40px;
	padding-right: 40px;
	box-sizing: border-box;
	padding-top: 20px;
	overflow-y: hidden;
}
div#NewsSection hr
{
	margin-bottom: 20px;
	border: none;
	border-bottom: 1px solid #666666;
}
div#NewsWrapper
{
	border-right: solid 4px #ffffff;
	margin-left: 20px;
	margin-right: 20px;
}
div#NewsWrapper div.slick-list
{
	border-right: solid 10px #ffffff;
}

div#NewsSection div.News {
	width: 33.33%;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
	border-right: solid 1px #666666;
}
div.ProductDescriptions div.News
{
	padding-top: 20px;
	border-bottom: solid 1px #666666;
}
div.ProductDescriptions div.News:first-of-type
{
	padding-top: 0;
}
div.ProductDescriptions div.News img:last-child 
{
	margin-bottom: 20px;
}
div.ProductDescriptions div.News img
{
	max-width: 100%;
}

div.News span.Date {
	font-weight: 400;
	color: #0f4243;
}
div#NewsSection button.slick-prev:before, div#NewsSection button.slick-next:before
{
	color: #0f4243;
}
div#NewsSection div.News img {
	width: 100%;
}

/*Slick fix*/
div#NewsSection .slick-track {
    display: flex !important;
    align-items: stretch; 
    justify-content: center;
}
div#NewsSection .slick-slide {
    height: auto !important;   
}
div#NewsSection .slick-next
{
width: 20px;
height: 38px;
background-image: url('/images/ArrowBR.png');
}
div#NewsSection .slick-prev
{
width: 20px;
height: 38px;
background-image: url('/images/ArrowBL.png');
}
div#NewsSection .slick-next:before, div#NewsSection .slick-prev:before
{
	content: '';
}
div#NewsSection .slick-next
{
	right: -30px;
}
div#NewsSection .slick-prev
{
	left: -30px;
}

/**************************** News2.css ****************************/
div#News2Section {
    padding: 20px 40px 40px 40px;
	box-sizing: border-box;
    padding-bottom: 40px;
    overflow-y: hidden;
}

div#News2Section div.News
{
    padding: 40px 40px 40px 40px;
    background-color: var(--SectionBackgroundColor);
}
div#News2Section div.News p
{
    color: var(--Black);
}
div#News2Section hr
{
    margin-bottom: 20px;
}
div#News2Section h3 span.Small
{
	font-family: var(--MainFontFamily);
	font-size: calc(var(--MainFontSize) * var(--FontRatio));
	font-weight: 400;
    text-transform: uppercase;
}

/**************************** OurCompanyOptions.css ****************************/
div#OurCompanyOptionsSection
{
	padding-left: 40px;
	padding-right: 40px;
	box-sizing: border-box;
	padding-top: 20px;
	background-color: var(--Green);
	overflow-y: hidden;
}
div#OurCompanyOptionsSection hr
{
	margin-bottom: 20px;
	border: none;
	border-bottom: 1px solid var(--White);
}
div#OurCompanyOptionsWrapper
{	
	margin-left: 20px;
	margin-right: 20px;
}

div.Option
{
	width: 33.33%;
	padding: 0px;
	margin-left: 12px;
	margin-right: 12px;
	box-sizing: border-box;
	background-color: var(--White);
	border-top: 10px solid var(--Black);
}
div.Option img
{
    width: 100%;
}
div.OptionInfo
{
    padding: 4px 20px;
}
div.OptionInfo h5
{
    margin: calc(12px * var(--MarginRatio)) 0 calc(12px * var(--MarginRatio)) 0;
}

div#OurCompanyOptionsSection h2
{
	color: var(--White);
}
div#OurCompanyOptionsSection p, div#OurCompanyOptionsSection h3, div#OurCompanyOptionsSection h4, div#OurCompanyOptionsSection h5, div#OurCompanyOptionsSection a
{
	color: #444444;
}
div#OurCompanyOptionsSection h2.Small a.LinkInblockH2Small {
	color: var(--White);
}

/*Slick fix*/
div#OurCompanyOptionsSection .slick-track {
    display: flex !important;
    align-items: stretch; 
    justify-content: center;
}
div#OurCompanyOptionsSection .slick-slide {
    height: auto !important;   
}
div#OurCompanyOptionsSection .slick-next
{
width: 20px;
height: 38px;
background-image: url('/images/ArrowWR.png');
}
div#OurCompanyOptionsSection .slick-prev
{
width: 20px;
height: 38px;
background-image: url('/images/ArrowWL.png');
}
div#OurCompanyOptionsSection .slick-next:before, div#ProductsSection .slick-prev:before
{
	content: '';
}
div#OurCompanyOptionsSection .slick-next
{
	right: -30px;
}
div#OurCompanyOptionsSection .slick-prev
{
	left: -30px;
}

/**************************** Products.css ****************************/
div#ProductsSection
{
	padding-left: 40px;
	padding-right: 40px;
	box-sizing: border-box;
	padding-top: 20px;
	background-color: var(--Green);
	overflow-y: hidden;
}
div#ProductsSection hr
{
	margin-bottom: 20px;
	border: none;
	border-bottom: 1px solid var(--White);
}
div#ProductsWrapper
{	
	margin-left: 20px;
	margin-right: 20px;
}

div.Product
{
	width: 33.33%;
	padding: 0px;
	margin-left: 12px;
	margin-right: 12px;
	box-sizing: border-box;
	background-color: var(--White);
	border-top: 10px solid var(--Black);
}
div.Product img
{
    width: 100%;
}
div.ProductInfo
{
    padding: 4px 20px;
}
div.ProductInfo h5
{
    margin: calc(12px * var(--MarginRatio)) 0 calc(12px * var(--MarginRatio)) 0;
}

div#ProductsSection h2
{
	color: var(--White);
}
div#ProductsSection p, div#ProductsSection h3, div#ProductsSection h4, div#ProductsSection h5, div#ProductsSection a
{
	color: #444444;
}
div#ProductsSection h2.Small a.LinkInblockH2Small {
	color: var(--White);
}

/*Slick fix*/
div#ProductsSection .slick-track {
    display: flex !important;
    align-items: stretch; 
    justify-content: center;
}
div#ProductsSection .slick-slide {
    height: auto !important;   
}
div#ProductsSection .slick-next
{
width: 20px;
height: 38px;
background-image: url('/images/ArrowWR.png');
}
div#ProductsSection .slick-prev
{
width: 20px;
height: 38px;
background-image: url('/images/ArrowWL.png');
}
div#ProductsSection .slick-next:before, div#ProductsSection .slick-prev:before
{
	content: '';
}
div#ProductsSection .slick-next
{
	right: -30px;
}
div#ProductsSection .slick-prev
{
	left: -30px;
}

/* */
div.ProductCategory
{
    display: flex;
    flex-wrap: nowrap;
    margin-top: calc(40px * var(--MarginRatio));
    margin-bottom: calc(40px * var(--MarginRatio));
}
div.ProductCategory div.Text:first-child {
    background-image: linear-gradient(to right, var(--SectionBackgroundColor), var(--White));
}
div.ProductCategory div.Text:last-child {
    background-image: linear-gradient(to left, var(--SectionBackgroundColor), var(--White));
}
@media all and (max-width: 1024px) {
    div.ProductCategory
    {
        flex-wrap: wrap;
    }
    div.ProductCategory div.Text {
        order: 2;
    }
    div.ProductCategory div.Text:first-child, div.ProductCategory div.Text:last-child {
        background-image: none;
        background-color: var(--SectionBackgroundColor);
    }
}
div.ProductCategory div.Picture
{
    flex: 1 0 240px;
    min-width: 240px;
}
div.ProductCategory div.Picture img
{
    width: 100%;
    visibility: hidden;
}
div.ProductCategory div.Text
{
    flex: 1 1 420px;
    padding: calc(40px * var(--PaddingRatio)) calc(40px * var(--PaddingRatio));
    align-self: stretch;
}


/**************************** Resources.css ****************************/
div.MainArea div.Col1 div.Resources
{
	display: flex;
	flex-wrap: wrap;
	margin-right: -25px;
	margin-bottom: -25px;
	align-items: baseline;
}
div.MainArea div.Col1 div.Resources figure.Item
{
	flex: 0 1 216px;
	padding-right: 25px;
	padding-bottom: 25px;
	margin: 0;
}
div.MainArea div.Col1 div.Resources figure.Item img.Cover
{
	max-width: 216px;
	box-shadow: var(--Shadow);
}
div.MainArea div.Col1 div.Resources figure.Item img.Lock
{
	position: absolute;
	top: -60px;
}
div.MainArea div.Col1 div.Resources figcaption
{
	margin-top: calc(8px * var(--MarginRatio));
    margin-bottom: calc(16px * var(--MarginRatio));
	font-size: calc(14px  * var(--FontRatioFixed));
	text-align: center;
	position: relative;
}

div.MainArea div.Col1 div.Resources + h5
{
	margin-top: 80px;
}
div.MainArea div.Col1 div.Resources figure.Item.Hidden
{
	display: none;
}

/**************************** Root.css ****************************/
div.CenterContentWrapper					{width: 100%; margin-left: auto; margin-right: auto; max-width: 1400px;}
div.CenterContent							        {margin-left: 80px; margin-right: 80px; background-color: #ffffff; box-shadow: rgba(0,0,0,0.9) 0px 0px 200px 100px;}
@media all and (max-width: 1100px) 
{
	div.CenterContent
	{
		margin-left: 40px; margin-right: 40px;
	}

}
@media all and (max-width: 800px) 
{
	div.CenterContent
	{
		margin-left: 0; margin-right: 0;
	}

}

div.SeparatorLine
{
	height: 8px; background-color: var(--Green);
}
div.SeparatorLineWhite
{
	height: 8px; background-color: #ffffff;
}
h2.Small
{
    margin-bottom: 0;
	font-size: 14px;
}
h2.Small a.LinkInblockH2Small
{
	font-family: 'Source Sans Pro', sans-serif;
	color: #000000;
	font-weight: 400;
}

div.Button
{
	background-color: var(--ButtonBackgroundColor);
	color: #ffffff;
	padding: 12px 20px;
	display: inline-block;
	cursor: pointer;
	font-family: Cinzel;
	font-weight: 700;
	font-size: calc(13px * var(--FontRatio));
}

p+ul, p+ol, h2+ul, h2+ol, h3+ul, h3+ol, h4+ul, h4+ol, h5+ul, h5+ol, h6+ul, h6+ol
{
	margin-top: calc(-15px * var(--MarginRatio));
	margin-bottom: calc(30px * var(--MarginRatio));
}
div.AreaGray+p:first-child
{
	margin-top: 0;
}
p+ul:last-child, p+ol:last-child
{
	margin-bottom: 0;
}
div.AreaGray
{
	background-color: #f0f0f0;
	padding: 20px;
}
a.ScrollTo
{
	cursor: pointer;
}

/**************************** Search.css ****************************/
table.SearchResults
{
	width: 100%;
}
table.SearchResults td
{
	vertical-align: top;
}
table.SearchResults td img
{
	margin: 0px 6px 0 6px;
}
table.SearchResults tr.Row1
{
	background-color: var(--TableCellABackgroundColor);
}
table.SearchResults tr.Row0 {
	background-color: var(--TableCellBBackgroundColor);
}
table.SearchResults h6:first-child {
	margin-top: 8px;
}
table.SearchResults p:last-child
{
	margin-bottom: 8px;
}

/**************************** SocialMedia.css ****************************/
div#SocialMedia
{
	background-color: var(--Black);
}
div#SocialMedia ul
{
	display: block;
	text-align: center;
	width: auto;
	margin: 0;
	padding: 0;
}
div#SocialMedia ul li
{
	list-style: none;
	display: inline-block;
	font-size: calc(48px * var(--FontRatio));
	color: #888888;
	padding: 20px 12px;
}
div#SocialMedia ul li a
{
	color: #888888;
}
div#SocialMedia ul li a:hover
{
	color: var(--White);
}