/* These rules are specifically for the product catalog page so that on large viewports the amount of columns
   will always be 3. This is to override bootstrap's flexbox grid expanding on large viewports.
 */
@media screen and (max-width: 1999px) {
    #product-container {
        width: 100%;
    }
}

@media screen and (min-width: 2000px) {
    #product-container {
        max-width: 2000px;
    }
    #industry-hero-topic-bg {
        padding:0 18vw 0 18vw;
    }
}

@media screen and (max-width: 1199px) {

    /* GENERAL */
    .navbar-brand > img {
        width: 13em !important;
        height: auto;
    }

    .clickable-logo {
        width: 11em !important;
    }

    .u-header__nav-link{
        padding-right: .5em !important;
        padding-left: .5em !important;
    }

    /* PRODUCT CATALOG */
    #no-products-message {
        width: 100%;
    }

    .product-card {
        margin: unset !important;
        margin-bottom: 2em !important;
    }

    #pill-filters {
        margin: 1em;
        margin-bottom: 2em;

        height: auto !important;
    }
    .investment-text{
        top:190px !important;
    }
}

@media screen and (max-width: 991px) {
    /* start of large tablet styles */
    /* ABOUT PAGES */
    .partner-card {
        width: 44% !important;
    }
    .team-card {
        width: 100% !important;
    }

    /* INDUSTRY PAGES */
    .hero-padding-top {
        padding-top: 2rem !important;
    }

    #industry-hero-h1 {
        position: absolute;
        top: 190px;
        left: 0;
        width: 60%;
        z-index: 12;
        font-size: 2.1em;
        padding: 0 15px 0 15px;
        margin-top: 0%;
        color: white;
    }
}
@media screen and (min-width: 768px) {
    .mobile-text{
        visibility: hidden;
    }
    .normal-text{
        visibility: visible;
    }
    .careers-hero-top-padding{
        padding-top:9.4rem !important;
    }
}

@media screen and (max-width: 767px) {
    /* start of medium tablet styles */
    /* ABOUT PAGES */
    .partner-card {
        width: 44% !important;
    }

    #industry-overlay {
        position: relative;
        top: 0;
        right: unset;
        z-index: 10;
        width: 100% !important;
        min-width: 100% !important;
        height: 100%;
        transform: unset;
        background-image: url('/web/assets/img/image-blue-triangles.jpg');
    }

    #industry-hero-h1 {
        position: absolute;
        top: 0vh;
        left: 7vw;
        width: 100%;
        z-index: 12;
        font-size: 2.1em;
        padding: 0 15px 0 15px;
        margin-top: 10%;
        color: white;
        text-align: center;
    }
#industry-overlay.container {
    padding: unset;
}
    .mobile-text {
        visibility: visible;
        padding-top: 40px;
    }

    .normal-text {
        visibility: hidden;
    }

    .AuditorMarketShare{
        margin-left: 13%;
    }
    #industry-hero{
        height:400px;
    }
    .investment-text{
        padding-top:0px !important;
    }
}

/* PRODUCT CATALOG */
/* This is done to prevent word wrapping on smaller screens in the product titles */
/* This also makes it so that every card header is the same height, as the card header height is determined by the text */
@media screen and (min-width: 1200px) and (max-width: 1688px) {
    .product-card-name {
        font-size: 16px;
    }

    .product-card-location {
        font-size: 16px;
    }

    .card-header {
        padding-left: 0.5em;
        padding-right: 0;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1237px) {
    .product-card-name {
        font-size: 14px;
    }

    .product-card-location {
        font-size: 14px;
    }
}
/* End Product Catalog word wrap CSS */

@media screen and (max-width: 479px) {
    /* start of phone styles */

    /* GENERAL */
    h1 {
        font-size: 1.75rem !important;
    }

    .h1 {
        font-size: 1.75rem !important;
    }

    .h6 {
        font-size: 0.80rem !important;
    }

    .lead {
        font-size: 1.0rem !important;
    }

    /* Target text within tables */
    table > tbody > tr > td {
        font-size: 0.80rem !important;
    }

    /* PRODUCT PAGES */
    #product-info-section {
        margin-left: 1em;
        margin-right: 1em;
    }

    .related-insights-card {
        width: 100%;
    }

    /* ABOUT PAGES */
    .partner-card {
        width: 100% !important;
    }
}

@media screen and (min-width: 320px) and (max-width: 991px) {
    /* start of phone styles to large tablet styles */

    /* PRODUCT PAGES */

    /* Width is set to 100% so that the button and tags are on their own row */
    /* Padding is the same as .card-body so that the text lines up with .related-insights-card text */
    .related-insights-btn {
        width: 100%;
        padding: 1.25rem;
    }

    #product-tags {
        width: 100%;
        padding: 1.25rem;
    }
}
@media screen and (min-width: 1620px) {
    #industry-hero{
        background-size: 83%;
    }
}

@media screen and (min-width: 767px) and (max-width: 991px) {
   #industry-hero{
       height:500px;
   }
    #industry-hero-h1{
        top:160px;
    }
    .investment-text{
        top:130px !important;
        width:50% !important;
    }
}
@media screen and (min-width: 479px) and (max-width:991px) {
    .team-card {
        width: 50% !important;
    }
}