/*
@primary-blue = #3b6e8f;
@primary-gray = #808285;
@secondary-blue = #003862;
@secondary-gray = #c9cdd3;
@font-color-dark = #403f42;
@font-color-light = #fff;
*/

/*-----------------------------------------
                  Fonts
-----------------------------------------*/
@font-face{
    font-family:"KievitWeb W07 Book";
    src:url("../fonts/0a2889db-78b5-4b62-a975-0878fac20a3f.eot?#iefix");
    src:url("../fonts/0a2889db-78b5-4b62-a975-0878fac20a3f.eot?#iefix") format("eot"),url("../fonts/69d8af42-44f5-46b5-b68c-2a51a79d3b8c.woff2") format("woff2"),url("../fonts/b0e95600-2d59-4097-9052-263c0bc6f4a0.woff") format("woff"),url("../fonts/1473267/fdc3edfb-f290-4785-b94b-2fcc3e9d8ba7.ttf") format("truetype");
}
@font-face{
    font-family:"KievitWeb W07 Medi";
    src:url("../fonts/2adcd26a-1976-42fe-a53b-58b4bb023e71.eot?#iefix");
    src:url("../fonts/2adcd26a-1976-42fe-a53b-58b4bb023e71.eot?#iefix") format("eot"),url("../fonts/ada2ab33-e8a1-46ad-bb29-7f14c50209db.woff2") format("woff2"),url("../fonts/828846f6-6e09-4745-82a9-a17c1042e12b.woff") format("woff"),url("../fonts/9c713b73-bc7c-4e97-a956-19d38b6b950d.ttf") format("truetype");
}
@font-face{
    font-family:"KievitWeb W07 Light";
    src:url("../fonts/f7f8c46a-509e-4d81-8d35-f53ee125acf7.eot?#iefix");
    src:url("../fonts/f7f8c46a-509e-4d81-8d35-f53ee125acf7.eot?#iefix") format("eot"),url("../fonts/27b832ec-7098-4641-bf98-bffa6cff02f1.woff2") format("woff2"),url("../fonts/70ab5267-32f6-4b55-a0a6-62f0712aa83d.woff") format("woff"),url("../fonts/a4e2650e-afa5-4399-8321-616be6b371ee.ttf") format("truetype");
}
@font-face{
    font-family:"KievitWeb W07 Regular";
    src:url("../fonts/1aa8755b-3491-4d68-9249-915b84637e5c.eot?#iefix");
    src:url("../fonts/1aa8755b-3491-4d68-9249-915b84637e5c.eot?#iefix") format("eot"),url("../fonts/a2ad63a7-56d4-4ef1-bbd2-936695fc7b1f.woff2") format("woff2"),url("../fonts/ce815d31-f40f-4377-af70-aae345bea5cf.woff") format("woff"),url("../fonts/345cadd5-fd66-45aa-8735-e5ddf6457d54.ttf") format("truetype");
}
@font-face{
    font-family:"Ionicons";
    src:url("../fonts/ionicons/ionicons.eot?#iefix");
    src:url("../fonts/ionicons/ionicons.eot?#iefix") format("eot"),url("../fonts/ionicons/ionicons.woff2") format("woff2"),url("../fonts/ionicons/ionicons.woff") format("woff"),url("../ionicons/ionicons.ttf") format("truetype");
}

/*-----------------------------------------
              General Styles
-----------------------------------------*/
html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: "KievitWeb W07 Book";
    font-size: 16px;
    background: rgba(201, 205, 211, .25);
    font-weight: normal;
}

h1 {
    font-family: "KievitWeb W07 Light";
    font-size: 32px;
    color: #fff;
    margin-top: 0;
    margin-bottom: 10px;
    padding-top: 0;
}

h3 {
    font-family: "KievitWeb W07 Medi";
    font-size: 24px;
    color: #799e43;
    font-weight: normal;
}

img, a {
    outline: none;
    border: none;
}

.login-logo {
	width: 240px;
}

::-webkit-input-placeholder {
    font-size: 15px;
}
:-moz-placeholder {
    font-size: 15px;
}
::-moz-placeholder {
    font-size: 15px;
} 
:-ms-input-placeholder { 
    font-size: 15px; 
}

.text-right { text-align: right; }

.text-left { text-align: left; }

.vcenter {
    display: table-cell;
    vertical-align: middle;
    float: outside;
}

.wrapper {
    width: auto;
    overflow-x: hidden;
    position: relative;
    width: 100%;
    padding-bottom: 50px;
}

section {
    padding: 55px 0 30px;
    position: relative;
}

/*-----------------------------------------
                  Forms
-----------------------------------------*/
.form-group div {
    padding-top: 7px;
    padding-bottom: 0;
}

.form-group div>label {
    display: block;
    margin-top: 10px;
}

input[type="text"], input[type="email"], input[type="password"] {
    width: 100%!important;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    border: 1px solid #3b6e8f;
    font-size: 16px;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus {
    outline: none;
    border-color: #4F88C7;
}

button {
    margin-top: 30px;
    cursor: pointer;
}

/*-----------------------------------------
           Client Login Specific
-----------------------------------------*/
.header-wrapper {
    height: 250px;
    position: relative;
    overflow: hidden;
}

.header {
    background-image: url('../images/header-bg.png');
    background-position: top right;
    background-repeat: no-repeat;
    background-size: contain;
    height: 250px;
}

.logo {
    top: 85px;
    position: relative;
}

/* 
Microsoft-specific media query to implement an IE workaround 
https://stackoverflow.com/a/36448860
*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .header-logo-wrapper {
        /* IE doesn't support gradient midpoint hints */
        background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.6));
    }
}

.header-logo-wrapper {
    background: linear-gradient(to right, #fff, 93%, rgba(255, 255, 255, 0.6));
    height: 250px;
    width: 305px;
    position: relative;
}

.header-logo-wrapper::before {
    position: absolute;
    display: block;
    content: '';
    width: 1000px;
    height: 250px;
    left: -1000px;
    background: #fff;
}

.header-logo-wrapper::after {
    position: absolute;
    display: inline-block;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 250px 0 0 750px;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.6);
    top: 0;
    left: 305px;
    z-index: 1;
}

.header-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
}

.header-overlay::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 45px 0 0 1950px;
    border-color: transparent transparent transparent #3b6e8f;
    z-index: 3;
}

.header-overlay::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 210px 1000px;
    border-color: transparent transparent rgba(255, 255, 255, 0.6) transparent;
    z-index: 2;
}

.cw-login-section {
    color: #fff;
    padding: 100px 0px;
    position: relative;
    background: #3b6e8f;
}

.cw-login-section::after {
    content: '';
    position: absolute;
    display: inline-block;
    border-style: solid;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-width: 0;
    z-index: 50;
    bottom: -40px;
    left: 0px;
    width: 100%;
    height: 0;
    border-top-width: 45px;
    border-right-width: 1950px;
    padding: -70px 0;
    border-top-color: #3b6e8f;
}

.cw-login-section a {
    color: #fff;
    text-decoration: none;
}

.cw-login-links, .cw-copyright {
    font-size: 12px;
    margin-top: 25px;
    font-family: "KievitWeb W07 Regular";
    font-weight: normal;
}

.cw-copyright p {
    text-align: right;
}

.cw-submit-button {
    background: #003862;
    border: 1px solid #3b6e8f;
    border-radius: none;
    display: block;
    color: #fff;
    height: 47px;
    line-height: 47px;
    padding: 0px 20px;
    font-size: 20px;
    position: relative;
    font-family: "KievitWeb W07 Medi";
    font-weight: normal;
    width: 100%;
    text-align: center;
}

.cw-marketing-content img {
    max-width: 100%;
}

.mkt-snippet {
    background: #fff;
}

/* password requirements */
.cw-password-requirements {
	background: #014D90;
	color: #fff;
	margin-top: 20px;
	margin-bottom: 20px;
}

.cw-password-requirements-inner {
	margin: 0.5em;
}

#pass_reqs h3 {
	color: #fff;
}

@media (max-width: 767px) {
    /* Mobile */
    body {
        font-size: 13px;
        background: #3b6e8f;
    }

    h1 {
        font-size: 24px;
        margin-bottom: 0;
    }

    h3 {
        font-size: 20px;
    }

    .form-group div>label {
        display: none;
    }

    ::-webkit-input-placeholder {
        font-size: 14px;
    }
    :-moz-placeholder {
        font-size: 14px;
    }
    ::-moz-placeholder {
        font-size: 14px;
    } 
    :-ms-input-placeholder { 
        font-size: 14px; 
    }

    .header-wrapper {
        background-image: none;
        background-color: #fff;
        height: 115px;
    }

    .header {
        background-image: none;
        background-color: #fff;
        height: 115px;
    }

    .header-logo-wrapper {
        width: 100%;
        margin: 0;
        padding: 20px 0 0 0;
    }

    .header-logo-wrapper::after {
        display: none;
    }

    .logo {
        top: auto;
        margin: 0 auto;
        text-align: center;
        width: 100%;
        background: none;
    }

    .logo img {
		width: 292px;
        max-width: 211px;
    }

    .header-overlay::after {
        border-left-width: 90vw;
        border-bottom-width: 30px;
    }

    .cw-login-section {
        padding: 5px 20px;
    }

    .cw-marketing-content {
        margin-top: 60px;
        text-align: center;
    }

    .cw-login-links {
        text-align: center;
    }
    
    .cw-copyright {
        margin-top: 0;
        text-align: center;
    }

    .cw-login-links p {
        margin: 0;
    }

    .cw-copyright p {
        text-align: center;
    }

    .header-overlay::before {
        border-left-width: 800px;
        border-top-width: 25px;
    }

    .cw-login-section::after {
        display: none;
    }
}

@media (max-width: 530px) {
    .header-overlay::before {
        border-left-width: 600px;
        border-top-width: 25px;
    }
    .cw-login-section::after {
        border-right-width: 600px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    /* Tablet */
    body {
        font-size: 13px;
    }

    h1 {
        font-size: 24px;
        margin-bottom: 0;
    }

    h3 {
        font-size: 20px;
    }

    ::-webkit-input-placeholder {
        font-size: 14px;
    }
    :-moz-placeholder {
        font-size: 14px;
    }
    ::-moz-placeholder {
        font-size: 14px;
    } 
    :-ms-input-placeholder { 
        font-size: 14px; 
    }

    .header-wrapper {
        background-size: auto 180px;
        height: 180px;
    }

    .header {
        background-position: right -275px top;
        background-size: auto 180px;
        height: 180px;
    }

    .header-overlay::after {
        border-bottom-width: 125px;
    }

    .logo {
        top: 50px;
        position: relative;
    }

    .logo img {
        max-width: 211px;
    }
	
	.login-logo{
		width: 240px;
	}

    .cw-login-section {
        padding: 55px 20px;
    }

    .cw-marketing-content {
        margin-top: 60px;
        text-align: center;
    }

    .cw-login-links {
        text-align: center;
    }
    
    .cw-copyright {
        margin-top: 0;
        text-align: center;
    }

    .cw-login-links p {
        margin: 0;
    }

    .cw-copyright p {
        text-align: center;
    }

    .header-overlay::before {
        border-left-width: 1500px;
    }

    .cw-login-section::after {
        border-right-width: 1500px;
    }
}

@media (min-width: 1024px) and (max-width: 1440px) {
    .header {
        background-position: right -275px top;
    }
}

@media (min-width: 1441px) and (max-width: 1900px) {
    .header-overlay::before {
        border-left-width: 2500px;
    }
    .cw-login-section::after {
        border-right-width: 2500px;
    }
}

@media (min-width: 1901px) and (max-width: 3001px) {
    .header-overlay::before {
        border-left-width: 3500px;
    }
    .cw-login-section::after {
        border-right-width: 3500px;
    }
}