html body {
    font-family: Montserrat, arial, sans-serif
}

    html body header {
        animation: affatopbar .6s both cubic-bezier(.32, .17, .37, .92)
    }

@keyframes affatopbar {
    from {
        transform: translateY(-200px)
    }

    to {
        transform: translateY(0)
    }
}

html body #maincontent .title-log-in {
    font-family: Anton, Impact, sans-serif;
    font-size: 3rem;
    color: #004c97;
    padding-bottom: 1rem
}

@media (max-width:600px) {
    html body #maincontent .title-log-in {
        font-size: 2rem
    }
}

html body #maincontent .btn-login-signup{
    background-color: #004c97;
    border-color: #004c97;
}
    html body #maincontent .btn-login-signup:hover {
        border-color: #3ea9da
    }
    html body #maincontent .btn-login-signup:focus{
        background-color: #25306d;
        -webkit-box-shadow: 0 0 0 .2rem #3ea9da;
        -moz-box-shadow: 0 0 0 .2rem #3ea9da;
        box-shadow: 0 0 0 .1rem #3ea9da
    }

html body #maincontent .btn-other {
    background-color: #bfbfbf;
    border-color: #bfbfbf;
}
    html body #maincontent .btn-other:hover {
        border-color: #4d4d4d;
    }

    html body #maincontent .btn-other:focus {
        background-color: #4d4d4d;
        -webkit-box-shadow: 0 0 0 .2rem #4d4d4d;
        -moz-box-shadow: 0 0 0 .2rem #4d4d4d;
        box-shadow: 0 0 0 .1rem #4d4d4d;
    }


html body #maincontent .btn-login-signup,
html body #maincontent .btn-other {

    display: inline-block;
    width: 90%;
    padding: .7rem;
    text-align: center;
    color: #fff;
    text-decoration: none;
    font-size: 1.5rem;
    font-family: Montserrat, arial, sans-serif;
    border: solid .2rem;
    border-radius: 2rem;
    transition: .3s
}

    html body #maincontent .btn-login-signup:hover,
    html body #maincontent .btn-other:hover {
        opacity: .9;
    }

    html body #maincontent .btn-login-signup:focus,
    html body #maincontent .btn-other:focus {
        opacity: 1;
        outline: 0;
    }

@media (max-width:600px) {
    html body #maincontent .row-sm-icons .flex-flip-direction {
        flex-direction: row
    }

        html body #maincontent .row-sm-icons .flex-flip-direction h3 {
            padding: 0;
            margin: 0;
            font-size: 1.3rem
        }
}

html body #maincontent .row-sm-icons a {
    width: 5rem;
    height: 5rem;
    font-size: 0;
    color: transparent;
    line-height: 1;
    opacity: .8;
    text-decoration-color: #fff
}

@media (max-width:600px) {
    html body #maincontent .row-sm-icons a {
        width: 2rem;
        height: 2rem;
        margin: .5rem;
        margin: 2rem .5rem
    }
}

html body #maincontent .row-sm-icons a .sm-icon {
    margin: 0;
    top: 50%;
    position: relative;
    transform: translateY(-1.5rem);
    text-align: center;
}
    @media (max-width:600px) {
        html body #maincontent .row-sm-icons a .sm-icon {
            transform:translateY(-1rem);
        }
    }

    html body #maincontent .row-sm-icons a .sm-icon:hover {
        opacity: 1;
        text-decoration: none
    }

    html body #maincontent .row-sm-icons a .sm-icon:not(.sm-external):after {
        font-family: "Font Awesome 5 Brands";
        font-style: normal;
        font-weight: 900;
        text-decoration: inherit;
        position: absolute;
        font-size: 3rem;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
        text-align: center
    }

@media (max-width:600px) {
    html body #maincontent .row-sm-icons a .sm-icon:not(.sm-external):after {
        font-size: 2rem
    }
}

    html body #maincontent .row-sm-icons a .sm-facebook:after {
        content: "\f09a";
        color: #3b5998;
    }

    html body #maincontent .row-sm-icons a .sm-google:after {
        content: "\f1a0";
        color: #4285f4;
    } 

    html body #maincontent .row-sm-icons a .sm-linkedIn:after {
        content: "\f08c";
        color: #0e76a8;
    }




    html body #maincontent .row-sm-icons a .sm-external img {
        max-width: 3rem;
        max-height: 3rem;
    }
@media (max-width:600px) {
    html body #maincontent .row-sm-icons a .sm-external img {
        max-width: 2rem;
        max-height: 2rem;
    }

html body #maincontent .row-links {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    text-align: center
}

    html body #maincontent .row-links a {
        flex-basis: 100%;
    }

@media all and (-ms-high-contrast:none) and (max-width:2000px), all and (-ms-high-contrast:active) and (max-width:2000px) {
    html body #maincontent details {
        position: relative;
        left: -.5rem
    }

        html body #maincontent details h6:after,
        html body #maincontent details h6:before {
            border: none
        }

        html body #maincontent details h6 a {
            opacity: 1
        }
}