/* WISESTEIN CSS 2024 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&family=Syne:wght@400..800&display=swap');

body {
    font-family:'Montserrat',sans-serif;
    background-color:#12161A;
    color:#FFFFFF;
    overflow-x:hidden;
}

html {
    overflow-x:hidden;
}

#wrapper::before {
    content:'';
    background:url(../img/wisestein-symbol-white.svg);
    opacity:0.055;
    background-size:contain;
    background-position:left top;
    background-repeat:no-repeat;
    position:absolute;
    left:0vw;
    top:-22vw;
    bottom:0;
    right:0;
    transform:rotate(-95deg);
    width:40vw;
    pointer-events:none;
}

h1,h2 {
    font-family:'Syne',sans-serif;
    font-weight:900;
    font-size:25px;
    text-align:center;
}

/*.wisestein-logo {
    opacity:0.075;
    width:105vw;
    left:-2.5vw;
    top:-5px;
    position:absolute;
}*/

.wisestein-logo {
    width:350px;
    max-width:80%;
    margin:0 auto 20px auto;
}

input[type="submit"] {
    font-family:'Syne',sans-serif;
    font-weight:700;
    background-color:#FFF;
    color:#12161A;
    height:auto;
}

input[type="text"],
input[type="password"] {
    padding:12px;
    height:auto;
}

input[type="submit"].logout-btn {
    background:transparent;
    border:solid 2px #FFF;
    color:#FFF;
    height:auto;
    transition:all 250ms ease-in-out;
    font-size:10px;
}

input[type="submit"].logout-btn:hover {
    background:#FFF;
    color:#12161A;
}

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

.login-column {
    background-color:#485766;
    border-radius:6px;
    width:400px;
    max-width:100%;
    padding:30px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:40px;;
}

.login-column form {
    margin-bottom:0;
}

.login-column-wrapper {
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}

.login-column-wrapper .wisestein-logo {
    margin-bottom:40px;
}

.header .row {
    padding:30px 0;
    display:flex;
    justify-content:flex-end;
}

.header-logo {
    margin-right:auto;
}

.logged-in-as {
    display:inline-block;
    margin-right:20px;
    font-size:13px;
}

.header-logo img {
    width:250px;
}

.product-box {
    background:#485766;
    padding:20px;
    border-radius:6px;
    padding-top:60px;
    padding-bottom:60px;
    text-align:center;
    transition:all 250ms ease-in-out;
}

.product-row > div {
    margin-bottom:30px;
}

.product-icon {
    width:30px;
    margin-bottom:20px;
    margin-left:auto;
    margin-right:auto;
}

input {
    color: #000;
}

.product-text {
    font-size:14px;
}

.product-box:hover {
    background:#313B45;
    cursor:pointer;
}

.container-fluid {
    max-width:90%;
    width:1380px;
}

.product-headline {
    font-family:'Syne',sans-serif;
    font-weight:900;
    color:#FFF;
    font-size:22px;
    position:relative;
    display:inline-block;
    margin-bottom:25px;
}

.product-headline span {
    position:absolute;
    color:#7AFF33;
    font-size:0.9em;
    right:0;
    bottom:-0.9em;
    font-weight:700;
}

.footer {
    font-size:13px;
    margin-top:80px;
}

.footer.absolute-footer {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    margin-top:0;
    font-size:13px;
}

.footer b {
    font-weight:700;
    color:#FFF;
    font-size:14px;
    display:block;
    padding-bottom:10px;
    line-height:1.2;
}

/* MEDIA QUERIES */

@media (max-width: 1366px) {
	.footer.absolute-footer {
        margin-top:20px;
        position:relative;
        left:auto;
        right:auto;
        top:auto;
        bottom:0;
    }
    .login-column-wrapper {
        min-height:auto;
        margin-top:60px;
    }
    .login-column {
        max-width:95%;
        width:auto;
    }
    .footer b {
        margin-top:20px;
    }
}

@media (max-width: 992px) {
    #wrapper::before {
        display:none;
    }
}

@media (max-width: 768px) {
    .header .row {
        display:block;
        text-align:center;
    }
    .logged-in-as {
        display:block;
        margin-bottom:15px;
    }
}