﻿* { box-sizing: border-box }

body, html {
    font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
    color: #000;
    margin: 0
}

.animated-background {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: #ddd;
    overflow: hidden;
    z-index: -1
}

.animated-background .load-anim-wrapper {
    position: absolute;
    width: 100vw;
    height: 100vh;
    transform: rotate(180deg)
}

.animated-background .load-anim-wrapper .mbnd-loader {
    width: 100vw;
    height: 100vh
}

.animated-background .load-anim-wrapper .mbnd-loader #bars line {
    fill: none;
    stroke: #d3d3d3;
    stroke-width: 8%
}

.animated-background .load-anim-wrapper:first-of-type { top: -50vh }

.animated-background .load-anim-wrapper:nth-of-type(2) { top: 50vh }

a {
    text-decoration: none;
    color: #999
}

.main {
    height: 100vh;
    align-items: center;
    justify-content: center
}

.main .container {
    opacity: .95;
    padding: 20px;
    box-shadow: 3px 4px 10px hsla(0, 0%, 45.1%, .5);
    border-radius: 10px;
    background: #fff;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    width: 90vw
}

@media (min-width: 400px) {
    .main .container { width: 350px }
}

.main .container .mb-icon {
    background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjggMTI4Ij48Y2lyY2xlIGN4PSI2NCIgY3k9IjY0IiByPSI2NCIgc3R5bGU9ImZpbGw6IzQ5NjRhMiIvPjxwYXRoIGQ9Ik04OS4zLDk3Ljc5VjU0LjE0bC0yMiwzNi42NWgtNmwtMjItMzYuMDVWOTcuNzloLTEydi02NkgzOC4xTDY0LjUsNzUuNzQsOTAuNCwzMS43OWgxMC45djY2WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTAuMyAwLjIxKSIgc3R5bGU9ImZpbGw6I2ZmZiIvPjwvc3ZnPg==");
    width: 100px;
    height: 100px;
    margin: 20px auto
}

.main .container .logo {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 536 76'%3E%3Cdefs%3E%3Cstyle%3E.a{fill:%23ccc}%3C/style%3E%3C/defs%3E%3Cpath class='a' d='M2.5 63.9V12.14a.83.83 0 0 1 .14-.57.7.7 0 0 1 .5-.14H5a1.25 1.25 0 0 1 .61.06.93.93 0 0 1 .32.47L25.08 60q.21.72.5.72t.65-.79l19.43-48a.79.79 0 0 1 .79-.5h2a.71.71 0 0 1 .5.14.83.83 0 0 1 .14.57V63.9c0 .48-.21.72-.65.72h-1.86q-.72 0-.72-.65v-44.3c0-.14 0-.2-.07-.18a.39.39 0 0 0-.14.18L27.8 63.82a1.18 1.18 0 0 1-.39.61 1.29 1.29 0 0 1-.75.18h-1.94q-1.08 0-1.36-.72L5.87 20a.41.41 0 0 0-.14-.18s-.07 0-.07.18v44c0 .43-.24.65-.72.65h-1.8c-.43 0-.64-.24-.64-.72M98.12 44.67c.48 0 .65-.24.5-.72l-10.25-28c-.14-.48-.31-.72-.5-.72s-.34.26-.57.79L76.91 44c-.1.24-.12.39-.07.47s.19.11.43.11zM66.5 64l19-51.76a1.17 1.17 0 0 1 .39-.61 1.3 1.3 0 0 1 .75-.18H89q1.08 0 1.29.72l18.78 51.75.07.21c0 .33-.21.5-.64.5h-1.7a.89.89 0 0 1-.93-.57l-5.81-16a.74.74 0 0 0-.72-.5H76.26a.74.74 0 0 0-.72.5l-6 16.08q-.07.5-.79.5H67q-.72 0-.5-.65M150.63 12.67a20.08 20.08 0 0 1 6.74 5.2 13 13 0 0 1 3.13 6.88q.07.5-.36.5l-2.58.29h-.14c-.19 0-.31-.17-.36-.5a14.36 14.36 0 0 0-5.2-8.21 14.83 14.83 0 0 0-9.43-3.12q-8.75 0-13.37 6.27t-4.62 18.24q0 11.69 4.7 17.88T143 62.3a15.2 15.2 0 0 0 9.25-2.69 17.9 17.9 0 0 0 5.81-8.35.36.36 0 0 1 .43-.14l2.44.72a.44.44 0 0 1 .14.5 17.74 17.74 0 0 1-6.85 9.46 19.46 19.46 0 0 1-11.5 3.51q-10.39 0-16.06-7.06t-5.66-20a39.39 39.39 0 0 1 2.49-14.83 20.21 20.21 0 0 1 7.32-9.42 19.92 19.92 0 0 1 11.47-3.26 18.87 18.87 0 0 1 8.35 2M207 33.63q3.8-2.65 3.8-8.53 0-5.45-3.23-8.14t-9.75-2.69h-15c-.53 0-.79.19-.79.57v20.79c0 .43.17.64.5.64h12.83q7.81 0 11.61-2.65m6.59 30.32a.62.62 0 0 1-.59.65h-2.05a.7.7 0 0 1-.5-.14 2.7 2.7 0 0 1-.36-.5l-10.15-24.09a1 1 0 0 0-.47-.54 2.27 2.27 0 0 0-1-.18h-15.52q-.86 0-.86.79V63.8a1 1 0 0 1-.14.61.71.71 0 0 1-.57.18h-1.85q-.72 0-.72-.65V12.12a.83.83 0 0 1 .14-.57.7.7 0 0 1 .5-.14h18.48q7.81 0 12.08 3.37t4.26 9.82q0 6-3.19 9.32a16 16 0 0 1-7.71 4.44q-.43.07-.29.5l10.45 24.73a.81.81 0 0 1 .07.36M329.5 61.72q8.67 0 12.76-2.55t4.09-8.28q0-6.09-4.3-8.92t-11.55-2.82h-12.08a1 1 0 0 0-.61.14.61.61 0 0 0-.18.5V61q0 .72.5.72zm1-25.45a20.37 20.37 0 0 0 10.32-2.44q4.23-2.43 4.23-8.39 0-5.66-4.12-8.42t-11.54-2.75h-11.11c-.43 0-.64.19-.64.57v20.72q0 .72.5.72zM314.3 64V12.12a.83.83 0 0 1 .14-.57.7.7 0 0 1 .5-.14h14.7q9 0 13.91 3.55a11.73 11.73 0 0 1 4.95 10.14q0 9.25-9.39 12.11a.33.33 0 0 0 0 .65A13.29 13.29 0 0 1 347 42a12.36 12.36 0 0 1 2.86 8.45q0 7-5.2 10.57t-14.73 3.55h-15a.51.51 0 0 1-.57-.57M407.78 38.15q0-12.18-4.59-18.31t-13.48-6.13q-9 0-13.58 6.13t-4.63 18.31q0 12 4.66 18.1t13.62 6.06q18 0 18-24.16m-34 20.21q-5.66-7-5.66-20.07 0-13.33 5.73-20.46t15.91-7.13q10.18 0 15.84 7.1t5.66 20.36q0 13.12-5.66 20.14t-15.91 7q-10.25 0-15.91-7M467.5 11.41a.7.7 0 0 1 .5.14.83.83 0 0 1 .14.57v51.76q0 .72-.65.72h-1.43a1.23 1.23 0 0 1-1-.43l-30.69-45.23c-.24-.33-.44-.49-.61-.47s-.25.18-.25.47v45c0 .43-.24.65-.72.65H431q-.65 0-.65-.72V12.13a.82.82 0 0 1 .14-.57.7.7 0 0 1 .5-.14h1.29a1.5 1.5 0 0 1 .65.11 1.29 1.29 0 0 1 .43.39L464 57.08a.77.77 0 0 0 .57.36.41.41 0 0 0 .29-.14.48.48 0 0 0 .14-.36V12.06c0-.43.19-.64.57-.64zM493.29 14.63a1.59 1.59 0 0 0-.14.72v45.74q0 .64.79.64h3.56q9.39 0 15-2.33a15.24 15.24 0 0 0 8.1-7.53q2.54-5.2 2.54-13.94 0-9.1-2.58-14.16a14.5 14.5 0 0 0-8-7.13q-5.38-2.08-14.41-2.29h-4.52c-.14 0-.26.1-.36.29m5.59-3.16q9.82.07 16 2.9a18.14 18.14 0 0 1 9 8.53q2.83 5.7 2.83 14.73 0 14-7 20.46t-21.72 6.49h-7.47q-.65 0-.65-.72V12q0-.57.65-.57zM262 69c-16.7 0-30.26-14-30.26-31.2S245.28 6.56 262 6.56s30.26 14 30.26 31.2S278.7 69 262 69m0-65.49c-18.49 0-33.42 15.46-33.42 34.53s15 34.53 33.43 34.53 33.42-15.5 33.42-34.57S280.5 3.47 262 3.47'/%3E%3C/svg%3E");
    width: 352px;
    height: 50px;
    background-repeat: no-repeat
}

.main .container form { width: 100% }

.main .container fieldset {
    border: none;
    padding: 0
}

.main .container label {
    font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
    margin: 10px 0 5px;
    display: block
}

.main .container .form-control {
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.main .container .form-control::placeholder { font-style: italic }

.btn {
    margin: 20px 10px 0 0;
    cursor: pointer;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    background-color: #eee
}

.btn:hover { background-color: #ddd }

.flex-column {
    display: flex;
    flex-direction: column
}

.flex-row {
    display: flex;
    flex-direction: row
}

.logged-out {
    margin: 20px 0;
    width: 100%
}

.return-to-mb { width: 100% }

iframe {
    opacity: 0;
    display: none
}

@keyframes slideFromLeft {
    0% {
        transform: translateX(-100px);
        color: transparent;
        filter: blur(4px)
    }

    to {
        transform: translateX(0);
        color: #000;
        filter: blur(0)
    }
}

@keyframes slideFromRight {
    0% {
        transform: translateX(100px);
        color: transparent;
        filter: blur(4px)
    }

    to {
        transform: translateX(0);
        color: #000;
        filter: blur(0)
    }
}

@keyframes animateLinkColor {
    0% { color: hsla(0, 0%, 60%, 0) }

    to { color: #999 }
}
