/* DE Web Works - Main CSS */
/*------------------------------------*\
    #GENERAL
\*------------------------------------*/
/* custom Foundation media query for use in JS */
.foundation-mq{
    font-family:"small=0em&login-registration-medium=37.5em&medium=46em&login-registration-large=55em&large=64em&xlarge=75em&xxlarge=90em";
}

html {
    background-color: #fff;
}

body {
    height: auto;
    min-height: 100%;
    padding-bottom: 280px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 0.01em;
    background-image: url("images/backgrounds/doctors-standing-together.png"),
                      url("images/backgrounds/skyline.png");
    background-repeat: no-repeat,
                       repeat-x;
    background-size: 460px auto,
                     auto;
    background-position: center bottom 20px,
                         center bottom;
    background-color: transparent;
}

body *,
body *:before,
body *:after {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

.row {
    max-width: 81.875rem;
}

.row.language-toggle {
	max-width: 73.125rem;
	margin-top: 1rem;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Jomhuria', serif;
    font-weight: 400;
}

h2 {
    margin-bottom: 0.166em;
    font-size: 3em;
    color: #3a8ae4;
}

p {
    margin-bottom: 1em;
}

a {
    color: #3a8ae4;
}

strong, b {
    font-weight: 600;
}

.button {
    position: relative;
    margin: 0;
    border: none;
    border-bottom: 0.0455em solid #155aa9;
    border-radius: 0.1em;
    padding: 0.17em 0.409em 0;
    font-family: 'Jomhuria', serif;
    font-size: 2.75em;
    font-weight: 400;
    color: #fff;
    background-color: #3a8ae4;
}

.button:hover,
.button:focus {
    color: #fff;
    background-color: #367fd1;
    outline: none;
}

.button:active {
    top: 0.0455em;
    margin-bottom: 0.0455em;
    border-bottom: none;
    background-color: #1060b9;
}

.button.button-back,
.button.button-forward {
    background-repeat: no-repeat;
    background-size: 0.455em auto;
}

.button.button-back {
    padding-left: calc(0.409em + 0.455em + 0.18em); /* standard button padding-right + bg-image width + spacing from text */
    background-image: url("images/icons/double-chevrons-left.svg");
    background-position: left 0.409em center; /* left offset: standard button padding-left */
}

.button.button-forward {
    padding-right: calc(0.409em + 0.455em + 0.18em); /* standard button padding-right + bg-image width + spacing from text */
    background-image: url("images/icons/double-chevrons-right.svg");
    background-position: right 0.409em center; /* right offset: standard button padding-right */
}

@media only screen and (min-width: 46em) {
    body {
        padding-bottom: 474px;
        background-size: auto,
                         auto;
        background-position: center bottom 100px,
                             center bottom;
    }
}



/*------------------------------------*\
    #FORMS
\*------------------------------------*/
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="color"],
textarea,
select {
    margin-bottom: 0.5625rem;
    height: auto;
    padding: 0.625em 0.375em;
    font-size: inherit;
    color: #333;
}

[type=checkbox],
[type=radio] {
    margin-bottom: 0;
}

body ::-webkit-input-placeholder {
    font-weight: inherit;
    color: #333;
}

body ::-moz-placeholder {
    font-weight: inherit;
    color: #333;
}

body :-ms-input-placeholder {
    font-weight: inherit;
    color: #333;
}

body ::placeholder {
    font-weight: inherit;
    color: #333;
}

.required::-webkit-input-placeholder {
    font-weight: bolder;
}

.required::-moz-placeholder {
    font-weight: bolder;
}

.required:-moz-placeholder {
    font-weight: bolder;
}

.required:-ms-input-placeholder {
    font-weight: bolder;
}

label {
    font-weight: 400;
    cursor: pointer;
}

label:not([for]) {
    margin-bottom: 1.5rem;
}

[type=checkbox] + label,
[type=radio] + label {
    display: inline;
}

fieldset {
    margin-bottom: 1.5rem;
    border-top: 1px solid #eea740;
}

legend {
    padding-right: 0.667em;
    font-size: 0.75em;
    text-transform: uppercase;
}

.error {
    display: block;
    margin-top: 1.5rem;
    margin-bottom: 0.5625rem;
    padding: 0.33333em 0.5em 0.5em;
    font-size: smaller;
    font-style: italic;
    background: #f04124;
    color: #fff !important;
}

.field-error {
    margin-top: -0.5625rem;
}

.error[style*="inline"] {
    display: block !important;
}

.form .row {
    margin-left: -0.5625rem;
    margin-right: -0.5625rem;
}

.form .columns {
    padding-left: 0.5625rem;
    padding-right: 0.5625rem;
}

.form .buttons {
    margin-top: 1.5rem;
    text-align: center;
}

.form .buttons:before,
.form .buttons:after {
    content: "";
    display: table;
}

.form .buttons:after {
    clear: both;
}

.form .buttons.buttons-spread .button:nth-child(1) {
    float: left;
}

.form .buttons.buttons-spread .button:nth-child(2) {
    float: right;
}

.flex-inputs {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
}

.flex-input {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0%;
        -ms-flex: 1 1 0%;
            flex: 1 1 0%;
    margin-right: 1.125rem;
}

.flex-input:last-child {
    margin-right: 0;
}

.flex-input-state {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
}

.flex-input-state input {
    width: 3em;
    box-sizing: content-box;
}

@media only screen and (max-width: 45.9375em) {
    .form {
        max-width: 23.75em;
        margin-left: auto;
        margin-right: auto;
    }
}

@media only screen and (min-width: 46em) {
    .form .buttons.buttons-left .button {
        float: left;
    }

    .form .buttons.buttons-right .button {
        float: right;
    }

    .align-bottoms {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

    .align-bottom {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .align-to-bottom {
        margin-top: auto !important; /* use this to align to bottom using flexbox */
    }
}



/*=====================================/
    #FLOATL
    Float Labels
    https://github.com/richardvenneman/floatl
/=====================================*/
.floatl {
    position: relative;
}

.logreg-forgot,
.floatl__label {
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 1em;
    left: calc( 0.375em * (1 / 0.667) ); /* input padding-left * (input font-size / label font-size) */
    font-size: 0.667em;
    font-weight: inherit;
    line-height: 1;
    color: #1060b9;
}

.floatl--active .floatl__label {
    opacity: 1;
    visibility: visible;
    top: calc(0.625em * (1 / 0.667) ); /* input padding-top * (input font-size / label font-size) */
}


input.logreg-password,
.floatl--active .floatl__input {
    padding-top: calc(0.625em + 0.667em + 0.2em); /* input padding-top + label font-size + spacing */
}

.floatl--active.floatl--multiline .floatl__label {
    background-color: white;
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.95) 80%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.95) 80%, rgba(255, 255, 255, 0) 100%);
}



/*------------------------------------*\
    #HEADER
\*------------------------------------*/
.header-top {
    margin-bottom: 2rem;
    padding-top: 0.9375rem;
    padding-bottom: 0.9375rem;
    border-bottom: 1px solid #ff8401;
    background-color: #ffdea2;
}

.header-top a {
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.main-navigation {
    margin: 0;
    list-style: none;
}

.header-logo {
    margin-top: 3rem;
    margin-bottom: 2rem;
    text-align: center;
}

@media only screen and (min-width: 46em) {
    .header-top > .row > .columns {
        padding-left: 3.625rem;
        padding-right: 3.625rem;
    }
}



/*------------------------------------*\
    #LOGIN/REGISTRATION
\*------------------------------------*/
.login-registration {
    margin: 1rem -0.9375rem;
}

.logreg-intro,
.logreg-main {
    padding-bottom: 0.625em;
}

.logreg-intro {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    padding-left: 0.75em;
    padding-right: 0.75em;
    font-weight: 400;
    letter-spacing: 0.025em;
    color: #340d03;
    background-color: #ffdea2;
}

.logreg-main {
    padding: 0.75em 1.25em 2em;
    color: #fff;
    background-color: #e88a00;
}

.logreg-main h2 {
    color: inherit;
}

.logreg-forgot {
    left: auto;
    right: calc( 0.375em * (1 / 0.667) ); /* input padding-left * (input font-size / label font-size) */
    visibility: visible;
    opacity: 1;
}

html.no-js .logreg-forgot,
html:not(.placeholder) .logreg-forgot {
    position: static;
    font-size: inherit;
}

.reg-steps-container {
    text-align: center;
}

.reg-step-indicator {
    display: inline-block;
    max-width: 50em;
    margin: 0 -0.25em 1rem;
    font-size: 0.75em;
    font-weight: 400;
    text-align: center;
    list-style: none;
}

.reg-step-indicator > li {
    float: left;
    width: 50%;
    padding: 0.25em;
}

.reg-step-indicator > li .inner {
    border: 0.25em solid;
    border-radius: 0.4em;
    padding: 0 0.66em 0.5em;
    background-color: #b0b0b0;
}

.reg-step-indicator > li.current .inner {
    background-color: #3a8ae4;
}

.reg-step-number {
    display: block;
    margin-bottom: -0.167em;
    font-family: 'Jomhuria', serif;
    font-size: 2.5em;
    text-transform: uppercase;
}

@media only screen and (max-width: 31.0625em) {
    .reg-step-indicator:before,
    .reg-step-indicator:after {
        content: "";
        display: table;
    }

    .reg-step-indicator:after {
        clear: both;
    }
}

@media only screen and (min-width: 31.125em) {
    .reg-step-indicator {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
                justify-content: space-between;
        margin-left: auto;
        margin-right: auto;
    }

    .reg-step-indicator > li {
        -webkit-box-flex: 0;
        -webkit-flex: 0 1 auto;
            -ms-flex: 0 1 auto;
                flex: 0 1 auto;
        width: 25%;
        max-width: 6.5rem;
    }
}

@media only screen and (max-width: 45.9375em) {
    .logreg-new {
        margin-bottom: 2em;
    }
}

@media only screen and (min-width: 46em) {
    .logreg-new,
    .logreg-returning {
        float: left;
        width: 50%;
    }

    .logreg-new {
        padding-right: 3em;
        border-right: 1px solid #eea740;
    }

    .logreg-returning {
        padding-left: 3em;
    }
}

@media only screen and (min-width: 55em) {
    .slant {
        position: relative;
        z-index: 1;
    }

    .slant:before,
    .slant:after {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        padding-bottom: 5.55%;
        background-color: inherit;
        pointer-events: none;
        /* fix Chrome aliasing */
        outline: 1px solid transparent;
    }

    .slant:before {
        top: 0;
    }

    .slant:after {
        bottom: 0;
    }

    .slant.slant-left:before {
        -webkit-transform: translate3d(0,-50%,0) skewY(-3deg);
        transform: translate3d(0,-50%,0) skewY(-3deg);
    }

    .slant.slant-left:after {
        -webkit-transform: translate3d(0,50%,0) skewY(3deg);
        transform: translate3d(0,50%,0) skewY(3deg);
    }

    .slant.slant-right:before {
        -webkit-transform: translate3d(0,-50%,0) skewY(3deg);
        transform: translate3d(0,-50%,0) skewY(3deg);
    }

    .slant.slant-right:after {
        -webkit-transform: translate3d(0,50%,0) skewY(-3deg);
        transform: translate3d(0,50%,0) skewY(-3deg);
    }

    .slant.slant-rounded,
    .slant.slant-rounded:before {
        border-top-left-radius: 0.1875rem;
        border-top-right-radius: 0.1875rem;
    }

    .slant.slant-rounded,
    .slant.slant-rounded:after {
        border-bottom-left-radius: 0.1875rem;
        border-bottom-right-radius: 0.1875rem;
    }

    .slant.slant-rounded.slant-left {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .slant.slant-rounded.slant-right {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .login-registration {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -webkit-align-items: flex-start;
            -ms-flex-align: start;
                align-items: flex-start;
        max-width: 59rem;
        margin-left: auto;
        margin-right: auto;
    }

    .logreg-intro {
        width: 19rem;
        margin-top: 1.9375em;
    }

    .logreg-main {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 0%;
            -ms-flex: 1 1 0%;
                flex: 1 1 0%;
    }
}



/*------------------------------------*\
    #REGISTRATION - STEP 1
\*------------------------------------*/
.reg-step-1-main fieldset {
    border: none;
}

@media only screen and (min-width: 46em) {
    .reg-step-1,
    .reg-step-1-main,
    .reg-step-1-main .columns,
    .reg-step-1-main fieldset,
    .reg-step-1-directive,
    .reg-step-1-or {
        background-color: inherit;
    }

    .row.reg-step-1-main {
        position: relative;
        margin-left: -1.25rem;
        margin-right: -1.25rem;
    }

    .reg-step-1-main .columns {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .reg-step-1-main .columns:nth-child(1) {
        border-right: 1px solid #eea740;
    }

    .reg-step-1-main fieldset {
        margin-bottom: 0;
    }
    
    .reg-step-1-directive {
        text-align: center;
    }

    .reg-step-1-or {
        position: absolute;
        top: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
                transform: translateX(-50%);
        padding-bottom: 0.2em;
        font-family: 'Jomhuria', serif;
        font-size: 1.875em;
        line-height: 0.8;
    }
}

.member-agreement {
    max-height: 35.625rem;
    margin-bottom: 1.5rem;
    padding: 2em 1em;
    overflow: auto;
    font-size: 11px;
    color: #3b3b3b;
    background-color: #fff;
}

.disclaimer-checkbox {
    display: inline-block;
    margin-bottom: 1rem;
}

.disclaimer-checkbox label {
    font-weight: bold;
}

@media only screen and (min-width: 48em) {
    .dislaimer-scroll {
        height: 480px;
        margin-bottom: 0.5rem;
        border: solid 1px #B55700;
        padding: 0.5rem 0.5rem 0;
        color: #340d03;
        background-color: #fff;
        overflow-y: scroll;
    }
}