.tooltip_button, .btn, input[type=submit] {
    width: 92px;
    height: 110px;
    border: none;
    outline: none;
    transition: 0.15s ease-in-out;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
}
.tooltip_button:hover, .tooltip_button:focus, .btn:hover, .btn:focus, input[type=submit]:hover, input[type=submit]:focus {
    background: #23a3d1;
}

.has-tooltip:hover + .tooltip,
.has-tooltip:focus + .tooltip,
.has-tooltip.hover + .tooltip {
    opacity: 1;
    // transform: translate(-50%, -100%) scale(1) rotate(0deg);
    pointer-events: inherit;
}

.tooltip {
    font-family: 'Fjalla One';
    display: inline-block;
    position: absolute;
    top: 0%;
    left: -80%;
    // transform: translate(-50%, -50%) scale(1) rotate(5deg);
    transform-origin: bottom right;
    padding: 4px 8px;
    border-radius: 16px;
    background: #9c1c20C0;
    text-align: center;
    color: white;
    transition: 0.15s ease-in-out;
    opacity: 0;
    width: 300px;
    max-width: 80vw;
    pointer-events: none;
    z-index: 5;
    border: 2px solid #000;
    box-shadow: 0px 4px 16px #000;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.tooltip.white {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #9c1c20;
    box-shadow: 0px 4px 16px black;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.tooltip.white:after {
    border-top: 5px solid rgba(255, 255, 255, 0.25);
}
.tooltip.white p {
    color: #000;
}

.tooltip.white p {
    color: #FFF;
}

.tooltip:hover {
    opacity: 1;
    // transform: translate(-50%, -100%) scale(1) rotate(0deg);
    pointer-events: inherit;
}

.tooltip img {
    max-width: 100%;
}

.tooltip ul {
    padding-left: 16px;
}

.tooltip.white li {
    color: black;
    font-size: 1.1rem;
    text-align: left;
}
.tooltip.white h1 {
    position: relative;
    top: 0;
    text-align: center;
    font-size: 2rem;
    display: inline-block;
    color: #9c1c20;
}

.tooltip li {
    color: #FFF;
    font-size: 1.1rem;
    text-align: left;
}
.tooltip h1 {
    position: relative;
    top: 0;
    text-align: center;
    font-size: 2rem;
    display: inline-block;
    color: #FFF;
}

.tooltip:after {
    content: "";
    display: block;
    margin: 0 auto;
    widtH: 0;
    height: 0;
    border: 5px solid transparent;
    border-top: 5px solid rgba(0, 0, 0, 0.75);
    position: absolute;
    bottom: 0;
    left: 50%;
    // transform: translate(-50%, 100%);
}

.field {
    position: relative;
    display: inline-block;
    text-align: center;
    left: calc(50% - 46px);
}

@media (max-width: 640px) {

    .tooltip.white:hover {
        position: fixed;
        left: 10%;
        top: 5%;
    }

    .tooltip:hover {
        position: fixed;
        left: 10%;
        top: 5%;
    }
}