﻿#to {
    margin: 50px 0 0 0 !important;
    padding: 3px !important;
    width: 205px;
    height: 27px;
    position: absolute;
    letter-spacing: 0.15em;
    --offset: 10px;
    --border-size: 2px;
    display: block;
    appearance: none;
    border: 0;
    background: #004990 !important;
    color: white;
    text-transform: uppercase;
    outline: none;
    cursor: pointer;
    border-radius: 0;
    box-shadow: inset 0 0 0 var(--border-size) #EB1C2C;
    transition: background 0.8s ease;
}

    #to:hover {
        background: rgba(100, 0, 0, 0.03);
        transition: background 0.8s ease, width 0.2s ease-in-out, height 0.2s ease-in-out, transform 0.2s;
        margin: 40px 0 0 0 !important;
        padding: 3px !important;
        width: 205px;
        height: 37px;
    }

.to__horizontal,
.to__vertical {
    position: absolute;
    top: var(--horizontal-offset, 0);
    right: var(--vertical-offset, 0);
    bottom: var(--horizontal-offset, 0);
    left: var(--vertical-offset, 0);
    transition: transform 0.8s ease;
    will-change: transform;
}

    .to__horizontal::before,
    .to__vertical::before {
        content: "";
        position: absolute;
        border: inherit;
    }

.to__horizontal {
    --vertical-offset: calc(var(--offset) * -1);
    border-top: var(--border-size) solid #EB1C2C;
    border-bottom: var(--border-size) solid #EB1C2C;
}

    .to__horizontal::before {
        top: calc(var(--vertical-offset) - var(--border-size));
        bottom: calc(var(--vertical-offset) - var(--border-size));
        left: calc(var(--vertical-offset) * -1);
        right: calc(var(--vertical-offset) * -1);
    }

#to:hover .to__horizontal {
    transform: scaleX(0);
}

.to__vertical {
    --horizontal-offset: calc(var(--offset) * -1);
    border-left: var(--border-size) solid #EB1C2C;
    border-right: var(--border-size) solid #EB1C2C;
}

    .to__vertical::before {
        top: calc(var(--horizontal-offset) * -1);
        bottom: calc(var(--horizontal-offset) * -1);
        left: calc(var(--horizontal-offset) - var(--border-size));
        right: calc(var(--horizontal-offset) - var(--border-size));
    }

#to:hover .to__vertical {
    transform: scaleY(0);
}

@media (min-width: 1080px) {
    #turnos-online-mobile {
        display: none
    }
    #to-mobile{
        margin-top: 100px;
    }
}

#a-turnos-online-mobile {
    text-decoration: none;
    color: white;
    font-family: open_sansregular;
    font-weight: 100
}




#to-mobile {
    margin: 0;
    padding: 3px;
    width: 100%;
    height: 39px;
    position: relative;
    letter-spacing: 0.25em;
    --offset: 10px;
    --border-size: 2px;
    display: block;
    appearance: none;
    border: 0;
    background: #004990 !important;
    color: white;
    text-transform: uppercase;
    outline: none;
    cursor: pointer;
    border-radius: 0;
    box-shadow: inset 0 0 0 var(--border-size) #EB1C2C;
    transition: background 0.8s ease;
}