/* THB 2020-12-22 */

/* New homepage feature banner - full width image background with video links to promote the latest feature */

.homepage-feature-container {
  max-width: 100%;
  margin: 0 auto; 
}

.homepage-feature-container .homepage-feature-bg-image {
    position: relative; 
    display: flex;
    max-width: 100%;
    padding: 2.5rem 0;
    background-color: #005597; /* Used if the image is unavailable */
    height: auto;
    min-height: 50vh;
    opacity: 1.0;
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
}

.homepage-feature-container .homepage-feature-bg-image::before {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: rgba(25, 5, 250, 0.25);
}

@media (min-width: 767px) {
    .homepage-feature-container .homepage-feature-bg-image {
        padding: 7.0625rem 0;
    }
}

@media (min-width: 1023px) {
    .homepage-feature-container .homepage-feature-bg-image {
        padding: 8.625rem 0; 
    } 
}

.homepage-feature-container .homepage-feature-bg-image .container-fluid {
      max-width: 73.125rem; 
      color: #FFFFFF;
}

.homepage-feature-container .homepage-feature-bg-image a:hover {
    text-decoration: none;
}

.homepage-feature-container .homepage-feature-bg-image h2 {
    position: relative;
    font-size: 1.75rem;
    margin: 0 0 0.725rem 0;
    color: #FFFFFF;
}

.homepage-feature-container .homepage-feature-bg-image h3 {
    position: relative;
    font-size: 1.25rem;
    margin: 0 0 1.725rem 0;
    color: #FFFFFF;
    line-height: 1.5125rem;
}

.homepage-feature-container .homepage-feature-bg-image h3.desc {
    text-decoration: underline;
    text-align: center;
}

/* Just a parent container for the videos */
.homepage-feature-container .videos {
    margin: 20px auto;
    max-width: 700px;
    display: flex;
}

/* Individual video container */
.homepage-feature-container .video-wrap {
    position: relative;
    max-width: 700px;
    width: 100%;
    margin-bottom: 50px;
    height: 80px;
}

/* video poster frame or placeholder image */
.homepage-feature-container .video-wrap .placeholder {
    max-width: 700px;
    width: 100%;
    display: block;
}

/* SVG play button container */
.homepage-feature-container .video-wrap .play-btn {
    position: absolute;
    max-width: 700px;
    width: 110px;
    height: 60px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.homepage-feature-container .video-wrap .play-btn svg {
    transition: all .2s ease;
    fill: #fff;
}

.homepage-feature-container .video-wrap .play-btn:hover circle,
.homepage-feature-container .video-wrap .play-btn:focus circle {
    cursor: pointer;
    fill: #005597;
}

/* SVG cloud button container */
.homepage-feature-container .video-wrap .cloud-btn {
    position: absolute;
    max-width: 700px;
    width: 150px;
    height: 150px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.homepage-feature-container .video-wrap .cloud-btn svg {
    transition: all .2s ease;
    fill: #fff;
    height: 100%;
    width: 100%;
}

.homepage-feature-container .video-wrap .cloud-btn path {
    /*fill: white;
    stroke: lightskyblue;*/
    fill: none;
    stroke: white;
    stroke-width: 5;
    stroke-linejoin: round;
}

.homepage-feature-container .video-wrap .cloud-btn:hover path,
.homepage-feature-container .video-wrap .cloud-btn:focus path {
    cursor: pointer;
    fill: white;
    stroke: lightskyblue;

    /*fill: lightskyblue;
    stroke: #005597;*/

    /*fill: #FFFFFF;
    stroke: lightskyblue;*/
}