/* START HOME */
#home {
    padding-top: 90px;
}

.spinner-border {
    width: 15.5rem;
    height: 15.5rem;
    margin-top: 12rem;
    margin-bottom: 8rem;
    font-size: 3.5rem;
    color: rgba(255, 255, 255, 0.537);
}

#model {
    z-index: 7;
/*     margin-top: 1rem;
    margin-bottom: 2rem; */
/*     width: 100%;
    max-width: 1870px;
    height: 53vh; */
    cursor: pointer;
    --progress-bar-color: none;
    --progress-bar-height: 0px;
}

.btnh__text {
    font-family: 'Helvetica', sans-serif;
    text-align: center;
    color: rgba(255, 255, 255);
    font-weight: 600;
}

button {
    display: inline;
    padding: 0;
    border: 0;
    font: inherit;
    cursor: pointer;
    background: transparent;
    color: currentColor;
    user-select: none
}

.btnh {
    z-index: 9999;
    position: relative;
    padding: 1rem 3rem;
    color: #fff9;
    text-align: center;
    font-size: 1.5rem;
    width: 15rem;

    &::before,
    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        outline: 1px dashed #a3e2ff;
        width: 100%;
        height: 100%;
        transition: 250ms all ease
    }

    &::before {
        transform: translate(-1rem, -1rem)
    }

    &::after {
        background-color: #121d264d;
        outline-style: solid
    }

    &__inner::before,
    &__inner::after {
        content: "";
        border: 1px dashed #a3e2ff;
        border-left: 0;
        border-right: 0;
        width: 1rem;
        height: calc(100% + 2px);
        position: absolute;
        top: 5rem;
        transform: translateX(var(--translateX, 0)) skewY(var(--skewY, 45deg));
        transition: 250ms all
    }

    &__inner::before {
        left: -1rem
    }

    &__inner::after {
        left: calc(100% - 1rem)
    }

    &__text {
        z-index: 1;
        position: relative;
        display: inline-block;
        transition: 250ms all ease;
        font-size: 1.5rem
    }
}

.btnh:hover {
    &::before {
        transform: translate(1.5rem, -1rem)
    }

    &::after {
        background-color: #121d2680
    }

    .btnh__inner::before,
    .btnh__inner::after {
        --translateX: 10rem;
        --skewY: 90deg
    }

    .btnh__text {
        transform: uppercase;
        color: #fff;
        font-weight: 700;
        font-size: 1.7rem;
        transition: 250ms ease-in-out
    }
}

.btnh:not(:hover) .btnh__text {
    font-size: 1.5rem;
    transition: 250ms ease-in-out
}

.btnh:active {

    .btnh__inner::before,
    .btnh__inner::after {
        width: .5rem;
        transform: translate(1.5rem, calc(-0.25rem - 2px)) skewy(-55deg)
    }

    .btnh__text {
        transform: translate(1.5rem, -1rem);
        font-size: 1.1rem;
        transition: 250ms all ease-in-out
    }
}

.text-js {
    font-family: 'Helvetica', sans-serif;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-weight: bold;
    z-index: 9999;
    opacity: 0;
    white-space: pre-wrap
}

.cursor {
    align-items: justify;
    display: inline-block;
    width: 2px;
    height: 1em;
    background-color: #fff;
    vertical-align: bottom;
    animation: flash .75s steps(2, end) infinite
}

.highlight {
    color: #a3e2ffcc !important;
}

/* END HOME */

/* SMALLER SCREENS */
@media (max-width: 768px) {
    #home {
        padding-top: 60px;
    }

    #model {
/*         margin-top: 0rem;
        margin-bottom: 1rem; */
        width: 100%;
        max-width: 100%;
 /*        height: 50vh; */
    }
}

/* LARGER SCREENS */
@media (width>=2000px) {
    #home {
        padding-top: 7rem !important;
    }

    #model {
        margin-top: 6rem !important;
        margin-bottom: 8rem !important;
    }

    .spinner-border {
        margin-top: 34rem !important;
        margin-bottom: 20rem !important;
    }

    .btnh__text {
        font-family: 'Helvetica', sans-serif !important;
        text-align: center !important;
        color: rgba(255, 255, 255) !important;
        font-weight: 600 !important;
    }

    button {
        display: inline !important;
        padding: 0 !important;
        border: 0 !important;
        font: inherit !important;
        cursor: pointer !important;
        background: transparent !important;
        color: currentColor !important;
        user-select: none !important;
    }

    .btnh {
        z-index: 9999 !important;
        position: relative !important;
        padding: 1.5rem 4rem !important;
        color: #fff9 !important;
        text-align: center !important;
        font-size: 2rem !important;
        width: 20rem !important;

        &::before,
        &::after {
            content: "" !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            outline: 1px dashed #a3e2ff !important;
            width: 100% !important;
            height: 100% !important;
            transition: 250ms all ease !important;
        }

        &::before {
            transform: translate(-1rem, -1rem) !important;
        }

        &::after {
            background-color: #121d264d !important;
            outline-style: solid !important;
        }

        &__inner::before,
        &__inner::after {
            content: "" !important;
            border: 1px dashed #a3e2ff !important;
            border-left: 0 !important;
            border-right: 0 !important;
            width: 1rem !important;
            height: calc(100% + 2px) !important;
            position: absolute !important;
            top: 5rem !important;
            transform: translateX(var(--translateX, 0)) skewY(var(--skewY, 45deg)) !important;
            transition: 250ms all !important;
        }

        &__inner::before {
            left: -1rem !important;
        }

        &__inner::after {
            left: calc(100% - 1rem) !important;
        }

        &__text {
            z-index: 1 !important;
            position: relative !important;
            display: inline-block !important;
            transition: 250ms all ease !important;
            font-size: 2rem !important;
        }
    }

    .btnh:hover {
        &::before {
            transform: translate(1.5rem, -1rem) !important;
        }

        &::after {
            background-color: #121d2680 !important;
        }

        .btnh__inner::before,
        .btnh__inner::after {
            --translateX: 10rem !important;
            --skewY: 90deg !important;
        }

        .btnh__text {
            transform: uppercase !important;
            color: #fff !important;
            font-weight: 700 !important;
            font-size: 2.2rem !important;
            transition: 250ms ease-in-out !important;
        }
    }

    .btnh:not(:hover) .btnh__text {
        font-size: 2rem !important;
        transition: 250ms ease-in-out !important;
    }

    .btnh:active {

        .btnh__inner::before,
        .btnh__inner::after {
            width: .5rem !important;
            transform: translate(1.5rem, calc(-0.25rem - 2px)) skewy(-55deg) !important;
        }

        .btnh__text {
            transform: translate(1.5rem, -1rem) !important;
            font-size: 1.5rem !important;
            transition: 250ms all ease-in-out !important;
        }
    }
}