/* Header & Footer */

/* Apply sky banner to header, allow to scale */
.HeaderImage {
    /* Thermoflow company name and logo */
    display: flex;
    align-items:center;
    justify-content:left;    /*2024-03-14: Changed this from center to left*/
    /* Background image */
    background-image: url('../images/skybanner_2000.png');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100px;
    max-height: 100px;
    /* margin-top: 0px; */
    margin-top: -55px; /* Temporarily removed when header was partially disappearing 6/25/2024 */
}

/* Quick fix for issue of header partially disappearing 6/25/2024 */
.HeaderImageIndex {
    /* Thermoflow company name and logo */
    display: flex;
    align-items:center;
    justify-content:left;    /*2024-03-14: Changed this from center to left*/
    /* Background image */
    background-image: url('../images/skybanner_2000.png');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100px;
    max-height: 100px;
    margin-top: -48px;
}

/* Center TFLOW logo in sky banner header*/
.center-block {
    display: block;
    min-width: 200px;
}

/* Apply sky banner to footer, allow to scale */
.FooterImage {
    /* Contents */
    display:flex;
    align-items:center;
    justify-content:center;
    /* Background image */
    background-image: url('../images/skyfooter_2000.png');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 80px;
    max-height: 500px;
    margin-bottom:-100px;
}

.footer p {  /* Selects text inside a <p> tag that is inside a .footer <div> */
    margin-bottom: 0; /* removes default <p> tag margin from the bottom */
 }

 footer {
    margin: 0px;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #0075CD;
    min-height: auto;
}

/* Navigation bar */

/* Spacing of items in navbar */
.navbar-nav > li {
    padding-left:6px;
    padding-right: 6px;
}

/* Special nav item class 6/26/2024 for weird bug on index page */
.nav-item-index {
    padding-bottom: 0px;
    margin-bottom: -18px;
}

/* Regular nav item class that works on non-index pages */
/* .nav-item {
    padding-bottom: 0px;
    margin-bottom: 0px;
} */

.navbar-nav > li a {
    color: #ebebeb!important;
}

/* Navbar dropdown menu color */
.navbar-nav > li > .dropdown-menu {
    background-color: #26486D;
}

/* Dropdown menu font color */ 
.navbar-nav > li > .dropdown-menu a {   
     color: #ebebeb; 
}

/* Change font in navbar */
.navbar-nav li {
    a {
      color: #ebebeb;
      font-family: "Rubik", Rubik-Light, Arial, sans-serif;
      font-size: 16px;
    }
  }

/* Dropdown menu color when you hover over item */ 
.navbar-nav > li > .dropdown-menu a:hover { 
    background-color: #0075CD;
}

/* Override navbar toggler so it appears */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(157, 166, 168, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

html {
    font-size: 100%;
}

/* // <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 200 to 800 */
h1 {
    font-family: "Karla", sans-serif;
    color:  #26486D;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    font-size: 40px; /* Hero title*/
}

h2, h3, h4, h5, h6 {
    font-family: "Rubik", Rubik-Medium, Arial, sans-serif;
    margin: 0;
    color:#26486D;
}

h2 {
    font-size: 32px; /* Big title */
}

h3 {
    font-size: 26px; /* Medium title*/
}

h4 {
    font-size: 22px; /* Subtitle */
}

h5 {
    font-size: 20px; /* Highlight */
    line-height: 80px;
}

p {
    font-family: "Rubik", Rubik-Light, Arial, sans-serif;
    margin: 0;
    font-size: 16px;
    /* font-size: 2vw; */
}

p.text-condensed {
    line-height: 16px;
}

.program-name {
    color: black;
    background-color: #FFFFFF;
    opacity: 90%;
    line-height : 24px;
    font-size: 12px;
    padding: 10px;
    border-radius: 10px;
    border: 2px solid #ccc;
    box-shadow: 0 0 0 #FFFFFF; /* box shadow is emulating padding liek a charme */

}

.program-name-button {
    color: black;
    background-color: #FFFFFF;
    opacity: 90%;
    line-height : 24px;
    font-size: 12px;
    padding: 10px;
    border-radius: 10px;
    border: 2px solid #ccc;
    box-shadow: 0 0 0 #FFFFFF; /* box shadow is emulating padding liek a charme */
}

blockquote {
    padding-left: 40px;
    padding-right: 40px;
    font-size: 21px;
    /* font-size: 3vw; */
    /* font-style: italic; */
}

.container-bg-light, .container-bg-med, .container-bg-dark, .container-bg-blockquote {
    margin: 0px;
    padding-top: 40px;
    padding-bottom: 40px;
}

.container-bg-light {
    background-image: url('../images/whitebackground.jpg');
    background-size: cover;
    background-position: center;
}

.container-bg-med {
    background-color: #EBEBEB;
}

.container-bg-dark {
    background: #26486D;
}

.container-bg-blockquote {
    background-image: url('/images/blockquote-background-inverted.png');
    /* background: url(/textures/oriental-tiles-gray.png) repeat 0 0; */
    background-color: rgba(255,255,255,0.5);
    background-blend-mode: darken;
}

/* Front-page image carousel */
#homeCarousel {
    margin-bottom: 0px;    
    margin-left: -30px;
    margin-right: -30px;
    margin-top: 0px;
}

.carousel-inner img {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover !important;
    display: block;
    margin: 0px;
}

/* Card elements */

.card, .card-brochure, .card-pastevents, .card-blockquote, .card-blockquote-inverted {
    margin-left: 20px;
    margin-right: 20px;
}

.card {
    background-color: #26486D!important;   
}

.card-brochure {
    margin-bottom: 60px;
    background-color: #26486D!important;
}

.card-blockquote {
    background-color: #EBEBEB!important;
    /* rounded edges */
    /* border-radius: 1%;
    overflow: hidden; */  
}

.card-blockquote-inverted {
    background-color: #FFFFFF!important;
    /* rounded edges */
    /* border-radius: 1%;
    overflow: hidden; */
}

/* Buttons for expert systems or general purpose program on products page */
.card-button {
    background-color: #26486D!important;
    vertical-align: auto;
    border: 2px solid #FFA900!important;
    box-shadow: none;
}

/* Ensure that cards on front page are the same height as page is resized  */
.card-body {
    display: flex;
    flex-direction: column;
  }
  
  .btn {
    margin-top: auto;
  }

/* Buttons used on front page cards */
.btn-primary {
    color:#FFFFFF!important;
    box-shadow: none!important;
}

.btn-warning {
    color:#0000ff!important;
    box-shadow: none!important;
}

/* Button used on brochure page */
.btn-light {
    box-shadow: none!important;
}

/* Company bio on front page */

/* Make biography-image disappear when the screen is small enough */
@media screen and (max-width: 1210px) {
    .biography-image {display:none;}
}

.biography-image {
    background-position: center center;
    background-size: cover;
    height: 250px;
    margin-left: 150px;
    margin-right: 50px;
}

/* Table elements */

/* All tables have no margine outside them */
.table {
    margin: 0px;
}

/* Padding for default table */
.table-standard>tbody>tr>td, .table-standard>tbody>tr>th, .table-standard>tfoot>tr>td, .table-standard>tfoot>tr>th, .table-standard>thead>tr>td, .table-standard>thead>tr>th {
    padding-top: 15px;
    padding-bottom: 5px;
}

/* Special padding for announcement list to make vertical spacing less */
.table-announcements>tbody>tr>th, .table-announcements>tbody>tr>td {
    padding-top: 0px;
    padding-bottom: 0px;  
    
}

/* Table of  contact info */
.table-contact>tbody>tr>td, .table-contact>tbody>tr>th, .table-contact>tfoot>tr>td, .table-contact>tfoot>tr>th, .table-contact>thead>tr>td, .table-contact>thead>tr>th {
    padding-top: 5px;
    padding-bottom: 5px;
}