/* ========================================== */
/* FLEX_LP-theme.css - theme + colors + forms */
/* ========================================== */
/* v3.2.1 */
/* [1] theme.css  | framework, helpers, typography, responsive */
/* [2] colors.css | .primary, .secondary, .white, .light, .dark */
/* [3] forms.css  | Marketo form layout and fields */


/*
Body Copy =========================================================================
Text Color | {{my.LP Primary Text Color}} | var(--LP-Primary-Text-Color)

Primary Button ====================================================================
Bg Color | {{my.Hero button color}} | var(--Hero-button-color) // "var(--Primary-Color)"
Border Color | {{my.Hero button color}} | var(--Hero-button-color)
Text Color | {{my.Hero button text color}} | var(--Hero-button-text-color)
Bg Color (hover) | {{my.LP Button Hover Color}} | var(--LP-Button-Hover-Color)
Border Color (hover) | {{my.LP Button Hover Color}} | var(--LP-Button-Hover-Color)
Text Color (hover) | {{my.Hero button text color}} | var(--Hero-button-text-color)

Secondary Button ==================================================================
Bg Color | {{my.LP Secondary CTA Color}} | var(--LP-Secondary-CTA-Color) // "var(--Secondary-Color)"
Border Color | {{my.LP Secondary CTA Color}} | var(--LP-Secondary-CTA-Color)
Text Color | {{my.Secondary CTA Text Color}} | var(--Secondary-CTA-Text-Color)
Bg Color (hover) | {{my.LP Button Hover Color}} | var(--LP-Button-Hover-Color)
Border Color (hover) | {{my.LP Button Hover Color}} | var(--LP-Button-Hover-Color)
Text Color (hover) | {{my.Secondary CTA Text Color}} | var(--Secondary-CTA-Text-Color)

Links =============================================================================
Link Color | {{my.LP Text Link Color Static}} | var(--LP-Text-Link-Color-Static)
Link Color (hover) | {{my.LP Text Link Color Hover}} | var(--LP-Text-Link-Color-Hover)

Palette ===========================================================================
Primary Color | {{my.Hero button Color}} | var(--Primary-Color)
Secondary Color | {{my.LP Secondary CTA Color}} | var(--Secondary-Color)

 */
:root {
	--Primary-Color: #4db85a;
    --Secondary-Color: #51b5e7;
    --LP-Primary-Text-Color: #000000;
    --Hero-button-color: #4db85a;
    --Hero-button-text-color: #ffffff;
    --LP-Button-Hover-Color: #6ec5be;
    --Hero-button-text-color: #ffffff;
    --LP-Secondary-CTA-Color: #51b5e7;
    --Secondary-CTA-Text-Color: #ffffff;
    --LP-Button-Hover-Color: #6ec5be;
    --LP-Text-Link-Color-Static: #6ec5be;
    --LP-Text-Link-Color-Hover: #747b90;
}


/* ===================================================================================== */
/* ==================================[ [3] forms.css ]================================== */
/* ===================================================================================== */
/*/ LP FLEX Marketo Forms Stylesheet /*/
/**************************************/
/* GLOBAL - Form Presets: Form element & children */
.resource-hero form.mktoForm, .resource-hero form.mktoForm * {
    font-size: 13px !important;
    font-family: inherit !important;
    color: #085368 !important;
}
/* TRANSITIONS: ease color changes (optional) */
.resource-hero form.mktoForm * {
    transition: ease color .3s !important;
    transition: ease background-color .3s !important;
}
/* :::::::::::::::::::::::::::::::::: */
/* :::::[ Architectural Styles ]::::: */
/* :::::::::::::::::::::::::::::::::: */
.resource-hero form.mktoForm {
    flex-direction: column; /* 'flex-direction: row;' for horizontal display */
    width: 100% !important; /* override fixed width on mktoForm */
    box-sizing: border-box;
}
.resource-hero form.mktoForm * {
    float: none !important; /* remove float on mktoForm elements */
    width: auto !important; /* remove fixed width on mktoForm elements */
}
.resource-hero form.mktoForm, .resource-hero form.mktoForm .mktoFormRow, .resource-hero form.mktoForm .mktoFieldWrap, .resource-hero form.mktoForm .mktoButtonRow {
    display:flex !important; /* flex these elements */
}
.resource-hero form.mktoForm .mktoOffset, .resource-hero form.mktoForm .mktoGutter, .resource-hero form.mktoForm fieldset legend, .resource-hero form.mktoForm .mktoAsterix {
    display:none !important; /* hide these elements */
}
.resource-hero form.mktoForm .mktoFormCol, .resource-hero form.mktoForm .mktoHtmlText {
    -ms-flex-positive: 1;
    flex-grow: 1; /* make these elements flex to full-width (100%) */
}
/* maintain font-size, line-height and input height for mobile */
.resource-hero form.mktoForm .mktoField {
    line-height: 1.4em !important; /*mktoOverride*/
    font-size: 1em !important; /*mktoOverride*/
    height: initial !important; /*mktoOverride*/
}
/* :::::::::::::::::::::::::::::::: */
/* :::::[ Form Layout Styles ]::::: */
/* :::::::::::::::::::::::::::::::: */
/* Form Layout > Settings: LABELS-ABOVE ---------------- */
.resource-hero form.mktoForm.mktoLayoutAbove .mktoFieldWrap {
    flex-direction: column !important;
    align-items: flex-start !important;
}
.resource-hero form.mktoForm.mktoLayoutAbove label.mktoLabel {
    text-align: left !important;
    padding: .5em 0 !important;
    width: 100% !important;
}
/* Form Layout > Settings: LABELS-LEFT ------------------ */
.resource-hero form.mktoForm.mktoLayoutLeft fieldset .mktoFieldWrap {
    display: flex !important;
    flex-direction: row !important;
}
.resource-hero form.mktoForm.mktoLayoutLeft fieldset label.mktoLabel {
    display: block !important;
    text-align: right !important;
    padding: 0 !important;
    max-width: 120px; /* set width for labels left */
    width: 120px !important; /* set width for labels left */
    margin: auto 15px auto 0;
}
/* ::::::::::::::::::::::::::: */
/* :::::[ Form Elements ]::::: */
/* ::::::::::::::::::::::::::: */
/* ROWS ___________________ */
.resource-hero form.mktoForm .mktoFormRow,
.resource-hero form.mktoForm .mktoButtonRow {
    flex-wrap: wrap;
    flex-direction:row;
    min-width:unset;
}
.resource-hero form.mktoForm .mktoFormRow {
    margin: 0 -10px; /* offset .mktoFieldWrap padding (10px) */
}
/* COLUMNS ______________ */
.resource-hero form.mktoForm .mktoFormCol {
    flex-basis: 0; /* make columns in a row equal widths */
    min-height: 0px !important; /*mktoOverride*/
}
/* FIELDSET _________ */
.resource-hero form.mktoForm fieldset {
    padding: 0px !important; /*mktoOverride*/
    margin: 0px !important; /*mktoOverride*/
    border: 0px !important; /*mktoOverride*/
}
/* FIELDWRAP ______________ */
.resource-hero form.mktoForm .mktoFieldWrap {
    padding: 0px 10px !important;
}
/* LABELS __________________ */
.resource-hero form.mktoForm label.mktoLabel {
    padding:.5rem !important;
    font-size:13px !important;
    font-weight: bold !important;
    color: #7f7f7f !important;
}
/* |>> Labels-Above ........................ */
.resource-hero form.mktoForm.mktoLayoutAbove label.mktoLabel {
    text-align: left !important;
}
/* |>> Labels-Left ........................ */
.resource-hero form.mktoForm.mktoLayoutLeft label.mktoLabel {
    text-align: right !important;
    min-width:120px;
}
/* INPUTS (ALL) ______________ */
/* excludes radio & checkboxes */
.resource-hero form.mktoForm input[type=url],
.resource-hero form.mktoForm input[type=text],
.resource-hero form.mktoForm input[type=date],
.resource-hero form.mktoForm input[type=tel],
.resource-hero form.mktoForm input[type=email],
.resource-hero form.mktoForm input[type=number],
.resource-hero form.mktoForm textarea.mktoField,
.resource-hero form.mktoForm select.mktoField  {
    color: var(--LP-Primary-Text-Color) !important;
    padding: 8px 13px !important;
    -ms-flex-positive: 1;
    flex-grow:1;
    width:100% !important;
    min-height: 44px !important; /*mktoOverride*/
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color:#F5F8FA !important;
    border-width: 1px;
    border-style: solid;
    border-color: #CBD6E2 !important;
    border-radius:5px !important;
    -webkit-border-radius: 0px;
}
/* SELECT ___________________ */
.resource-hero form.mktoForm select.mktoField {
    background-image: linear-gradient(135deg, #000 50%, transparent 50%), linear-gradient(45deg, transparent 50%, #000 50%); /* downward triangle - match placeholder color */
    background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat !important;
    outline: 0 !important;
}
/* |>> Select not-valid states ............. */
.resource-hero form.mktoForm select.mktoField:not(.mktoValid),
.resource-hero form.mktoForm select.mktoField.mktoInvalid {
    color: #000 !important;
}
/* |>> Select invalid states .................. */
.resource-hero form.mktoForm select.mktoField.mktoInvalid:active,
.resource-hero form.mktoForm select.mktoField.mktoInvalid:focus {
    color: initial !important;
}
/* |>> Select active states ........ */
.resource-hero form.mktoForm select.mktoField:focus,
.resource-hero form.mktoForm select.mktoField:active {
    background-image: linear-gradient(135deg, #004F71 50%, transparent 50%), linear-gradient(45deg, transparent 50%, #004F71 50%); /* downard triangle - :focus-color */
}
/* LOGICAL FIELDS (parent) ___ */
.resource-hero form.mktoForm .mktoRadioList,
.resource-hero form.mktoForm .mktoCheckboxList {
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 0px !important;
}
/* LOGICAL FIELDS (child) ______ */
.resource-hero form.mktoForm .mktoRadioList *,
.resource-hero form.mktoForm .mktoCheckboxList * {
    text-align: left !important;
}
/* |>> Checkbox & Radio Labels .... */
.resource-hero form.mktoForm .mktoCheckboxList label,
.resource-hero form.mktoForm .mktoRadioList label {
    margin-top: 0px !important;
    line-height: 1.25em !important;
    margin-left: 1.75em !important;
    font-weight: bold !important;
}
/* |>> Checkbox & Radio Inputs ....... */
.resource-hero form.mktoForm .mktoRadioList > input,
.resource-hero form.mktoForm .mktoCheckboxList > input {
    float: left !important;
    width: 1.25em !important;
    height: 1.25em !important;
    background-color:#F5F8FA !important;
    border-width: 1px;
    border-style: solid;
    border-color: #CBD6E2 !important;
}
/* CHECKBOX _____________________ */
.resource-hero form.mktoForm input[type=checkbox] {
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
    border-radius:3px;
    -webkit-border-radius: 3px;
}
/* |>> Checkbox :focus state .......... */
.resource-hero form.mktoForm input[type=checkbox]:focus {
    outline:0px !important;
}
/* |>> Checkbox :checked state .................. */
.resource-hero form.mktoForm input[type=checkbox]:checked::before {
    color: var(--LP-Primary-Text-Color) !important;
    content:'\2713';
    font-weight:bold !important;
    width:1em !important;
    height:1em !important;
    text-align:center !important;
    display:block !important;
    margin-top:-2px;
    margin-left:1px;
}
/* RADIO _______________________________ */
.resource-hero form.mktoForm input.mktoField[type=radio] {
    -webkit-appearance:none !important;
    border-radius: 50%;
    height:17px !important;
    width: 17px !important;
}
/* |>> Radio :focus state .................... */
.resource-hero form.mktoForm input.mktoField[type=radio]:focus:checked,
.resource-hero form.mktoForm input.mktoField[type=radio]:focus {
    border-color: #004F71 !important;
    outline: none !important;
    border-width: 1px;
    border-style: solid;
}
/* |>> Radio :checked state ......................... */
.resource-hero form.mktoForm input.mktoField[type=radio]:checked::before {
    content:'';
    background-color: var(--LP-Primary-Text-Color) !important;
    height:11px;
    width:11px;
    position:absolute;
    border-radius: 50%;
    margin-top:2px;
    margin-left:2px;
    box-sizing:border-box;
}
/* TEXTAREA ___________________ */
.resource-hero form.mktoForm textarea.mktoField {
    height: auto !important; /* override input fixed height */
}
/* INPUTS (ALL) :focus state ________ */
.resource-hero form.mktoForm input.mktoField:focus,
.resource-hero form.mktoForm select.mktoField:focus,
.resource-hero form.mktoForm textarea.mktoField:focus {
    outline: 0px !important;
    border-width: 1px;
    border-style: solid;
    border-color: #004F71 !important;
}
/* FORM BUTTON _____________ */
/* |>> Button wrapper ...... */
.resource-hero form.mktoForm .mktoButtonWrap {
    margin:10px auto 20px 0 !important; /* left-aligned button */
}
/* |>> Button style .......... */
.resource-hero form.mktoForm button.mktoButton {
    color: var(--Secondary-CTA-Text-Color) !important;
    background: var(--LP-Secondary-CTA-Color) !important;
    border: 1px solid var(--LP-Secondary-CTA-Color) !important;
    padding: 0.9em 1.15em 0.7em !important;
    font-size: inherit !important;
    line-height: 1.5 !important;
    font-weight: bold !important;
    border-radius: 0;
    min-width:0px;
    box-shadow:none !important; /*mktoOverride*/
    text-shadow:none !important; /*mktoOverride*/
    text-transform: uppercase !important;
    letter-spacing: 0.03em;
}
/* |>> Button :active states .. */
.resource-hero form.mktoForm .mktoButton:hover,
.resource-hero form.mktoForm .mktoButton:focus,
.resource-hero form.mktoForm .mktoButton:active {
    color: var(--Secondary-CTA-Text-Color) !important;
    background: var(--LP-Button-Hover-Color) !important;
    border-color: var(--LP-Button-Hover-Color) !important;
}
.resource-hero form.mktoForm .mktoButton:focus {
    box-shadow: none !important;
}
/* RICH TEXT _____________ */
.resource-hero form.mktoForm .mktoHtmlText {
    padding: 0px !important;
    width: 100% !important;
}
/* PLACEHOLDERS ________________________ */
::-moz-placeholder{color: #000 !important;}
::-webkit-input-placeholder{color: #000 !important;}
:-ms-input-placeholder{color: #000 !important;}
::placeholder{color: #000 !important;}

/* ERROR MESSAGE _________________________ */
.resource-hero form.mktoForm input.mktoField.mktoInvalid,
.resource-hero form.mktoForm select.mktoField.mktoInvalid,
.resource-hero form.mktoForm textarea.mktoField.mktoInvalid,
.resource-hero  .mktoLogicalField.mktoInvalid input {
    border-color: #dd0000 !important;
}
.resource-hero form.mktoForm select.mktoField.mktoInvalid {
    background-image: linear-gradient(135deg, #dd0000 50%, transparent 50%), linear-gradient(45deg, transparent 50%, #dd0000 50%); /* downward triangle - error-red */
}
.resource-hero form.mktoForm .mktoError {
    width: 100% !important;
    left: 5%;
    bottom:30px !important;
    display:flex;
    max-width:90% !important;
}
.resource-hero form.mktoForm .mktoErrorMsg {
    max-width:90% !important;
    -ms-flex-positive: 1;
    flex-grow: 1 !important;
    margin:0px auto !important;
    width: 100% !important;
    font-size: .9em !important;
    background-image:none !important;
    box-shadow: none !important;
    text-shadow:none !important;
    background: #fff !important;
    color: red !important;
    border: 1px solid #dd0000 !important;
    outline: none !important;
}
.resource-hero form.mktoForm .mktoErrorDetail {
    font-size: inherit !important;
    display: inline-block !important;
}
/*/ ======== RESPONSIVE STYLES ========= /*/
/* twin styles: upto 576px, 768-991px || 1-column responsive */
@media screen and (max-width:576px) {
    .resource-hero form.mktoForm,
    .resource-hero form.mktoForm .mktoFormRow,
    .resource-hero form.mktoForm .mktoFieldWrap {
        display:block !important;
        text-align: left !important;
    }
    .resource-hero form.mktoForm, .resource-hero form.mktoForm * {
        padding:0px;
    }
    .resource-hero form.mktoForm label.mktoLabel, .resource-hero form.mktoForm .mktoHtmlText {
        padding-left:0px !important;
        padding-right: 0px !important;
    }
} /* end responsive 0-576px */
@media screen and (min-width:768px) and (max-width:991px) {
    .resource-hero form.mktoForm,
    .resource-hero form.mktoForm .mktoFormRow,
    .resource-hero form.mktoForm .mktoFieldWrap {
        display:block !important;
        text-align: left !important;
    }
    .resource-hero form.mktoForm, .resource-hero form.mktoForm * {
        padding:0px;
    }
    .resource-hero form.mktoForm label.mktoLabel, .resource-hero form.mktoForm .mktoHtmlText {
        padding-left:0px !important;
        padding-right: 0px !important;
    }
} /* end responsive 768-991px */

/* form labels display toggle [ON|OFF] */
.resource-hero form.mktoForm .mktoFormRow label.mktoLabel {opacity:0; position:absolute; height:0; width:0; overflow:hidden; padding:0 !important;}