/* Beware: all styles apply to all pages */

/******** PRODUCTS PAGE ********/

:root {
    --main-heading-padding: 0 3.5rem;
    --content-header-text-30: 1.44em;
    --content-header-text-32: 1.54em;
    --app-cards-padding: 2.5rem;
    --nav-menu-text-24: 1.15em;
    --card-sm-text: .67em;
    --card-xs-text: .58em;
}

.main-heading-padding {
    padding: var(--main-heading-padding);
}

.content-header-text-32 {
    font-size: var(--content-header-text-32);
}
.content-header-text-30 {
    font-size: var(--content-header-text-30);
}
.card-sm-text {
    font-size: var(--card-sm-text);
}
.card-xs-text {
    font-size: var(--card-xs-text);
}
.drop-shadow-sm {
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
}
.drop-shadow-md {
    filter: drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.2));
}

.app-cards-padding {
    padding: var(--app-cards-padding);
}
.app-cards-grid {
    max-width: 1100px;
}
.app-cards-grid > .g-cards {
    --bs-gutter-x: 2em;
}

.sample-ui::after {
    content: "sample interface";
    position: absolute;
    right: 0;
    margin-top: -.5rem;
    top: 100%;
    color: #5F5F5F;
}
.car-hauler-ui {
    max-width: 1000px;
}
.car-hauler-ui.sample-ui::after {
    right: 2rem;
}

.nav-menu-text-24 {
    font-size: var(--nav-menu-text-24) !important;
}
.news-sample .nav-link {
    color: #606060;
}
.news-sample .nav-link.active {
    border-bottom: 2px solid black;
}
.news-grid {
    margin: 0 -1.3rem -1.3rem -1.3rem;
    padding: 0 1.3rem 1.3rem 1.3rem;
}
.news-sample {
    max-width: 1000px;
}
.news-grid > div {
    min-width: 900px;
}
.news-grid .card {
    box-shadow: 0px 4px 14.3px 0px #0000001A;
}
.news-grid .card > .card-img-top {
    border-radius: 10px 10px 0 0;
}
.news-grid .card > .card-footer {
    border-radius: 0 0 10px 10px;
}

.news-grid > .g-news {
    --bs-gutter-x: 2.6rem;
}
.news-grid .card-content-padding {
    padding: .33rem;
}

@media only screen and (max-width: 991.98px) {
    /* For mobile phones: */
    :root {
        --mobile-dynamic-font-size: calc(100vw / 23.4375) !important; /* dynamic page width * (reference page width from design - 375px / default font size - 16px) */
        --main-heading-padding: 1.66em var(--heading-padding);
        --content-header-text-32: 1.5em;
        --app-cards-padding: 3em;
        --m-mobile-2: .5em;
        --m-mobile-3: 1em;
        --m-mobile-4: 1.5em;
        --news-sample-nav-text: .72em;
        --card-sm-text: .8em;
        --card-xs-text: .72em;
    }

    .f-mobile-dynamic {
        font-size: var(--mobile-dynamic-font-size);
    }
    .f-mobile-dynamic p {
        margin-bottom: var(--m-mobile-3);
    }
    .mb-mobile-2 {
        margin-bottom: var(--m-mobile-2) !important;
    }
    .mb-mobile-3 {
        margin-bottom: var(--m-mobile-3) !important;
    }
    .mb-mobile-4 {
        margin-bottom: var(--m-mobile-4) !important;
    }
    .mt-mobile-2 {
        margin-top: var(--m-mobile-2) !important;
    }
    .mt-mobile-3 {
        margin-top: var(--m-mobile-3) !important;
    }
    .mt-mobile-4 {
        margin-top: var(--m-mobile-4) !important;
    }
    .p-mobile-2 {
        padding: var(--m-mobile-2) !important;
    }
    .p-mobile-3 {
        padding: var(--m-mobile-3) !important;
    }
    .w-90 {
        width: 100%;
    }
    .app-cards-grid > .g-cards {
        --bs-gutter-y: 3em;
    }
    .app-cards-grid > .g-cards > div:first-child {
        margin-top: 0;
    }

    .news-sample-nav-text {
        font-size: var(--news-sample-nav-text) !important;
    }
    .news-sample-nav-text > a {
        padding: .5em;
    }
    .sample-ui::after {
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%);
    }
    .nav-menu-text-24 {
        --nav-menu-left-margin: 0;
    }
    .news-grid > div {
        min-width: auto;
    }
    .news-grid > .g-news {
        width: 26em;
        --bs-gutter-x: 1.5em;
        --bs-gutter-y: 1.5em;
    }
    .news-grid .card {
        height: 18.75em !important;
    }
    .news-grid .card-content-padding {
        padding: .33em;
    }
}

/******** HOW TO BUY PAGE ********/

.lo-phone > p {
    max-width: calc(600px * var(--body-font-size-mult));
}
.lo-phone > div {
    min-width: calc(300px * var(--body-font-size-mult));
    max-width: 600px;
}
.lo-phone > div img {
    margin-bottom: -1rem;
}

@media only screen and (max-width: 991.98px) {
    .lo-phone {
        flex-direction: column;
    }
    .lo-phone > p {
        max-width: none;
    }
    .lo-phone > div {
        min-width: none;
        max-width: none;
    }
    .lo-phone > div img {
        margin: 0;
    }
}

/******** CONTACTS PAGE ********/

:root {
    --form-label-text: .9em;
}

#contact-us-form {
    scroll-margin-top: var(--header-height);
}

/******** NEWS PAGE ********/

:root {
    --more-button-padding: .48em 1.44em;
}

.more-btn {
    padding: var(--more-button-padding);
}
.more-btn:disabled {
    background-color: #BCBCBC;
    border-color: #BCBCBC;
}

#news-search-addon {
    border-top: 1px solid #7D7D7D;
    border-right: 0;
    border-bottom: 1px solid #7D7D7D;
    border-left: 1px solid #7D7D7D;
}
#news-search {
    border-top: 1px solid #7D7D7D;
    border-right: 1px solid #7D7D7D;
    border-bottom: 1px solid #7D7D7D;
    border-left: 0;
    outline: 0;
}
#news-search::placeholder {
    color: #B8B8B8;
}

.news-card {
    margin-top: 1.15em;
    box-shadow: inset 0 0 0 1px transparent, 0 0 0 0 transparent;

    transition: box-shadow 0.3s ease-out;
}
.news-card.opened {
    box-shadow: inset 0 0 0 1px #D5D5D5, 0 4px 12px 0 #0000001A;
}

@media only screen and (max-width: 991.98px) {
    :root {
        --more-button-padding: .63em 3em;
    }

    #news-search-addon svg {
        width: calc(100vw / 17.05);
        height: calc(100vw / 17.05);
    }

    .news-card {
        margin-top: 0;
    }
    .news-card.opened {
        box-shadow: inset 0 0 0 1px #D5D5D5, 0 0 0 0 transparent;
    }
    .news-card .content-heading-text {
        margin-bottom: 0;
    }
    .news-card .more-btn {
        width: 100%;
    }
    .news-card > .mb-mobile-2:first-child {
        margin-bottom: .63em !important;
    }
}