:root {
  --white: #fdfdfd;
  --black: #020204;
  --primary-color: #177072;
  --on-primary-color: #ffffff;
  --primary-highlight-color: #115354;
  --secondary-color: #F45F36;
  --on-secondary-color: #ffffff;
  --secondary-highlight-color: #F8AD98;
  --tertiary-color: #020204;
  --on-tertiary-color: #ffffff;
  --secondary-highlight-color: #7e7e81;
  --success-color: #177219;
  --on-success-color: #ffffff;
  --warning-color: #ECA500;
  --on-warning-color: #ffffff;
  --error-color: #721817;
  --on-error-color: #ffffff;
  --muted-color: #7e7e81;
  --on-muted-color: #ffffff;
  --line-color: #cccccc;  
}


html { font-size: 1rem; }
a { text-decoration: none; color: inherit; }
a:hover, a:active { text-decoration: none; opacity: 0.7; color: inherit; }

a.underline,
a.underline:visited {
    text-decoration: none;
    padding-bottom: 0.075rem;
    border-bottom: 2px solid #000000;
}

body {
    background-color: #f8f9fa;
    color: #212427;
    padding-top: 61px;
    padding-bottom: 41px;
    height: 100%;
    overflow-x: hidden;
}

.full-page {
    height: calc(100vh - 61px - 41px); /* Subtracts fixed top & bottom navbar height */
    background-size: cover;
    background-position: center;
}


.text-white { color: #f8f9fa }
.text-red { color: #9f0e0f }
.bg-red { color: #f8f9fa; background-color: #9f0e0f }

.text-primary {
    color: var(--primary-color) !important;
}
.text-on-primary {
    color: var(--on-primary-color) !important;
}

.bg-primary, .bg-info, .btn-primary, .btn-info {
    color: var(--on-primary-color) !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-highlight-color) !important;
}
.bg-primary a, .bg-info a, .btn-primary a, .btn-info a {
    color: color: var(--on-primary-color);
}
.bg-primary a:hover,
.bg-primary a:focus,
.bg-primary a:active {
    opacity: 0.65;
    color: color: var(--on-primary-color);
}

.bg-secondary, .btn-secondary {
    color: var(--on-secondary-color) !important;
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-highlight-color) !important;
}
.bg-secondary a {
    color: color: var(--on-secondary-color);
}
.bg-secondary a:hover,
.bg-secondary a:focus,
.bg-secondary a:active {
    opacity: 0.65;
    color: color: var(--on-secondary-color);
}

.bg-tertiary, .btn-tertiary {
    color: var(--on-tertiary-color) !important;
    background-color: var(--tertiary-color) !important;
    border-color: var(--tertiary-highlight-color) !important;
}
.bg-tertiary a {
    color: color: var(--on-tertiary-color);
}
.bg-tertiary a:hover,
.bg-tertiary a:focus,
.bg-tertiary a:active {
    opacity: 0.65;
    color: color: var(--on-tertiary-color);
}



.marketing-jumbotron {
    height: 100vh;
    background-size: cover;
    background-repeat:no-repeat;
    background-position: center center;
}
.marketing-jumbotron .hi-pro-logo {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 80%);
    border-radius: 10px;
    pointer-events: none; 
}

.carousel-caption {
    color: var(--primary-color);
    background: rgba(255, 255, 255, 0.7);
    padding: 10px;
    border-radius: 5px;
}
.carousel-indicators li {
    background-color: var(--primary-color) !important;
}
.carousel-indicators .active {
    background-color: var(--primary-highlight-color) !important;
}

.marketing-jumbotron .hi-cta {
    background: radial-gradient(ellipse 100% 200% at center, 
				rgba(255, 255, 255, 1.0) 20%, 
				rgba(255, 255, 255, 0) 100%);
    border-radius: 10px;
}