.card-img {
    width: 100% !important;
    height: 175px !important;
    object-fit: cover;
}

.x-content a,
.x-content a:hover {
    color: var(--thex-links-color);
    font-weight: bold;
}

.x-list-black a{
    color:black;
}

.container-fluid {
    background-image: url("../img/xtirpa-academy-confined-space-access-products-rescue-7283-scaled.jpg");
    background-size: cover;
    height: 100vh;
}
.x-content > h2 {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

a.x-link {
    color: #fdc134;
    font-weight: 700;
    text-transform: uppercase;
}

.btn-ms {
    background-image: url('../img/microsoft.png');
    background-size: cover;
    color: white;
    width: 135px;
    height: 61px;
    text-shadow: 2px 2px 2px black;
    border: 2px solid #fdc134;
}

.btn-ms:hover, .btn-ms:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: #d2e3fc;
    outline: none
}

.df-share-button.ti-copy:before {
    content: url('https://api.iconify.design/ph:copy.svg?color=%23777&width=20&height=20');
}

.df-share-button.df-icon-close {
    position: absolute;
    top: 0px;
    right: 0px;
}

/* Style for positioning toast */
.toast {
    position: absolute;
    top: 30px;
    right: 30px;
}


@font-face {
    font-family: 'Roboto Condensed';
    font-style: italic;
    font-weight: 300;
    src: url(https://fonts.gstatic.com/s/robotocondensed/v25/ieVg2ZhZI2eCN5jzbjEETS9weq8-19eDpCEobdNZUSdy4Q.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.main-content {
    border-radius: 5px;
}

.form-control {
    border: 2px solid #eee;
}

    .form-control:focus {
        box-shadow: none;
        border: 2px solid blue;
    }

.card {
    padding: 5px;
    display: flex;
    justify-content: center;
    border: 0px;
}


.card p {
    font-size: 13px;
}

.xlabel-yellow {
    background: #fdc134;
    color: #FFFFFF;
}

.x-content .list-group-item {
    border: none;
    padding-top: 0.5rem;
    padding-right: 0px;
    padding-bottom: 0.5rem;
    padding-left: 0px;
}

.xst img {
    height: 100%; /* Bootstrap handles width already */
    object-fit: cover;
}

.xbutton-search {
    background: #faa92f;
    color: #FFFFFF;
}

.xbutton {
    background: #fdc134;
    border-color: #fdc134;
}

.xbutton:hover {
    background: fdc134;
    border-color: #faa92f;
}

.xh2 {
    font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
    font-size: 40px;
    font-weight: 100;
    color: #8b8d94;
    padding: 0;
    margin: 0;
}

.xh3 {
    font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
    font-size: 26px;
    font-weight: 900;
    color: #8b8d94;
    padding: 0;
    margin: 0;
}

h3 {
    color: var(--thex-h3-color);
    font: var(--thex-h3-font);
    text-transform: var(--thex-h3-text-transform);
    letter-spacing: var(--thex-h3-letter-spacing);
    word-spacing: var(--thex-h3-word-spacing);
    text-decoration: var(--thex-h3-text-decoration);
}



.xlogo {
    width: 20%;
    max-width: 20%;
    height: auto;
    aspect-ratio: auto 1571 / 544;
}

:root {
    --thex-h1-spacing: var(--thex-p-spacing,10px);
    --thex-h2-spacing: var(--thex-p-spacing,10px);
    --thex-h3-spacing: var(--thex-p-spacing,10px);
    --thex-h4-spacing: var(--thex-p-spacing,10px);
    --thex-h5-spacing: var(--thex-p-spacing,10px);
    --thex-h6-spacing: var(--thex-p-spacing,10px);
    --thex-form-border: solid;
    --thex-btn-shadow: 0px 0px 10px 0px rgba(0,0,0,0);
    --thex-btn-shadow-hover: 0px 0px 10px 0px rgba(0,0,0,0);
}

#thex-body {
    --thex-h1-color: var( --thex-title-color);
    --thex-h2-color: var( --thex-title-color);
    --thex-h3-color: var( --thex-title-color);
    --thex-h4-color: var( --thex-title-color);
    --thex-h5-color: var( --thex-title-color);
    --thex-h6-color: var( --thex-title-color);
    --thex-btn-s-font: var( --thex-btn-s-font-style,normal) normal var(--thex-btn-s-font-weight,normal) var(--thex-btn-s-font-size) / var(--thex-btn-s-line-height) var(--thex-btn-s-font-family);
    --thex-btn-m-font: var( --thex-btn-m-font-style,normal) normal var(--thex-btn-m-font-weight,normal) var(--thex-btn-m-font-size) / var(--thex-btn-m-line-height) var(--thex-btn-m-font-family);
    --thex-btn-l-font: var( --thex-btn-l-font-style,normal) normal var(--thex-btn-l-font-weight,normal) var(--thex-btn-l-font-size) / var(--thex-btn-l-line-height) var(--thex-btn-l-font-family);
    --thex-btn-lg-font: var( --thex-btn-lg-font-style,normal) normal var(--thex-btn-lg-font-weight,normal) var(--thex-btn-lg-font-size) / var(--thex-btn-lg-line-height) var(--thex-btn-lg-font-family);
    --thex-btn-xl-font: var( --thex-btn-xl-font-style,normal) normal var(--thex-btn-xl-font-weight,normal) var(--thex-btn-xl-font-size) / var(--thex-btn-xl-line-height) var(--thex-btn-xl-font-family);
    --thex-woo-title-font: var( --thex-woo-title-font-style,normal) normal var(--thex-woo-title-font-weight,normal) var(--thex-woo-title-font-size) / var(--thex-woo-title-line-height) var(--thex-woo-title-font-family);
    --thex-woo-content-font: var( --thex-woo-content-font-style,normal) normal var(--thex-woo-content-font-weight,normal) var(--thex-woo-content-font-size) / var(--thex-woo-content-line-height) var(--thex-woo-content-font-family);
    --thex-base-font: var( --thex-base-font-style,normal) normal var(--thex-base-font-weight,normal) var(--thex-base-font-size) / var(--thex-base-line-height) var(--thex-base-font-family);
    --thex-base-font-big: var( --thex-base-font-style,normal) normal var(--thex-base-font-weight,normal) var(--thex-text-big-font-size) / var(--thex-text-big-line-height) var(--thex-base-font-family);
    --thex-widget-title-font: var( --thex-widget-title-font-style,normal) normal var(--thex-widget-title-font-weight,normal) var(--thex-widget-title-font-size) / var(--thex-widget-title-line-height) var(--thex-widget-title-font-family);
    --thex-widget-content-font: var( --thex-widget-content-font-style,normal) normal var(--thex-widget-content-font-weight,normal) var(--thex-widget-content-font-size) / var(--thex-widget-content-line-height) var(--thex-widget-content-font-family);
    --thex-h1-font: var( --thex-h1-font-style,normal) normal var(--thex-h1-font-weight,normal) var(--thex-h1-font-size) / var(--thex-h1-line-height) var(--thex-h1-font-family);
    --thex-h2-font: var( --thex-h2-font-style,normal) normal var(--thex-h2-font-weight,normal) var(--thex-h2-font-size) / var(--thex-h2-line-height) var(--thex-h2-font-family);
    --thex-h3-font: var( --thex-h3-font-style,normal) normal var(--thex-h3-font-weight,normal) var(--thex-h3-font-size) / var(--thex-h3-line-height) var(--thex-h3-font-family);
    --thex-h4-font: var( --thex-h4-font-style,normal) normal var(--thex-h4-font-weight,normal) var(--thex-h4-font-size) / var(--thex-h4-line-height) var(--thex-h4-font-family);
    --thex-h5-font: var( --thex-h5-font-style,normal) normal var(--thex-h5-font-weight,normal) var(--thex-h5-font-size) / var(--thex-h5-line-height) var(--thex-h5-font-family);
    --thex-h6-font: var( --thex-h6-font-style,normal) normal var(--thex-h6-font-weight,normal) var(--thex-h6-font-size) / var(--thex-h6-line-height) var(--thex-h6-font-family);
    --thex-form-md-font-family: var( --thex-base-font-family);
    --thex-form-md-font-style: var( --thex-base-font-style,normal);
    --thex-form-md-font-weight: var( --thex-base-font-weight,normal);
    --thex-form-md-font-size: var( --thex-base-font-size);
    --thex-form-md-line-height: var( --thex-base-line-height);
    --thex-form-md-font: var( --thex-form-md-font-style) normal var(--thex-form-md-font-weight) var(--thex-form-md-font-size,--thex-base-font-size) / var(--thex-form-md-line-height,--thex-base-line-height) var(--thex-form-md-font-family,--thex-base-font-family);
}

video {
    margin-left: 50vw;
    transform: translate(-50%);
}

.spinner {
    border: 16px solid silver;
    border-top: 16px solid #337AB7;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 700ms linear infinite;
    top: 40%;
    left: 55%;
    position: absolute;
    z-index:99;
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

a.x-link:hover, a.x-link:focus {
    color: #fdc134 !important;
}

#productTabs .nav-item:not(:last-child) {
    border-bottom: 1px solid #ececec;
}