html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px;
}


.square-button {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #31458a;
    border: 5px outset transparent;
}

.square-button .content {
    position: absolute;
    color: white;
    display: flex;
    width: 100%;
    height: 100%;
    text-align: center;
    justify-content: center;
    flex-direction: column;
}

.square-button .content .icon {
    position: absolute;
    top: 3em;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

.square-button .content .icon.mt-4 {
    margin-top: 4em !important;
}

.square-button .content .text {
    margin-top: 1em;
}

.square-button:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.square-button:hover {
    border: 5px outset #c5050b;
}

.custom-logo-link {
    display: inline-block;
    padding-right: 1em;
    vertical-align: middle;
    width: auto;
}

.custom-logo-link img {
    display: inline-block;
    max-height: 80px;
    width: auto;
}

.custom-header {
    position: relative;
}

.site-header {
    position: relative;
    display: block;
    background: linear-gradient(25deg, #fff, rgba(0, 55, 100, 0.7));
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
    background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: visible;
}

.advice {
    color: #31458a;
}

.ttip {
    position: relative;
    display: inline-block;
}

.ttip .ttiptext {
    visibility: hidden;
    background-color: white;
    color: #000;
    text-align: center;
    border: 2px solid #31458a;
    border-radius: 6px;
    padding: 5px 0;
    width: 450px;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.ttiptext ul {
    margin-left: 50px;
    padding-bottom: 10px;
}

.ttiptext ul li {
    display: list-item;
    list-style-type: disc;
    text-align: left;
}

.ttiptext ul li li {
    list-style-type: circle;
}

.ttip:hover .ttiptext {
    visibility: visible;
}