@media screen and (max-width: 500px)
{
    .hide-on-small-screen, .optional.hide-on-small-screen-if-optional
    {
        display: none !Important;
    }
}

@media screen and (max-width: 280px)
{
    .arrow
    {
        background-size: 1.7em;
    }
}

/*#region Heading Styles*/

h1
{
    font-size: 1.2em;
    font-weight: 500;
    line-height: 1em;
    text-align: center;
}

h2
{
    font-size: 1.0em;
    text-align: center;
}

h3
{
    clear: both;
    font-weight: 400;
    margin-bottom: 1em;
    text-align: center;
}

h4
{
    margin-bottom: 1em;
}

h5
{
    font-size: 1em;
    font-weight: 600;
    margin-bottom: .5em;
    margin-left: 3%;
    margin-top: 1em;
}

h6
{
    clear: both;
    font-weight: 600;
    margin-bottom: 1em;
    margin-top: -1em;
    text-align: center;
}

/*#endregion*/

/*#region Basic Page Padding */

input[type = "textbox"], textarea, .body p, .FancyDropDown, .options, .condition, .basic-form, footer, .category, 
.dealer-list, .disclaimer, .passback-links, .condition-quiz, .request-appointment, .standard-page-item, .center, .errors-area
{
    margin-bottom: 2px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4px;
    width: 95%;
}

/*#endregion*/

/*#region body style*/

@media screen and (max-width: 280px)
{
    .arrow
    {
        background-size: 1.7em;
    }
}

/*#endregion */

/*#region Helper Classes*/

.arrow
{
    background-image: url('/Images/NextButtonArrow.PNG');
    background-position: right 55%;
    background-repeat: no-repeat;
    padding-right: 2.2em;
}

.errors-area {
    background-color: #EFC3C2;
}

input[type = "checkbox"].input-validation-error
{
    background-color: inherit !important;
}

.print-only
{
    display: none;
}

.no-print
{
    display: block;
}

.smaller, .field-validation-error
{
    font-size: .8em;
}

.small
{
    font-size: .7em;
}

.extra-line-height
{
    line-height: 2.5em;
}

.required-fields
{
    float: left;
}

@media print
{
    .print-only
    {
        display: block !important;
    }

    .no-print
    {
        display: none !important;
    }
}

/*#endregion*/

/*#region FancyDropDown Styles */

.FancyDropDown li:first-child, .FancyDropDown label, .basic-form input[type = "text"], ul.basic-form textarea, .basic-form input[type = "tel"], .basic-form input[type = "email"], .basic-form input[type = "number"]
{
    display: inherit;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding: 3px 5px 2px 5px;
    width: auto;
}

.FancyDropDown select
{
    width: 100%;
}

.FancyDropDown, .FancyDropDown select
{
    cursor: pointer;
}

.FancyDropDown ul
{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

.FancyDropDown.focus li
{
    display: inherit;
}

.FancyDropDown li.selected:nth-child(n + 2), .FancyDropDown option[selected = selected]:nth-child(n + 2)
{
    font-weight: 600;
}

.FancyDropDown ul, .FancyDropDown.focus label
{
    display: none;
}

.FancyDropDown.focus ul, .FancyDropDown label
{
    display: inherit;
}

.FancyDropDown li, .FancyDropDown option
{
    padding: 3px 5px 2px 5%;
}

/*#endregion */

/*#region basic-form styles */

ul.basic-form
{
    padding-left: 0px;
}

ul.basic-form > li
{
    clear: both;
    float: left;
    margin-bottom: 2px;
    margin-top: 4px;
    width: 100%;
}

ul.basic-form > li > label
{
    float: left;
    height: 1.7em;
    min-width: 29%;
    overflow: visible;
    padding-top: .2em;
    text-align: right;
    white-space: nowrap;
}

ul.basic-form > li > input[type = "text"], ul.basic-form > li > select, ul.basic-form > li > textarea, ul.basic-form > li > div.FancyDropDown, .basic-form input[type = "tel"], .basic-form input[type = "email"], .basic-form input[type = "number"]
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float: right;
    width: 65%;
}

ul.basic-form li span.field-validation-error
{
    clear: right;
    float: right;
    min-width: 66%;
    white-space: nowrap;
}

ul.basic-form button
{
    float: right;
}

ul.basic-form li span.field-validation-error
{
    clear: both;
    text-align: left;
}

/*#endregion */

/*#region selection-style-1 */

.selection-style-1
{
    cursor: pointer;
}

/*#endregion*/

.collapse.expanded .if-collapsed
{
    display: none
}

.collapse.collapsed .if-expanded
{
    display: none;
}

/*#region LogoAndTitleOnTheSide styles*/

.LogoAndTitleOnTheSide #LogoAndTitle
{
    float: right;
    margin-top: 1em;
    min-height: 5em;
    width: 40%;
}

.LogoAndTitleOnTheSide #LogoAndTitle h1
{
    float: right;
    line-height: 2em;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 3em;
    width: 90%;
}

.LogoAndTitleOnTheSide > form, .LogoAndTitleOnTheSide > .form
{
    float: left;
    max-width: 60%;
    min-height: 300px;
    padding-top: .5em;
    width: 60%;
}

.LogoAndTitleOnTheSide > form > h3:first-child, .LogoAndTitleOnTheSide > .form > h3:first-child
{
    margin-top: 0em;
}

.LogoAndTitleOnTheSide #LogoAndTitle #Logo
{
    float: right;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 1em;
    min-width: 25px;
    text-align: center;
    width: 80%;
}

.LogoAndTitleOnTheSide #LogoAndTitle #Logo img
{
    max-height: 100%;
    max-width: 95%;
}

.LogoAndTitleOnTheSide #LogoAndTitle #Logo img.horizontal
{
    display: inline-block;
}

.LogoAndTitleOnTheSide #LogoAndTitle #Logo img.vertical
{
    display: none;
}

input[type = 'number']
{
    -moz-appearance: textfield;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button
{
    -webkit-appearance: none;
}

@media screen and (max-width: 500px)
{
    .LogoAndTitleOnTheSide #LogoAndTitle
    {
        float: right;
        margin-top: 1em;
        min-height: 5em;
        width: 100%;
    }

    .LogoAndTitleOnTheSide #LogoAndTitle h1
    {
        float: right;
        line-height: 1em;
        margin-left: 1%;
        margin-right: 4%;
        margin-top: .5em;
        width: 60%;
    }

    .LogoAndTitleOnTheSide > form, .LogoAndTitleOnTheSide > .form
    {
        float: left;
        max-width: 100%;
        padding-top: .5em;
        width: 100%;
    }

    .LogoAndTitleOnTheSide #LogoAndTitle #Logo
    {
        height: 4em;
        margin-left: 0%;
        margin-right: 0%;
        margin-top: 0px;
        width: 35%;
    }
}

@media screen and (max-width: 320px)
{
    .LogoAndTitleOnTheSide #LogoAndTitle #Logo
    {
        height: 4.5em;
    }

    .LogoAndTitleOnTheSide #LogoAndTitle #Logo img.horizontal
    {
        display: none;
    }

    .LogoAndTitleOnTheSide #LogoAndTitle #Logo img.vertical
    {
        display: inline-block;
    }
}

@media screen and (max-width: 290px)
{
    .LogoAndTitleOnTheSide #LogoAndTitle #Logo
    {
        min-height: 5em;
    }
}

/*#endregion*/

/*#region LogoAndTitleOnTheTop styles*/

.LogoAndTitleOnTheTop #LogoAndTitle
{
    float: right;
    margin-top: 1em;
    max-width: 100%;
    min-height: 5em;
    width: 100%;
}

.LogoAndTitleOnTheTop #LogoAndTitle h1
{
    float: right;
    line-height: 2em;
    margin-left: 1%;
    margin-right: 4%;
    margin-top: .5em;
    width: 60%;
}

.LogoAndTitleOnTheTop > form, .LogoAndTitleOnTheTop > .form
{
    float: left;
    max-width: 100%;
    padding-top: .5em;
    width: 100%;
}

.LogoAndTitleOnTheTop > form > h3:first-child, .LogoAndTitleOnTheTop > .form > h3:first-child
{
    margin-top: 0em;
}

.LogoAndTitleOnTheTop #LogoAndTitle #Logo
{
    float: right;
    min-height: 5em;
    min-width: 25px;
    text-align: center;
    width: 35%;
}

.LogoAndTitleOnTheTop #LogoAndTitle #Logo img
{
    max-height: 100%;
    max-width: 95%;
}

.LogoAndTitleOnTheTop #LogoAndTitle #Logo img.horizontal
{
    display: inline-block;
}

.LogoAndTitleOnTheTop #LogoAndTitle #Logo img.vertical
{
    display: none;
}

@media screen and (max-width: 500px)
{
    .LogoAndTitleOnTheTop #LogoAndTitle h1
    {
        line-height: 1em;
    }

    .LogoAndTitleOnTheTop #LogoAndTitle #Logo
    {
        height: 4em;
    }

    .LogoAndTitleOnTheSide #LogoAndTitle #Logo img
    {
        max-height: 140%;
        min-height: 4em;
        max-width: 95%;
        min-width: 9em;
    }
}

@media screen and (max-width: 320px)
{
    .LogoAndTitleOnTheTop #LogoAndTitle #Logo
    {
        height: 4.5em;
    }

    .LogoAndTitleOnTheTop #LogoAndTitle #Logo img.horizontal
    {
        display: none;
    }

    .LogoAndTitleOnTheTop #LogoAndTitle #Logo img.vertical
    {
        display: inline-block;
    }

    .LogoAndTitleOnTheTop #LogoAndTitle #Logo img.vertical,
    .LogoAndTitleOnTheSide #LogoAndTitle #Logo img
    {
        max-height: 125%;
        min-height: 3em;
        max-width: 60%;
        min-width: 4em;
    }
}

@media screen and (max-width: 290px)
{
    .LogoAndTitleOnTheTop #LogoAndTitle #Logo
    {
        min-height: 5em;
    }
}
/*#endregion*/