.pl-6 {
    padding-left: 1.7em !important;
}

.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display:none;
}

body {
    font-family: 'PT Sans Narrow', sans-serif !important;
    font-size: 20px;
    letter-spacing: 0.05em;
}

a, a:hover, a:active, a:visited {
    color: black;
}
.btn.btn-link.big {
    font-size: 1.5rem;
}

.btn-link {
    color: black;
    text-decoration: none !important;
}

.btn-link:hover, .btn-link:active, .btn-link:visited {
    color: black;
    text-decoration: none;
}

.nav-link:hover {
    text-decoration: underline;
}

.btn-black, .btn-black:hover {
    background-color: black;
    color: white !important;
}

.btn-white, .btn-white:hover {
    border: 1px solid lightgray;
    background-color: white;
    color: black;
}


#title {
    z-index: 3;
    max-width: 265px;
}

.card {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 0;
    border-right: 0;
    border-radius: unset;
}

.card-header {
    background-color: white;
    padding-left: 0;
    padding-right: 0;
    border-bottom: 0;
}

.small div h1 {
    padding-top: 8px;
    padding-bottom: 15px;
    font-size: 24px;
}


/* Resetting from the mobile up!
//
// Dropping the root* element font size to 14px is something
// I do on almost all projects, a 16px font size on mobiles
// is not normally needed. --> Only my opinion of course!
//
// At mobile size I used the scale "Major Second" from
// type-cale.com to set out the heading sizes as well as the
// "Major Third" scale for the .display-* classes however my
// technique was to begin the scale from the h1's front size.
// To do this simply do the h1 font size * scale size. So in
// in this example it was 1.602 * 1.250 = 2.0025 I went with
// 2em to keep it simple.
//
//------------------------------------------------------------//*/
html,
body {
    font-size: 13px !important;
}
h1 {
    font-size: 26px;
}


/* SM */
@media (min-width: 572px) {
    html,
    body {
        font-size: 16px !important;
    }

    h1 {
        font-size: 32px;
    }

    #title {
        max-width: 320px;
    }

    .small div h1 {
        padding-top: 5px;
        padding-bottom: 15px;
        font-size: 32px;
    }
}

/* Medium devices (tablets, 48em and up)
//
// At this point you have overridden Bootstraps rem's and are
// into module based font sizes should you require it.
//
// I took a while over this change because I felt that there
// is no reason why I cant use a modified scale on another
// device size. So I did, the headings have now taken on
// "Perfect Fourth" and the dislpay-* has been put to the
// Bootstrap defaults.
//
//------------------------------------------------------------//*/

/* MD */
@media (min-width: 768px) {
    html,
    body {
        font-size: 20px !important;
    }

    h1 {
        font-size: 40px;
    }

    #title {
        max-width: 400px;
    }

    .small div h1 {
        padding-top: 15px;
        padding-bottom: 15px;
        font-size: 28px;
    }

    .nav-link {
        padding: 0.5em 0.4em;
        font-size: 18px;
    }

    h1 {
        font-size: 40px;
    }
    h2 {
        font-size: 1.953em;
    }
    h3 {
        font-size: 1.563em;
    }
    h4 {
        font-size: 1.25em;
    }
    .display-1 {
        font-size: 6em;
    }
    .display-2 {
        font-size: 5.5em;
    }
    .display-3 {
        font-size: 4.5em;
    }
    .display-4 {
        font-size: 3.5em;
    }
}

/* Large devices (desktops, 62em and up)*/
/* LG */
@media (min-width: 992px) {
    html,
    body {
        font-size: 20px !important;
    }
    h1 {
        font-size: 40px;
    }
    #title {
        max-width: 500px;
    }

    .nav-link {
        padding: 0.5em 0.4em;
        font-size: 20px;
    }
    .small div h1 {
        padding-top: 5px;
        padding-bottom: 15px;
        font-size: 40px;
    }
}

/* Extra large devices (large desktops, 75em and up)*/
@media (min-width: 1200px) {
    html,
    body {
        font-size: 20px !important;
    }
}

.borderless tr, .borderless td, .borderless th {
    border: none !important;
}

.pr-6,
.px-6 {
    padding-right: 8rem !important;
}