@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&family=Roboto:wght@400;700&display=swap');

:root {
    /* Colors */
    --dark-blue: rgba(46,77,110,1);
    --light-blue: rgba(147,189,223,1);
    --lighter-blue: rgba(223, 233, 244, 1);
    --orange: rgba(239,127,52,1);
    --dark-orange: rgba(229, 116, 43, 1);
    --grey: rgba(104,103,103,1);
    --white: rgba(255,255,255,1);
    /* Fonts */
    --body-font: 'Roboto', sans-serif;
    --headline-font: 'Roboto Slab', serif;
    /* Transitions */
    --base-transition: .33s ease-in-out;
}

html {
    background-color: var(--dark-blue);
}

body {
    background-color: var(--lighter-blue);
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--headline-font);
    color: var(--dark-blue);
}

div#container-index {
    background-color: var(--lighter-blue);
    overflow-x: hidden;
}

div.login-container {
    background-color: #fefefe;
    border: 1px solid #cecece;
    padding-bottom: 8%;
}

div#container-index div.login-container img.logo-login {
    padding-top: 10px;
    padding-bottom: 10px;
}

div#container-index.mostad-cloud div.login-container img.logo-login,
div#container-index.mostad div.login-container img.logo-login {
    max-width: 300px;
}

div#container-index.taxvid div.login-container img.logo-login {
    max-width: 240px;
}

form.login-form input::-webkit-input-placeholder {
    font-family: "Font Awesome 5 Pro", "Helvetica Neue","Helvetica", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    text-decoration: inherit;
    font-size: 1em;
}

form.login-form input::-moz-placeholder {
    font-family: "Font Awesome 5 Pro", "Helvetica Neue","Helvetica", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    text-decoration: inherit;
    font-size: 1em;
}

form.login-form input:-ms-input-placeholder {
    font-family: "Font Awesome 5 Pro", "Helvetica Neue","Helvetica", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    text-decoration: inherit;
    font-size: 1em;
}

form.login-form input:-moz-placeholder {
    font-family: "Font Awesome 5 Pro", "Helvetica Neue","Helvetica", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    text-decoration: inherit;
    font-size: 1em;
}

form.login-form input#password, form.login-form input#username {
    font-family: "Helvetica Neue","Helvetica", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    font-size: 1.2em;
}

form.login-form input#emailaddress {
    display: none;
}

.login-container a {
    color: var(--dark-blue);
}

.button {
    background-color: var(--orange);
}
.button:hover {
    background-color: var(--dark-orange);
}

.brand-notification {
    color: var(--dark-blue);
    font-size: 0.96rem;
}

.footer-content,
.footer-content a,
.footer-content a.cursor-pointer-hover {
    font-size: 0.9rem;
    background-color: var(--dark-blue);
    color: var(--white)
}

.footer-content a,
.footer-content a svg {
    transition: var(--base-transition);
}

.footer-content a:hover,
.footer-content a:hover svg {
    color: var(--orange);
    fill: var(--orange);
}

@media screen and (min-width: 40em) {
    div.login-container {
        margin-top: 8%;
        margin-bottom: 8%;
    }
}

@media screen and (min-width: 64em) {

    div#container-index.client-centric {
        background: url(../images/main-intro-hero-client-centric.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 100vh;
    }

    div#container-index.mostad-cloud, div#container-index.mostad {
        background: url(../images/main-intro-hero-mostad-cloud.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 100vh;
    }

    div#container-index.practice-panda, div#container-index.mostad {
        background-color: var(--lighter-blue);
    }

    div#container-index.taxvid {
        background: url(../images/main-intro-hero-taxvid.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 100vh;
    }
}