:root {
    --main-dark: black;
    --main-light: white;
    --light-grey: #666666;
    --main-orange: #ff4200;
    --main-font: 'YWFTClarify-Regular', sans-serif;
    --main-bold-font: 'YWFTClarify-Bold', sans-serif;
    --body-font: 'Georgia', serif;
    --body-font-size: 1em;
    --light-orange:#f08e01;
    --light-beige: #f5f2ec;
    --button-turquoise: #03CCD9;
}

@font-face {
    font-family: 'YWFTClarify-Regular';
    src: url('../fonts/ywft-clarify-regular.woff2') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'YWFTClarify-Bold';
    src: url('../fonts/ywft-clarify-bold.woff2') format('woff');
    font-weight: normal;
    font-style: normal;
}

body{
    border-style: solid;
    border-width: 10px;
    border-color: var(--main-orange);
    font-family: var(--body-font);
}


.body-padding {
    padding: 0em 2em 2em 2em;
}


@media (max-width: 768px) {
    .body-padding {
        padding: 0px;
    }
}

.content {
    padding-top: 0em;
}

.main-body {
    background-color: var(--main-light);
    color: var(--main-dark);
    padding-top: 2em;
}

.main-aggregate {
    background-color: var(--main-dark);
}

.main-agg-p {
    color: var(--main-light);
}

.h-orange{
        color: var(--main-orange)
    }

.main-h {
    color: var(--main-dark)
}

.main-title {
    font-size: 4em;
    color: white;
}

.breadcrumb {
    padding:.25rem;
    margin-bottom: 0px;
    text-decoration: underline;
}

h1, h2, h3, h4 {
    font-family: var(--main-bold-font);
}

h1 {
    font-size: 2em
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.1em;
    font-family: var(--main-bold-font);
}

.vueapp {
    background-color: white;
}

/*HEADER */


.navbar-brand img {
 width: 200px; /* Or your desired width */
  height: auto; /* Maintain aspect ratio */
  display: block;
}

.footer-img {
    width: 20em; /* Or your desired width */
    height: auto; /* Maintain aspect ratio */
    display: block;
}

.fixed-top-line {
    margin-top: 0px;
    margin-left: 0px;
    margin-tight: 0px;
    border-top: 5px solid var(--main-orange);
}

.nav li {
    list-style-type: none;
    display: flex;
    position: relative;
}

.nav-link {
    font-family: var(--main-font);
    font-size: 1em;
    color: var(--main-light);
}

.footer-nav-link {
    margin-left: -1em;
    padding-left: 0px;
    font-size: 1.1em;
    font-family: var(--main-bold-font);
}

.active-breadcrumb{
    color: var(--light-orange);
    text-decoration: none;
}


.nav-link.active {
    color: var(--main-orange) !important;
}


.header-line {
    border-top:.5px solid var(--light-grey);
    width: 100%
}
/*END HEADER */

/*CALL OUTS */

.callout-body {
    background-color: var(--main-orange);
}

.calloutH {
    color: var(--main-dark);
    font-family: var(--main-bold-font);
    font-size: 1.1em;

}

.card.callout-card {
    background-color: var(--light-beige);
}

.callout-arrow {
    min-width: 30px;
    max-width: 50px;
}

.callout-button {
    color: white !important;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none !important;
    display: inline-block;
    background-color: var(--button-turquoise);
    align-self: flex-start;
    border-radius: 0;
    border: 0;
    font-family: "YWFTClarify-Regular";
    margin-top: 1rem;

}
/*END CALL OUTS */

/*DATA*/
 .data-icon {
     width:25%;
     max-width: 40px;
     margin-right: 5px;
 }



/*FOOTER */

.footer-logo {
    width: 20em;
}

.tnc {
    margin-top: 2rem;
    border-top: 1px solid var(--main-light);
    border-bottom: 1px solid var(--main-light);
    padding: 1rem;
}


.tnc_logo {
 width: 35%;
 object-fit: contain;
 border-right: 1px solid var(--main-light);
 padding-right: 1rem;
 margin-right: 1rem;
}

.tnc_logo {
 width: 35%;
 object-fit: contain;
 border-right: 1px solid white;
 padding-right: 1rem;
 margin-right: 1rem;
 float:left;
}

.tnc-text {
    font-family:  var(--main-font);
    color: var(--light-grey);
    display: flex;
    justify-content: center;
    align-items: center;
}

.fixed-bottom-line {
    border-top: 10px solid var(--main-orange);
}