@font-face {
    font-family: OpenSans-Light;
    font-weight: 300;
    font-style: normal;
    src: url("../fonts/OpenSans-Light.eot");
    src: url("../fonts/OpenSans-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Light.ttf") format("truetype"), url("../fonts/OpenSans-Light.svg#OpenSans-Light") format("svg");
}
@font-face {
    font-family: OpenSans-Regular;
    font-weight: 500;
    font-style: normal;
    src: url("../fonts/OpenSans-Regular.eot");
    src: url("../fonts/OpenSans-Regular.eot?#iefix") format("embedded-opentype"),  url("../fonts/OpenSans-Regular.ttf") format("truetype"), url("../fonts/OpenSans-Regular.svg#OpenSans-Regular") format("svg");
}
@font-face {
    font-family: OpenSans-SemiBold;
    font-weight: 500;
    font-style: normal;
    src: url("../fonts/OpenSans-SemiBold.eot");
    src: url("../fonts/OpenSans-SemiBold.eot?#iefix") format("embedded-opentype"),  url("../fonts/OpenSans-SemiBold.ttf") format("truetype"), url("../fonts/OpenSans-SemiBold.svg#OpenSans-SemiBold") format("svg");
}
@font-face {
    font-family: OpenSans-Bold;
    font-weight: 700;
    font-style: normal;
    src: url("../fonts/OpenSans-Bold.eot");
    src: url("../fonts/OpenSans-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Bold.ttf") format("truetype"), url("../fonts/OpenSans-Bold.svg#OpenSans-Bold") format("svg");
}
.OpenSans-Light, body, em, dfn, cite, i,
label,
select, textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="intl_tel"],
select[multiple=multiple] {
    font-family: "OpenSans-Light", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size:14px;
     
}
.OpenSans-Regualr {
    font-family: "OpenSans-Regular", "HelveticaNeue-Medium", "Helvetica Neue Medium", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
}
.OpenSans-SemiBold,
button, html input[type="button"], input[type="reset"], input[type="submit"], h1,
h2, h3,
h4,
h5,
h6, strong,
p.bold, b {
    font-family: "OpenSans-SemiBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 700;
    font-style: normal;
    /*font-size: 20px;*/
}

.OpenSans-Bold {
    font-family: "OpenSans-Bold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

 
html
{
    background: transparent url('Images/Background.png') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    /*font-size: 100%*/
}
@media (max-width:600px) {
    html {
        background: #fff;
    }
}

    body {
        -webkit-font-smoothing: antialiased;
        margin: 0;
        padding: 0;
        min-height: 100vh;
        height: 100%;
        width: 100%;
        padding: 20px;
        overflow-x: hidden;
        overflow-y: auto;
        color: #838383;
        letter-spacing: -0.74px;
        opacity: 1;
        /*background: #f5f5f5;*/
    }

    .main-container {
        max-width: 900px;
        margin: 60px auto 0 auto;
    }

    @media (max-width:1024px) {
        .main-container {
            margin: 0px auto;
        }
    }

    @media only screen and (max-width: 500px) {
        .main-container {
            margin: 0px auto;
        }
    }

    @media only screen and (max-width: 455px) {
        .main-container {
            margin: 0px auto;
        }
    }

    @media only screen and (max-width: 340px) {
        .main-container {
            margin: 0px auto;
        }
    }

    a {
        color: inherit;
        outline: none;
    }

        a:hover {
            text-decoration: underline;
        }

    .form-container {
        max-width: 450px;
        margin: 0 auto 78px auto;
    }
@media only screen and (max-width: 1000px) {
    .form-container {
        margin: 0 auto 20px auto;
    }
}
    .form-body {
        background: #FFFFFF 0% 0% no-repeat padding-box;
        overflow: hidden;
        padding: 50px;
        /*color: #ffffff;*/
        border-radius: 19px;
        -webkit-box-shadow: 0 3px 99px #e3e3e3;
        box-shadow: 0 3px 99px #e3e3e3;
        opacity: 1;
    }

    @media only screen and (max-width: 500px) {
        .form-body {
            padding: 50px 40px;
        }
    }

    @media only screen and (max-width: 455px) {
        .form-body {
            padding: 45px 20px;
        }
    }

    @media only screen and (max-width: 340px) {
        .form-body {
            padding: 30px 10px;
        }
    }

    .form-body .title {
        margin: 0;
        text-align: center;
        font-weight: normal;
        color: #D82727;
    }
    .form-body .smaller {
        font-size: medium;
        padding: 5px;
    }
    div.logo {
        width: auto;
        height: 100px;
        text-align: center;
        background: transparent url(../LogonV2/Images/Logo.png) center no-repeat;
        opacity: 1;
        /*background-size: 1016px 410px*/
    }

    .social-login ul {
        list-style-type: none;
        margin: 30px 0;
        padding: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

        .social-login ul li {
            -webkit-box-flex: 1;
            -ms-flex: 1 auto;
            flex: 1 auto;
        }

            .social-login ul li a {
                background-color: #56385a;
                border-radius: 3px;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                width: 100%;
                height: 100%;
                padding: 15px;
                color: #e6e6e6;
                font-weight: bold;
                text-decoration: none;
                -webkit-transition: background-color 0.3s;
                transition: background-color 0.3s;
            }

                .social-login ul li a::before {
                    content: "";
                    width: 30px;
                    height: 30px;
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: 30px;
                    margin-right: 5px;
                }

                .social-login ul li a:hover {
                    background-color: #fff199;
                    color: #0e090e;
                    -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
                }

    li.google {
        margin-right: 10px;
    }

        li.google a::before {
            background-image: url("../images/google.png");
        }

    li.fb {
        margin-left: 10px;
    }

        li.fb a::before {
            margin: 0;
            background-image: url("../images/fb.png");
        }

    @media only screen and (max-width: 400px) {
        .social-login ul {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
        }

        li.google,
        li.fb {
            margin: 0;
        }

        li.google {
            margin-bottom: 10px;
        }
    }

    ._or {
        text-align: center;
        margin-bottom: 20px;
        /*color: #d9d9d9;*/
    }

    .the-form {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    /*.the-form label {
        margin-bottom: 5px;
        color: #e6e6e6;
        font-weight: bold;
    }

    .the-form [type="email"],
    .the-form [type="password"] {
        padding: 15px;
        font-size: 16px;
        background: rgba(0, 0, 0, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 3px;
        margin-bottom: 15px;
        -webkit-transition: background 0.3s;
        transition: background 0.3s;
        color: #e6e6e6;
    }

        .the-form [type="email"]::-webkit-input-placeholder,
        .the-form [type="password"]::-webkit-input-placeholder {
            color: rgba(255, 255, 255, 0.3);
        }

        .the-form [type="email"]::-moz-placeholder,
        .the-form [type="password"]::-moz-placeholder {
            color: rgba(255, 255, 255, 0.3);
        }

        .the-form [type="email"]:-ms-input-placeholder,
        .form-container .form-body .the-form [type="password"]:-ms-input-placeholder {
            color: rgba(255, 255, 255, 0.3);
        }

        .the-form [type="email"]::-ms-input-placeholder,
        .form-container .form-body .the-form [type="password"]::-ms-input-placeholder {
            color: rgba(255, 255, 255, 0.3);
        }

        .the-form [type="email"]::placeholder,
        .form-container .form-body .the-form [type="password"]::placeholder {
            color: rgba(255, 255, 255, 0.3);
        }

        .the-form [type="email"]:hover,
        .the-form [type="password"]:hover {
            background: rgba(0, 0, 0, 0.1);
        }

        .the-form [type="email"]:focus,
        .the-form [type="password"]:focus {
            background: #ffffff;
            -webkit-box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
            box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
            border-color: #4a304d;
            color: #222222;
        }

            .the-form [type="email"]:focus::-webkit-input-placeholder,
            .form-container .form-body .the-form [type="password"]:focus::-webkit-input-placeholder {
                color: #666666;
            }

            .the-form [type="email"]:focus::-moz-placeholder,
            .the-form [type="password"]:focus::-moz-placeholder {
                color: #666666;
            }

            .the-form [type="email"]:focus:-ms-input-placeholder,
            .the-form [type="password"]:focus:-ms-input-placeholder {
                color: #666666;
            }

            .the-form [type="email"]:focus::-ms-input-placeholder,
            .the-form [type="password"]:focus::-ms-input-placeholder {
                color: #666666;
            }

            .the-form [type="email"]:focus::placeholder,
            .the-form [type="password"]:focus::placeholder {
                color: #666666;
            }

    .the-form [type="submit"] {
        background: #ffb37b;
        border: 1px solid rgba(0, 0, 0, 0.1);
        padding: 18px;
        font-size: 20px;
        border-radius: 3px;
        cursor: pointer;
        margin-top: 20px;
        color: black;
        -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

        .the-form [type="submit"]:hover {
            opacity: 0.9;
        }*/


    /* Forms
   ========================================================================== */
    /**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
    /**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
    button,
    input,
    optgroup,
    select,
    textarea {
        color: inherit;
        /* 1 */
        font: inherit;
        /* 2 */
        margin: 0;
        /* 3 */
    }

    /**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
    button {
        overflow: visible;
    }

    /**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
    button,
    select {
        text-transform: none;
    }

    /**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
    button,
    html input[type="button"],
    input[type="reset"],
    input[type="submit"] {
        -webkit-appearance: button;
        /* 2 */
        cursor: pointer;
        /* 3 */
    }

        /**
 * Re-set default cursor for disabled elements.
 */
        button[disabled],
        html input[disabled] {
            cursor: default;
        }

        /**
 * Remove inner padding and border in Firefox 4+.
 */
        button::-moz-focus-inner,
        input::-moz-focus-inner {
            border: 0;
            padding: 0;
        }

    /**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
    input {
        line-height: normal;
    }

        /**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
        input[type="checkbox"],
        input[type="radio"] {
            box-sizing: border-box;
            /* 1 */
            padding: 0;
            /* 2 */
        }

        /**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            height: auto;
        }

        /**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
        input[type="search"] {
            -webkit-appearance: textfield;
            /* 1 */
            /* 2 */
            box-sizing: content-box;
        }

            /**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
            input[type="search"]::-webkit-search-cancel-button,
            input[type="search"]::-webkit-search-decoration {
                -webkit-appearance: none;
            }

    /**
 * Define consistent border, margin, and padding.
 */
    fieldset {
        border: 1px solid #c0c0c0;
        margin: 0 2px;
        padding: 0.35em 0.625em 0.75em;
    }

    /**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
    legend {
        border: 0;
        /* 1 */
        padding: 0;
        /* 2 */
    }

    /**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
    textarea {
        overflow: auto;
    }

    /**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
    optgroup {
        font-weight: bold;
    }


    .form-footer {
        max-width: 450px;
        margin: 0 auto 80px auto;
        text-align: center !important;
    }
@media (max-width:1000px) {
    .form-footer {
        max-width: 450px;
        margin: auto;
        text-align: center !important;
    }
}
        .form-footer a {
            color: #D82727;
        }

        .form-footer ul {
            font-family: OpenSans-SemiBold, "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
            list-style-type: none;
            margin: 30px 0;
            padding: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        }

            .form-footer ul li {
                -webkit-box-flex: 1;
                -ms-flex: 1 auto;
                flex: 1 auto;
                margin-left:6px;
            }

                .form-footer ul li a {
                    border-radius: 3px;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    justify-content: center;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    width: 100%;
                    height: 100%;
                    /*padding: 15px;*/
                    color: #D82727;
                    /*font-weight: bold;*/
                    text-decoration: none;
                    letter-spacing: -1.01px;
                    /*-webkit-transition: background-color 0.3s;*/
                    /*transition: background-color 0.3s;*/
                }

                    .form-footer ul li a::before {
                        content: "";
                        /*width: 30px;*/
                        /*height: 30px;*/
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: 30px;
                        margin-right: 5px;
                        margin-left: 5px;
                    }

                    .form-footer ul li a:hover {
                        /*background-color: #fff199;
                color: #0e090e;*/
                        /*-webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);*/
                    }


.feat-section {
    /*padding: 5% 5%;*/
    width: 100%;
    /*float: left;*/
    display: inline-block;
}

.feat-section__inner {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    max-width: 1200px;
    margin: 0 auto;
}

.feat-section__content {
    /*-ms-flex-preferred-size: 60%;
    flex-basis: 60%;
    margin-right: 5%;*/
}

.feat-section__image-wrap {
    /*-ms-flex-preferred-size: 40%;
    flex-basis: 40%;*/
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
}

.feat-section__image {
    max-width: 100%;
    position: absolute;
    margin-left: 90px;
}
/*IE 11*/
_:-ms-fullscreen, :root .feat-section__image {
    margin-left: 30px;
}
/*Edge*/
@supports (-ms-ime-align:auto) {
    .feat-section__image {
        margin-left: 110px;
    }
}
/*Firefox*/
@-moz-document url-prefix() {
    .feat-section__image {
        margin-left: 110px;
    }
}
/*IE 11*/
_:-ms-fullscreen, :root .isologo {
    right: 44em;
}

@media (max-width: 650px) {
    .feat-section__image {
        margin-top: 26em;
        right: 0;
    }
    /*IE 11*/
    _:-ms-fullscreen, :root .feat-section__image {
        margin-top: 12em;
        right: 0;
    }
    /*Edge*/
    @supports (-ms-ime-align:auto) {
        .feat-section__image {
            margin-top: 25em;
            right: 0;
        }
    }
    /*Firefox*/
    @-moz-document url-prefix() {
        .feat-section__image {
            margin-top: 25em;
            right: 0;
        }
    }
}

    .srouce {
        text-align: center;
        padding: 10px;
    }