﻿
/** ATRO, LLC custom CSS by Sparks Milling Digital sparksmilling.com **/
/* Move down content because we have a fixed navbar that is 50px tall */

/** ATRO stock breakpoints
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }


@media (min-width: 576px) { ... }
@media (min-width: 768px) { ... }
@media (min-width: 992px) { ... }
@media (min-width: 1200px) { ... }

**/

/**
ATRO 2019 brand colors

ATRO Blue #2c337b;
ATRO Gold #9e8533;
ATRO High Temp #e42d13;


Light Blue #36479d;
Maroon #640d00;
Dark Gold #514219;
Grass# 3b4b10;
Silver #bfbfbf;
Steel #6e6d6b;
Dark Gray #404040;
Earth #714502;

Lime #ade10a
Lime 25% #eaf7c2
Sky Blue #00b4ff
Orange Peel #ffa000
Orange Peel 15% #fff1d9

**/

.btn-info {
    color: #eaf7c2;
    background-color: #6e6d6b;
    border-color: #eaf7c2;
}
.btn-info:hover {
    color: #ade10a;
    background-color: #404040;
    border-color: #eaf7c2;
}


.atro-blue {
    color: #2c337b;
}
.atro-blue-background {
    color: #2c337b;
}
.atro-lime {
    color: #ade10a;
}
.atro-high-temp {
    color: #e42d13;
}
.atro-high-temp-background {
    color: #e42d13;
}


.atro-gold-background {
    color: #9e8533;
}
.atro-gold {
    color: #9e8533;
}


body {
    /**padding-top: 50px;**/
    /*padding-bottom: 20px;*/
    font-family: 'Roboto', sans-serif;
}

/*h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, a, li {
    font-family: 'Roboto', sans-serif;
}*/

/* Wrapping container element */
/* Set some basic padding to keep content from hitting the edges */

/** Prevent line wrap **/
.atro-no-wrap {
    white-space:nowrap;
}

.body-content {
    padding: 0;
}

/** ATRO Part Number Search **/

#result, #result2, #result3 {
    left: 0;
    z-index: 900;
    position: absolute;
    width: 100%;
    max-width: 540px;
    top: 55px;
    /**left: 50%;**/
    cursor: pointer;
    overflow-y: scroll;
    max-height: 600px;
    box-sizing: border-box;
}

#searchResultPH {
    z-index: 900;
    position: absolute;
    width: 100%;
    /*max-width: 540px;*/
    max-width: 100%;
    top: 55px;
    /**left: 50%;**/
    /*cursor: pointer;*/
    overflow-y: scroll;
    max-height: 600px;
    box-sizing: border-box;
}

/** no display **/
.nodisplay {
    display:none;
}

/** header dashboard controls and buttons **/

.dashboard-button {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    /**max-width: 280px;**/
    max-width: 100%;
}

.sample-page-nav {
    font-size: 1.5rem;
    color: #640d00;
    padding: 0 0 .5rem 0;
    margin: 0 0 1rem 0;
    border-bottom: solid 1px #640d00;
}

.atro-type-reverse-01 {
    background: #bfbfbf;
    color: #2c337b;
}

/** jumbotron **/

.jumbotron {
    margin-top: 0;
    padding: 2rem 0;
    color: #ffffff;
}
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top:0;
        padding:8rem 2rem;
        color:#ffffff;
    }
    .body-content {
        padding: 0;
    }
}
@media (min-width: 576px) {
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
@media (min-width: 1200px) {
}

.atro-breadcrumbs-01 {
    color: #6e6d6b;
    font-size: 90%;
}

/*********marketing section**********/
.breadcrumb-trails-01 {
    display: none;
}
@media (min-width: 576px) {
    .breadcrumb-trails-01 {
        display: none;
    }
}
@media (min-width: 768px) {
    .breadcrumb-trails-01 {
        display: block;
    }
}
@media (min-width: 992px) {
    .breadcrumb-trails-01 {
        display: block;
    }
}
@media (min-width: 1200px) {
    .breadcrumb-trails-01 {
        display: block;
    }
}
/**************tdocs section**********/
.atrotdocs-breadcrumb-trails-01 {
display:block;
}
/**************field manual section breadcrumbs************/
.atrofm-breadcrumb-trails-01 {
display:block;
}

.breadcrumb-menus-01 {
    text-align: right;
}
@media (max-width: 768px) {
    .breadcrumb-menus-01 {
        text-align: left !important;
    }
}

.breadcrumb-menu-visibility-mobile {
    display:block;
    float:left;
}
@media (min-width: 576px) {
    .breadcrumb-menu-visibility-mobile {
        display: block;
        float:left;
    }
}
@media (min-width: 768px) {
    .breadcrumb-menu-visibility-mobile {
        display: none;
    }
}
@media (min-width: 992px) {
    .breadcrumb-menu-visibility-mobile {
        display: none;
    }
}
@media (min-width: 1200px) {
    .breadcrumb-menu-visibility-mobile {
        display: none;
    }
}

.breadcrumb-menu-visibility {
    display:none;
}
@media (min-width: 576px) {
    .breadcrumb-menu-visibility {
        display: none;
    }
}
@media (min-width: 768px) {
    .breadcrumb-menu-visibility {
        display: block;
    }
}
@media (min-width: 992px) {
    .breadcrumb-menu-visibility {
        display: block;
    }
}
@media (min-width: 1200px) {
    .breadcrumb-menu-visibility {
        display: block;
    }
}

.atro-carousel-one {
}

.atro-carousel-00 {
}

.atro-carousel-01 {
}

.atro-banner-caption-01 {
}

.atro-banner-logo-01 { /** logo wrapper **/
}

/*.carousel-inner>.carousel-item {
    position: relative;
    max-height: 600px;
}*/
.carousel-caption {
    position: absolute;
    top: 50%;
    transform: translateY(-100%);
}

@media (min-width: 2880px) {
    .carousel-caption {

        transform: translateY(-110%);
    }
}

@media (min-width: 3200px) {
    .carousel-caption {
        transform: translateY(-115%);
    }
}

@media (min-width: 768px) {
    .atro-carousel-base {
        margin-right: 0;
        background-image: url('../../assets/banners/ATRO-420-2021-02-002.jpg');
        background-size: cover;
    }
}

.carousel-indicators li {
    background-color: #ade10a;
}


@media (max-width: 575px) {
    .atro-banner-logo-102 { /** logo image xs **/
        width: 55%;
        background-color: rgba(0,0,0,.8);
        padding: 1rem;
        border: solid 1px rgba(0,0,0,.8);
        border-radius: .5rem;
    }
}
@media (min-width: 576px) {
    .atro-banner-logo-102 { /** logo image **/
    width: 50%;
    background-color: rgba(0,0,0,.8);
    padding: 1rem;
    border: solid 1px rgba(0,0,0,.8);
    border-radius: .5rem;
}
}
@media (min-width: 768px) {
    .atro-banner-logo-102 { /** logo image **/
        width: 40%;
        background-color: rgba(0,0,0,.8);
        padding: 1rem;
        border: solid 1px rgba(0,0,0,.8);
        border-radius: .5rem;
    }
}
@media (min-width: 992px) {
    .atro-banner-logo-102 { /** logo image **/
    width: 35%;
    background-color: rgba(0,0,0,.8);
    padding: 1rem;
    border: solid 1px rgba(0,0,0,.8);
    border-radius: .5rem;
}
}
@media (min-width: 1200px) {
    .atro-banner-logo-102 { /** logo image **/
        width: 22%;
        background-color: rgba(0,0,0,.8);
        padding: 1rem;
        border: solid 1px rgba(0,0,0,.8);
        border-radius: .5rem;
    }
}

/**start new banner logo styles for Steer King announcement JRM 072920 **/

/** -103 **/

@media (max-width: 575px) {
    .atro-banner-logo-103 { /** logo image xs **/
        width: 70%;
        background-color: rgba(0,0,0,.0);
        padding: 1rem;
        border: solid 1px rgba(0,0,0,.0);
        border-radius: .5rem;
    }
}

@media (min-width: 576px) {
    .atro-banner-logo-103 { /** logo image **/
        width: 50%;
        background-color: rgba(0,0,0,.0);
        padding: 1rem;
        border: solid 1px rgba(0,0,0,.0);
        border-radius: .5rem;
    }
}

@media (min-width: 768px) {
    .atro-banner-logo-103 { /** logo image **/
        width: 40%;
        background-color: rgba(0,0,0,.0);
        padding: 1rem;
        border: solid 1px rgba(0,0,0,.0);
        border-radius: .5rem;
    }
}

@media (min-width: 992px) {
    .atro-banner-logo-103 { /** logo image **/
        width: 35%;
        background-color: rgba(0,0,0,.0);
        padding: 1rem;
        border: solid 1px rgba(0,0,0,.0);
        border-radius: .5rem;
    }
}

@media (min-width: 1200px) {
    .atro-banner-logo-103 { /** logo image **/
        width: 25%;
        background-color: rgba(0,0,0,.0);
        padding: 1rem;
        border: solid 1px rgba(0,0,0,.0);
        border-radius: .5rem;
    }
}

/** -104 **/

@media (max-width: 575px) {
    .atro-banner-logo-104 { /** logo image xs **/
        width: 49%;
        background-color: rgba(0,0,0,.0);
        padding: 1rem;
        border: solid 1px rgba(0,0,0,.0);
        border-radius: .5rem;
    }
}

@media (min-width: 576px) {
    .atro-banner-logo-104 { /** logo image **/
        width: 50%;
        background-color: rgba(0,0,0,.0);
        padding: 1rem;
        border: solid 1px rgba(0,0,0,.0);
        border-radius: .5rem;
    }
}

@media (min-width: 768px) {
    .atro-banner-logo-104 { /** logo image **/
        width: 40%;
        background-color: rgba(0,0,0,.0);
        padding: 1rem;
        border: solid 1px rgba(0,0,0,.0);
        border-radius: .5rem;
    }
}

@media (min-width: 992px) {
    .atro-banner-logo-104 { /** logo image **/
        width: 35%;
        background-color: rgba(0,0,0,.0);
        padding: 1rem;
        border: solid 1px rgba(0,0,0,.0);
        border-radius: .5rem;
    }
}

@media (min-width: 1200px) {
    .atro-banner-logo-104 { /** logo image **/
        width: 25%;
        background-color: rgba(0,0,0,.0);
        padding: 1rem;
        border: solid 1px rgba(0,0,0,.0);
        border-radius: .5rem;
    }
}

/**end new banner logo styles for Steer King announcement JRM 072920 **/

.atro-banner-logo-02 { /** badges **/
    width: 45%;
}
@media (min-width: 576px) {
    .atro-banner-logo-02 { /** badges **/
        width: 40%;
    }
}
@media (min-width: 768px) {
    .atro-banner-logo-02 { /** badges **/
        width: 25%;
    }
}
@media (min-width: 992px) {
    .atro-banner-logo-02 { /** badges **/
        width: 25%;
    }
}
@media (min-width: 1200px) {
    .atro-banner-logo-02 { /** badges **/
        width: 15%;
    }
}

/***** wrapper *******/
.atro-banner-caption-02 { 
    margin: 1.5rem 0 1rem 0;
}
@media (min-width: 576px) {
    .atro-banner-caption-02 {
        margin: 1.5rem 0 1rem 0;
    }
}
@media (min-width: 768px) {
    .atro-banner-caption-02 {
        margin: 1.5rem 0 1rem 0;
    }
}
@media (min-width: 992px) {
    .atro-banner-caption-02 {
        margin: 1.5rem 0 1rem 0;
    }
}
@media (min-width: 1200px) {
    .atro-banner-caption-02 {
        margin: 1.5rem 0 1rem 0;
    }
}

/***** wrapper *******/

.carousel-caption-00 {
    height: calc(100vw * .25);
}
@media (min-width: 576px) {
    .carousel-caption-00 {
        height: calc(100vw * .25);
    }
}
@media (min-width: 768px) {
    .carousel-caption-00 {
        height: calc(100vw * .40);
    }
}
@media (min-width: 992px) {
    .carousel-caption-00 {
        height: calc(100vw * .35);
    }
}
@media (min-width: 1200px) {
    .carousel-caption-00 {
        height: calc(100vw * .34);
    }
}


.atro-banner-caption-02 h1 {
    font-weight: 900;
    font-size: 9vw;
    line-height: 1.1;
}
@media (min-width: 576px) {
    .atro-banner-caption-02 h1 {
        font-weight: 900;
        font-size: 9vw;
    }
}
@media (min-width: 768px) {
    .atro-banner-caption-02 h1 {
        font-weight: 900;
        font-size: 6vw;
    }
}
@media (min-width: 992px) {
    .atro-banner-caption-02 h1 {
        font-weight: 900;
        font-size: 5vw;
    }
}
@media (min-width: 1200px) {
    .atro-banner-caption-02 h1 {
        font-weight: 700;
        font-size:3.5vw;
    }
}

.atro-banner-caption-02 h5 {
    font-weight: 400;
    /*font-size: 1rem;*/
    color: #e6e6e6;
    font-size: 4vw;
    margin-bottom: 2rem;
}
@media (min-width: 576px) {
    .atro-banner-caption-02 h5 {
        font-weight: 400;
        font-size: 4vw;
        margin-bottom: 3.5rem;
    }
}
@media (min-width: 768px) {
    .atro-banner-caption-02 h5 {
        font-weight: 400;
        font-size: 3vw;
        margin-bottom: 1.5rem;
    }
}
@media (min-width: 992px) {
    .atro-banner-caption-02 h5 {
        font-weight: 400;
        font-size: 3vw;
    }
}
@media (min-width: 1200px) {
    .atro-banner-caption-02 h5 {
        font-weight: 700;
        font-size:2vw;
    }
}

.atro-banner-button-01 {
    width: 70%;
    margin: .5rem .5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
@media (min-width: 576px) {
    .atro-banner-button-01 {
        width: 50%;
        margin: .5rem .5rem;
    }
}
@media (min-width: 768px) {
    .atro-banner-button-01 {
        width: 40%;
        margin: 1rem .5rem;
    }
}
@media (min-width: 992px) {
    .atro-banner-button-01 {
        width: 35%;
        margin: 1rem .5rem;
    }
}
@media (min-width: 1200px) {
    .atro-banner-button-01 {
        width: 16.5vw;
        margin: 1rem .5rem;
    }
}



.row.atro-parts-row-02 {
    margin-left: 0;
    padding: 5rem 2rem 0rem 2rem;
}

@media (min-width: 576px) {
    .atro-parts-row-02 {
        margin-left: 0;
        padding: 5rem 2rem 0rem 2rem;
    }
}

@media (min-width: 768px) {
    .atro-parts-row-02 {
        display: none;
    }
}

@media (min-width: 992px) {
    .atro-parts-row-02 {
        display: none;
    }
}

@media (min-width: 1200px) {
    .atro-parts-row-02 {
        display: none;
    }
}


.atro-parts-row-03 {
    display: none;
}

@media (min-width: 576px) {
    .atro-parts-row-03 {
        display: none;
    }
}

@media (min-width: 768px) {
    .atro-parts-row-03 {
        display: flex;
        margin: 0 auto;
        padding: 2rem 0 4rem 0;
        width: 80%;
    }
}

@media (min-width: 992px) {
    .atro-parts-row-03 {
        display: flex;
        margin: 0 auto;
        padding: 4rem 0 4rem 0;
        width: 80%;
    }
}

@media (min-width: 1200px) {
    .atro-parts-row-03 {
        display: flex;
        margin: 0 auto;
        padding: 1rem 0 8rem 0;
        width: 79%;
    }
}


.atro-banner-button-02 {
    width:50%;
    margin: 1rem .5rem 1rem 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
@media (min-width: 576px) {
    .atro-banner-button-02 {
        width: 45%;
        margin: 1rem .5rem 1rem 0;
    }
}
@media (min-width: 768px) {
    .atro-banner-button-02 {
        width: 35%;
        margin: 1rem .5rem 1rem 0;
    }
}
@media (min-width: 992px) {
    .atro-banner-button-02 {
        width: 35%;
        margin: 1rem .5rem 1rem 0;
    }
}
@media (min-width: 1200px) {
    .atro-banner-button-02 {
        width: 60%;
        margin: 1rem .5rem 1rem 0;
    }
}


.atro-banner-button-03 {
    width:70%;
    margin: 1rem .5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
@media (min-width: 576px) {
    .atro-banner-button-03 {
        width: 55%;
        margin: 1rem .5rem;
    }
}
@media (min-width: 768px) {
    .atro-banner-button-03 {
        width: 35%;
        margin: 1rem .5rem;
    }
}
@media (min-width: 992px) {
    .atro-banner-button-03 {
        width: 35%;
        margin: 1rem .5rem;
    }
}
@media (min-width: 1200px) {
    .atro-banner-button-03 {
        width: 25%;
        margin: 1rem .5rem;
    }
}

.atro-banner-button-04 {
    width: 80%;
    margin: 0 0 1rem 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
@media (min-width: 576px) {
    .atro-banner-button-04 {
        width: 55%;
        margin: 0 0 1rem 0;
    }
}
@media (min-width: 768px) {
    .atro-banner-button-04 {
        width: 85%;
        margin: 0 0 1rem 0;
    }
}
@media (min-width: 992px) {
    .atro-banner-button-04 {
        width: 65%;
        margin: 0 0 1rem 0;
    }
}
@media (min-width: 1200px) {
    .atro-banner-button-04 {
        width: 55%;
        margin: 0 0 1rem 0;
    }
}


/**********Category Page Landing Page button row styles************/

.category-buttons-row-00 {
width:95%;
margin:0 auto;
padding:.5rem 1rem;
}

.category-buttons-row-01 {

}


.atro-banner-button-05 {
    width: 100%;
    margin: 1rem .5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
@media (min-width: 576px) {
    .atro-banner-button-05 {
        width: 100%;
        margin: 1rem .5rem;
    }
}
@media (min-width: 768px) {
    .atro-banner-button-05 {
        width: 100%;
        margin: 1rem .5rem;
    }
}
@media (min-width: 992px) {
    .atro-banner-button-05 {
        width: 100%;
        margin: 1rem .5rem;
    }
}
@media (min-width: 1200px) {
    .atro-banner-button-05 {
        width: 100%;
        margin: 1rem .5rem;
    }
}



.atro-background-001 {
    background-image: url('../../assets/graphics/atro-peterbilt-background-001.jpg');
    background-size: cover;
}

.jumbotron-201-01 {
    background-image: url('../../assets/banners/atro-jumbotron-master-201-01.png');
    background-size: cover;
}

.jumbotron-201-02 {
    background-image: url('../../assets/banners/atro-jumbotron-master-201-02.png');
    background-size: cover;
}

.jumbotron-201-03 {
    background-image: url('../../assets/banners/atro-jumbotron-master-201-03.png');
    background-size: cover;
}

.jumbotron-201-04 {
    background-image: url('../../assets/banners/atro-jumbotron-master-201-04.png');
    background-size: cover;
}

.jumbotron-201-05 {
    background-image: url('../../assets/banners/atro-jumbotron-master-201-05.png');
    background-size: cover;
}

.jumbotron-201-06 {
    background-image: url('../../assets/banners/atro-jumbotron-master-201-06.png');
    background-size: cover;
}

.jumbotron-201-07 {
    background-image: url('../../assets/banners/atro-jumbotron-master-201-07.png');
    background-size: cover;
}

.jumbotron-201-08 {
    background-image: url('../../assets/banners/atro-jumbotron-master-201-08.png');
    background-size: cover;
}

.jumbotron-201-09 {
    background-image: url('../../assets/banners/atro-jumbotron-master-201-09.png');
    background-size: cover;
}

.jumbotron-201-10 {
    background-image: url('../../assets/banners/atro-jumbotron-master-201-10.png');
    background-size: cover;
}

.jumbotron-201-11 {
    background-image: url('../../assets/banners/atro-jumbotron-master-201-11.png');
    background-size: cover;
}

.jumbotron-201-12 {
    background-image: url('../../assets/banners/atro-jumbotron-master-201-12.png');
    background-size: cover;
}

/* Fleet Marketing primary truck image */
.jumbotron-601-01 {
    background-image: url('../../assets/banners/atro-jumbotron-master-601-01.png');
    background-size: cover;
}

/* Fleet Marketing Q2 truck image */
.jumbotron-602-01 {
    background-image: url('../../assets/banners/atro-jumbotron-master-602-01.png');
    background-size: cover;
}


.marketing-headline-00 {
    padding:6rem 0;
    background: radial-gradient(circle, rgba(44,51,123,1) 0%, rgba(64,64,64,1) 100%);
}

.atro-marketing-headline-01 {
    text-align: center;
}

/** change to new FR bushing content color #bfbfbf**/
.atro-marketing-headline-02 {
    font-size: 2rem;
    color: #bfbfbf;
    padding:0 0 1.4rem 0;
}
@media (min-width: 576px) {
    .atro-marketing-headline-02 {
        font-size: 2rem;
    }
}
@media (min-width: 768px) {
    .atro-marketing-headline-02 {
        font-size: 2rem;
    }
}
@media (min-width: 992px) {
    .atro-marketing-headline-02 {
        font-size: 2.2rem;
    }
}
@media (min-width: 1200px) {
    .atro-marketing-headline-02 {
        font-size: 2.4rem;
    }
}

.line-height-control-00 {
    line-height: 2.4;
}
@media (min-width: 576px) {
    .line-height-control-00 {
        line-height: 2.2;
    }
}
@media (min-width: 768px) {
    .line-height-control-00 {
        line-height: 2.2;
    }
}
@media (min-width: 992px) {
    .line-height-control-00 {
        line-height: 2.2;
    }
}
@media (min-width: 1200px) {
    .line-height-control-00 {
        line-height: 2.2;
    }
}




.category-07 {
    padding: 0 .25rem;
}


/** change for FR bushing content replace radial gradient remove concrete background**/
.atro-parts-row-01 {
    padding: .25rem;
    text-align: center;
    /*background-image: url('../../assets/graphics/atro-concrete-60percent-4000x1335-top.jpg');
    background-size: cover;*/
    /*background: rgb(44,51,123);*/
    background: radial-gradient(circle, rgba(44,51,123,1) 0%, rgba(64,64,64,1) 100%);
}
@media (min-width: 576px) {
    .atro-parts-row-01 {
        padding: .5rem;
    }
}
@media (min-width: 768px) {
    .atro-parts-row-01 {
        padding: .5rem;
    }
}
@media (min-width: 992px) {
    .atro-parts-row-01 {
        padding: .5rem;
    }
}
@media (min-width: 1200px) {
    .atro-parts-row-01 {
        padding: 4rem 1.5rem;
    }
}

.atro-parts-row-01 .container {
    padding:.25rem .5rem;
}
@media (min-width: 576px) {
    .atro-parts-row-01 .container {
        padding: 0 15px;
    }
}
/*@media (min-width: 768px) {
    ...
}
@media (min-width: 992px) {
    ...
}
@media (min-width: 1200px) {
    ...
}*/



/*****************************************************/
/**************home page feature row styles***********/

/**************************************/
/** ATRO Video Testimonial Styles **/

.testimonial-small-header {
    font-weight: 900;
    text-transform: uppercase;
    color: #bfbfbf;
    margin: 2.5rem 0;
    font-size: 1rem;
}
@media (min-width: 576px) {
    .testimonial-small-header {
        font-size: 1rem;
    }
}
@media (min-width: 768px) {
    .testimonial-small-header {
        font-size: .8rem;
    }
}
@media (min-width: 992px) {
    .testimonial-small-header {
        font-size: 1rem;
    }
}
@media (min-width: 1200px) {
    .testimonial-small-header {
        font-size: 1.2rem;
    }
}

.testimonial-quote-01 {
    font-weight: 900;
    color: #ffffff;
    margin: 2rem 0;
    font-size:2rem;
}
@media (min-width: 576px) {
    .testimonial-quote-01 {
        font-size: 2rem;
    }
}
@media (min-width: 768px) {
    .testimonial-quote-01 {
        font-size: 1.8rem;
    }
}
@media (min-width: 992px) {
    .testimonial-quote-01 {
        font-size: 2rem;
    }
}
@media (min-width: 1200px) {
    .testimonial-quote-01 {
        font-size: 2.4rem;
    }
}

.testimonial-quote-02 {
    color: #e6e6e6;
    margin: 2rem 0;
    font-size: 1.4rem;
}
@media (min-width: 576px) {
    .testimonial-quote-02 {
        font-size: 1.4rem;
    }
}
@media (min-width: 768px) {
    .testimonial-quote-02 {
        font-size: 1.2rem;
    }
}
@media (min-width: 992px) {
    .testimonial-quote-02 {
        font-size: 1.4rem;
    }
}
@media (min-width: 1200px) {
    .testimonial-quote-02 {
        font-size: 1.6rem;
    }
}


.atro-feature-row-00 {
    background: radial-gradient(circle, rgba(44,51,123,1) 0%, rgba(64,64,64,1) 100%);
}
@media (min-width: 576px) {
    .atro-feature-row-00 {
    }
}
@media (min-width: 768px) {
    .atro-feature-row-00 {

    }
}
@media (min-width: 992px) {
    .atro-feature-row-00 {

    }
}
@media (min-width: 1200px) {
    .atro-feature-row-00 {

    }
}


.atro-feature-row-caption-01 {
    padding: 1.5rem;
}
@media (min-width: 576px) {
    .atro-feature-row-caption-01 {

    }
}
@media (min-width: 768px) {
    .atro-feature-row-caption-01 {

    }
}
@media (min-width: 992px) {
    .atro-feature-row-caption-01 {

    }
}
@media (min-width: 1200px) {
    .atro-feature-row-caption-01 {

    }
}


.atro-feature-row-image-00 {
    padding: 0;
    background: #404040;
    border: solid 1px #6e6d6b;
    border-radius: 2rem;
}
@media (min-width: 576px) {
    ...
}
@media (min-width: 768px) {
    ...
}
@media (min-width: 992px) {
    ...
}
@media (min-width: 1200px) {
    .atro-feature-row-image-00 {
        min-width: 570px;
        min-height: 475px;
    }
}

.feature-video-background {
    background-image: url('../../assets/graphics/ATRO-feature-row-blank-301.jpg');
}

.atro-feature-row-image-01 {
    width: 100%;
    border-radius: 2rem;
}
@media (min-width: 576px) {
    .atro-feature-row-image-01 {
        border-radius: 2rem;
    }
}
@media (min-width: 768px) {
    .atro-feature-row-image-01 {
        border-radius: 2rem;
    }
}
@media (min-width: 992px) {
    .atro-feature-row-image-01 {
        border-radius: 2rem;
    }
}
@media (min-width: 1200px) {
    .atro-feature-row-image-01 {
        border-radius: 2rem;
    }
}

/** use this for full color image that need a background gray border**/
.atro-feature-row-image-02 {
    width: 100%;
    padding: .25rem;
    border-radius: 2rem;
}
@media (min-width: 576px) {
    .atro-feature-row-image-02 {
        padding: .25rem;
        border-radius: 2rem;
    }
}
@media (min-width: 768px) {
    .atro-feature-row-image-02 {
        padding: .25rem;
        border-radius: 2rem;
    }
}
@media (min-width: 992px) {
    .atro-feature-row-image-02 {
        padding: .25rem;
        border-radius: 2rem;
    }
}
@media (min-width: 1200px) {
    .atro-feature-row-image-02 {
        padding:.25rem;        
        border-radius: 2rem;
    }
}

.atro-feature-row-first {
    padding:6rem 2rem 2rem 2rem;
}
@media (min-width: 576px) {
    .atro-feature-row-first {
        padding: 6rem 2rem 2rem 2rem;
    }
}
@media (min-width: 768px) {
    .atro-feature-row-first {
        padding: 2rem;
    }
}
@media (min-width: 992px) {
    .atro-feature-row-first {
        padding: 4rem 0 2rem 0;
    }
}
@media (min-width: 1200px) {
    .atro-feature-row-first {
        padding: 8rem 0 2rem 0;
    }
}

.atro-feature-row-mid {
    padding: 4rem 2rem 2rem 2rem;
}
@media (min-width: 576px) {
    .atro-feature-row-mid {
        padding: 4rem 2rem 2rem 2rem;
    }
}
@media (min-width: 768px) {
    .atro-feature-row-mid {
        padding: 1rem 2rem 1rem 2rem;
    }
}
@media (min-width: 992px) {
    .atro-feature-row-mid {
        padding: 2rem 0;
    }
}
@media (min-width: 1200px) {
    .atro-feature-row-mid {
        padding: 2rem 0;
    }
}

.atro-feature-row-last {
    padding: 4rem 2rem;
}
@media (min-width: 576px) {
    .atro-feature-row-last {
        padding: 4rem 2rem;
    }
}
@media (min-width: 768px) {
    .atro-feature-row-last {
        padding: 2rem 2rem;
    }
}
@media (min-width: 992px) {
    .atro-feature-row-last {
        padding: 2rem 0 8rem 0;
    }
}
@media (min-width: 1200px) {
    .atro-feature-row-last {
        padding: 2rem 0 8rem 0;
    }
}


.atro-feature-headline-01 {
    background: #2c337b;
    padding: .5rem 1rem;
    margin: 0 0 1rem 0;
    color: #9e8533;
}
@media (max-width: 374px) {
    .atro-feature-headline-01 {
        font-size: 1.3rem;
        line-height: 1.1;
    }
}
@media (min-width: 375px) and (max-width: 575px) {
    .atro-feature-headline-01 {
        font-size: 1.7rem;
        line-height: 1.1;
    }
}
@media (min-width: 576px) {
    .atro-feature-headline-01 {
        font-size: 1.8rem;
        line-height: 1.0;
    }
}
@media (min-width: 768px) {
    .atro-feature-headline-01 {
        font-size: 1.9rem;
        line-height: 1.1;
    }
}
@media (min-width: 992px) {
    .atro-feature-headline-01 {
        font-size: 2.0rem;
        line-height: 1.1;
    }
}
@media (min-width: 1200px) {
    .atro-feature-headline-01 {
        font-size: 2.1rem;
        line-height: 1.1;
    }
}

@media (max-width: 374px) {
    .atro-feature-headline-02 {
        font-size: 1.5rem !important;
        line-height: 1.2;
    }
}
@media (min-width: 375px) and (max-width: 575px) {
    .atro-feature-headline-02 {
        font-size: 1.8rem !important;
        line-height: 1.2;
    }
}
@media (min-width: 576px) {
    .atro-feature-headline-02 {
        font-size: 1.9rem !important;
        line-height: 1.2;
    }
}
@media (min-width: 768px) {
    .atro-feature-headline-02 {
        font-size: 2.0rem !important;
        line-height: 1.2;
    }
}
@media (min-width: 992px) {
    .atro-feature-headline-02 {
        font-size: 2.1rem !important;
        line-height: 1.2;
    }
}
@media (min-width: 1200px) {
    .atro-feature-headline-02 {
        font-size: 2.2rem !important;
        line-height: 1.2;
    }
}


.atro-feature-headline-03 {
    color: #404040;
    font-size: 2.6rem !important;
    text-align: center;
    line-height: 1.0;
    margin: 0 0 2rem 0;
}
@media (min-width: 576px) {
    .atro-feature-headline-03 {
        font-size: 2.6rem !important;
        line-height: 1.2;
        margin: 0 0 2rem 0;
    }
}
@media (min-width: 768px) {
    .atro-feature-headline-03 {
        font-size: 2.6rem !important;
        line-height: 1.2;
        margin: 0 0 2rem 0;
    }
}
@media (min-width: 992px) {
    .atro-feature-headline-03 {
        font-size: 2.6rem !important;
        line-height: 1.2;
        margin: 0 0 2rem 0;
    }
}
@media (min-width: 1200px) {
    .atro-feature-headline-03 {
        font-size: 3rem !important;
        font-weight: 700;
        line-height: 1.0;
        margin: 0 0 2rem 0;
    }
}


.feature-headline-04 {
    color: #404040;
    text-align: center;
}
@media (min-width: 576px) {
    ...
}
@media (min-width: 768px) {
    ...
}
@media (min-width: 992px) {
    ...
}
@media (min-width: 1200px) {
    ...
}



.feature-headline-ctas-00 {
    text-align:center;
    padding:1rem 0 0 0;
}
@media (min-width: 576px) {
    ...
}
@media (min-width: 768px) {
    ...
}
@media (min-width: 992px) {
    ...
}
@media (min-width: 1200px) {
    ...
}


.atro-parts-card-h01 {
    padding: .5rem;
    margin: 0;
    border-bottom: solid 1px #bfbfbf;
    background: #e6e6e6;
    min-height: 1px;
    border-radius: 1rem;
}

.atro-category-badge-h01 {
    padding: 1rem;
    width: 100%;
}

.atro-parts-card-h01-01 {
    /*flex: 1 1 auto;*/
    padding: 0;
    text-align: center;
}

.atro-category-image-h01 {
    width: 85%;
}







.atro-parts-card-00 {
    margin: .5rem 0;
    border-radius: 1rem;
    /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    /*box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);*/
}
@media (min-width: 576px) {
    .atro-parts-card-00 {
        margin:1rem 0;
    }
}
@media (min-width: 768px) {
    .atro-parts-card-00 {
        margin: 1rem 0;
    }
}

.atro-parts-card-01 {
    padding: .5rem;
    margin: 0;
    border-bottom: solid 1px #bfbfbf;
    background: #e6e6e6;
    min-height: 1px;
    border-radius: 1rem;
}

.atro-parts-card-01-01 {
    min-height: 1px;
}

.atro-category-badge-01 {
    width: 100%;
    transition: transform .5s;
    transition-timing-function: ease-in-out;
}
.atro-category-badge-01:hover {
    transform: rotate(360deg);
}

.atro-category-image-01 {
    width: 100%;
}


.atro-parts-card-02 {
    background: #bfbfbf;
    text-align: center;
    text-transform: uppercase;
}
.atro-parts-card-02 a {
    color: #ffffff;
}
.atro-parts-card-02 a:hover {
    color: #ffffff;
}

.card-img-top {
}

.feature-headline-02 {
    font-size:2.5rem;    
    color: #2c337b;
}


.atro-features-card-deck-00 {
    padding:2rem;
}
@media (min-width: 576px) {
    .atro-features-card-deck-00 {
    }
}
@media (min-width: 768px) {
    .atro-features-card-deck-00 {
    }
}
@media (min-width: 992px) {
    .atro-features-card-deck-00 {
    }
}
@media (min-width: 1200px) {
    .atro-features-card-deck-00 {
    }
}



.atro-features-card-00 {
    margin: .5rem 0;
}
@media (min-width: 576px) {
    .atro-features-card-00 {
        margin: 1rem 0;
    }
}
@media (min-width: 768px) {
    .atro-features-card-00 {
        margin: 1rem 0;
    }
}

.atro-features-card-01 {
    padding: 1.5rem;
    margin: 0;
}
@media (min-width: 576px) {
    .atro-features-card-01 {
        padding: 1.5rem;
        margin: 0;
    }
}
@media (min-width: 768px) {
    .atro-features-card-01 {
        padding: .5rem;
        margin: 0;
    }
}
@media (min-width: 992px) {
    .atro-features-card-01 {
        padding: .5rem;
        margin: 0;
    }
}
@media (min-width: 1200px) {
    .atro-features-card-01 {
        padding: .75rem;
        margin: 0;
    }
}


/** home page card deck styles **/
.atro-features-card-200 {
    margin: .5rem 0;
    border-radius: 1rem;
    /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    /*box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);*/
}
@media (min-width: 576px) {
    .atro-features-card-200 {
        margin: 1rem 0;
    }
}
@media (min-width: 768px) {
    .atro-features-card-200 {
        margin: 1rem 0;
    }
}

.atro-features-badge-201 {
    width: 100%;
    transition: transform .5s;
    transition-timing-function: ease-in-out;
}
.atro-features-badge-201:hover {
    transform: rotate(360deg);
}


.atro-features-card-201 {
    border-bottom:solid 1px #bfbfbf;    
    border-radius: 1rem;
    background: #404040;    
    padding: 1.5rem;
    margin: 0;
}
@media (min-width: 576px) {
    .atro-features-card-201 {
        padding: 1.5rem;
        margin: 0;
    }
}
@media (min-width: 768px) {
    .atro-features-card-201 {
        padding: .5rem;
        margin: 0;
    }
}
@media (min-width: 992px) {
    .atro-features-card-201 {
        padding: .5rem;
        margin: 0;
    }
}
@media (min-width: 1200px) {
    .atro-features-card-201 {
        padding: .75rem;
        margin: 0;
    }
}

.atro-features-card-202 {
   
}
@media (min-width: 576px) {
    .atro-features-card-202 {

    }
}
@media (min-width: 768px) {
    .atro-features-card-202 {

    }
}
@media (min-width: 992px) {
    .atro-features-card-202 {

    }
}
@media (min-width: 1200px) {
    .atro-features-card-202 {

    }
}


h5.card-title.atro-features-card-203 {
    font-size:1.4rem;
}
@media (min-width: 576px) {
    .atro-features-card-203 {
    }
}
@media (min-width: 768px) {
    .atro-features-card-203 {
    }
}
@media (min-width: 992px) {
    .atro-features-card-203 {
    }
}
@media (min-width: 1200px) {
    .atro-features-card-203 {
    }
}


.eqp-vertical {    
}
@media (min-width: 576px) {
    .eqp-vertical {
    }
}
@media (min-width: 768px) {
    .eqp-vertical {
        display:none;
    }
}
@media (min-width: 992px) {
    .eqp-vertical {
        display: none;
    }
}
@media (min-width: 1200px) {
    .eqp-vertical {
        display:block;
    }
}


.eqp-horizontal {
    display:none;
}
@media (min-width: 576px) {
    .eqp-horizontal {
        display: none;
    }
}
@media (min-width: 768px) {
    .eqp-horizontal {
        display: block;
    }
}
@media (min-width: 992px) {
    .eqp-horizontal {
        display: block;
    }
}
@media (min-width: 1200px) {
    .eqp-horizontal {
        display: none;
    }
}


.atro-features-card-02 {
    color: #ffffff;
    background: #404040;
    text-align: center;
}
@media (min-width: 576px) {
    .atro-features-card-02 {
        color: #ffffff;
        background: #404040;
        text-align: center;
        min-height:18rem;
    }
}
@media (min-width: 768px) {
    .atro-features-card-02 {
        color: #ffffff;
        background: #404040;
        text-align: center;
        min-height:18rem;
    }
}
@media (min-width: 992px) {
    .atro-features-card-02 {
        color: #ffffff;
        background: #404040;
        text-align: center;
        min-height:18rem;
    }
}
@media (min-width: 1200px) {
    .atro-features-card-02 {
        color: #ffffff;
        text-align: center;
        min-height: 18rem;
        background: #404040;
    }
}


.marketing-section-content-01 { /**change to gray background 071423 was atro-gold-graph-01**/
    /*    background: linear-gradient(-90deg, rgba(158,133,51,.07) 1px, transparent 1px), linear-gradient(rgba(158,133,51,.07) 1px, transparent 1px), linear-gradient(-90deg, rgba(158,133,51, .06) 1px, transparent 1px), linear-gradient(rgba(158,133,51,.06) 1px, transparent 1px), linear-gradient(transparent 3px, #ffffff 3px, #ffffff 78px, transparent 78px), linear-gradient(-90deg, #ddd4b8 1px, transparent 1px), linear-gradient(-90deg, transparent 3px, #ffffff 3px, #ffffff 78px, transparent 78px), linear-gradient(#ddd4b8 1px, transparent 1px), #ffffff;
*/ background: linear-gradient(-90deg, rgba(128,128,128,.07) 1px, transparent 1px), linear-gradient(rgba(158,133,51,.07) 1px, transparent 1px), linear-gradient(-90deg, rgba(158,133,51, .06) 1px, transparent 1px), linear-gradient(rgba(158,133,51,.06) 1px, transparent 1px), linear-gradient(transparent 3px, #ffffff 3px, #ffffff 78px, transparent 78px), linear-gradient(-90deg, #ddd4b8 1px, transparent 1px), linear-gradient(-90deg, transparent 3px, #ffffff 3px, #ffffff 78px, transparent 78px), linear-gradient(#ddd4b8 1px, transparent 1px), #ffffff;
    background-size: 4px 4px, 4px 4px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px;
    /*background: #ffffff;*/
}

.fm-section-content-01 { /**change to gray background 071423 was atro-gold-graph-01**/
    background: linear-gradient(-90deg, rgba(128,128,128,.07) 1px, transparent 1px), linear-gradient(rgba(158,133,51,.07) 1px, transparent 1px), linear-gradient(-90deg, rgba(158,133,51, .06) 1px, transparent 1px), linear-gradient(rgba(158,133,51,.06) 1px, transparent 1px), linear-gradient(transparent 3px, #ffffff 3px, #ffffff 78px, transparent 78px), linear-gradient(-90deg, #ddd4b8 1px, transparent 1px), linear-gradient(-90deg, transparent 3px, #ffffff 3px, #ffffff 78px, transparent 78px), linear-gradient(#ddd4b8 1px, transparent 1px), #ffffff;
    background-size: 4px 4px, 4px 4px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px;
}

.section-content-02 {
    padding: 2rem;
    background: #ffffff;
    border-left: solid 1px #e6e6e6;
    border-right: solid 1px #e6e6e6;
}
@media (min-width: 1200px) {
    .section-content-02 {
        background: #ffffff;
        border: solid 1px #e6e6e6;
        margin-top: .5rem;
        margin-bottom: .5rem;
    }
}

.atrofm-section-content-02 {
    background: #ffffff;
    border-left: solid 1px #e6e6e6;
    border-right: solid 1px #e6e6e6;
}

.tech-docs-section-content-01 { /**change to gray background 071423 was atro-gold-graph-01**/
    background: linear-gradient(-90deg, rgba(128,128,128,.07) 1px, transparent 1px), linear-gradient(rgba(158,133,51,.07) 1px, transparent 1px), linear-gradient(-90deg, rgba(158,133,51, .06) 1px, transparent 1px), linear-gradient(rgba(158,133,51,.06) 1px, transparent 1px), linear-gradient(transparent 3px, #ffffff 3px, #ffffff 78px, transparent 78px), linear-gradient(-90deg, #ddd4b8 1px, transparent 1px), linear-gradient(-90deg, transparent 3px, #ffffff 3px, #ffffff 78px, transparent 78px), linear-gradient(#ddd4b8 1px, transparent 1px), #ffffff;
    background-size: 4px 4px, 4px 4px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px;
}

.atrotdocs-section-content-02 {
    background: #ffffff;
    border-left: solid 1px #e6e6e6;
    border-right: solid 1px #e6e6e6;
}

/** smd overwrite bootstrap container-fluid padding left and right 15px **/
.container-fluid {
    padding-right: 0;
    padding-left: 0;
}

/** utility container (top) **/

.header-utility li a {
    font-size:90%;
}

.utility-container-002 {
    padding: 0;
}

@media (max-width: 576px) {
    .utility-nav-link-01 {
        font-size: 75%;
        padding:.5rem .75rem;
    }
    .utility-icon {
        display:none;
    }
}
@media (min-width: 576px) {
    .utility-nav-link-01 {
    font-size: 80%;
    padding:.5rem 1.5rem .5rem 0;
    }
}

/** header container **/

.navbar-light .navbar-nav .nav-link {
    color:#2c337b;
}

.header-container {
    padding:.5rem 0 1rem 0;
    background:#ffffff;
}

.header-row-utility {
    background:#ffffff;
    padding:0 0;
    margin: 0 0 1rem 0;
}

.utility-left {
    float: left;
    padding:0 0 0 1rem;
}

.header-row-masthead {

}

.header-svg-logo {
    height: 5rem;
    margin:0 0 0 1.5rem;
}

.header-logo img {
    height: 5rem;
}

.nav-item-color {
    color:rgba(255,255,255,.5)
}


/** end header container **/

.hidden {
    display: none;
}

.bg-faded {
    background-color: rgba(187, 188, 188, 0.1);
}

.utility-nav-link-01 {
    color: #404040;
}

.utility-nav-link-01:hover {
    color: #00b4ff;
}

.atro-main-menu-01 {
}

@media (max-width: 576px) {
    .header-logo-02 {
        width: 60%;
        margin:0 0 0 0;
        padding:0 0 0 0;
    }
    .header-hambuger-01 {
        margin:0 0 0 0;
        padding:0 0 0 0;    
}
}
@media (min-width: 576px) {
    .header-logo-02 {
        width: 70%;
    }
}

@media (max-width: 991px) {
    .atro-mobile-menu-01 {
        border-top: solid 1px #bfbfbf;
        padding-top: 1rem;
        margin-top: 1rem;
    }
}

.search-container-001 {
    background-color:#333333;
}

.search-container-002 {
    background-color: #333333;
}

.search-form-001 {
    float:right;
    padding:.5rem 0 .5rem 0;
}

/** Customizing the size of the parts search for responsiveness.  */
.menuInput {
    width: 540px;
}

@media (max-width: 1360px) {
    .form-inline .form-control.menuInput {
        width: 400px;
    }
}

@media (max-width: 1282px) {
    .form-inline .form-control.menuInput {
        width: 270px;
    }
}



@media (min-width: 1361px) {

    .form-inline .form-control.menuInput {
        display: inline-block;
        width: 540px;
        vertical-align: middle;
    }
}

/*********************************************************************************************************/
/** page section containers **/

.section-content-202 {
    background: #36479d;
}

/**One Torque Rod Works Around The Clock**/
/**Custom Engineered for Your Success**/
/**Graph content and background**/
.graph-content-row-00 {
    padding: 5rem 1rem;
}
@media (min-width: 576px) {
    .graph-content-row-00 {
        padding: 8rem 2rem;
    }
}
@media (min-width: 768px) {
    .graph-content-row-00 {
        padding: 8rem 2rem;
    }
}
@media (min-width: 992px) {
    .graph-content-row-00 {
        padding: 8rem 2rem;
    }
}
@media (min-width: 1200px) {
    .graph-content-row-00 {
        padding: 8rem 2rem;
    }
}




.atro-gold-graph-01 {
    background: linear-gradient(-90deg, rgba(158,133,51,.07) 1px, transparent 1px), linear-gradient(rgba(158,133,51,.07) 1px, transparent 1px), linear-gradient(-90deg, rgba(158,133,51, .06) 1px, transparent 1px), linear-gradient(rgba(158,133,51,.06) 1px, transparent 1px), linear-gradient(transparent 3px, #ffffff 3px, #ffffff 78px, transparent 78px), linear-gradient(-90deg, #ddd4b8 1px, transparent 1px), linear-gradient(-90deg, transparent 3px, #ffffff 3px, #ffffff 78px, transparent 78px), linear-gradient(#ddd4b8 1px, transparent 1px), #ffffff;
    background-size: 4px 4px, 4px 4px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px;
}

.section-content-02-image-00 {
    margin:2rem 0 1rem 0;
    border-radius: 2rem;
    /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    /*box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);*/
}
@media (min-width: 576px) {
    ...
}

@media (min-width: 768px) {
    ...
}

@media (min-width: 992px) {
    ...
}

@media (min-width: 1200px) {
    ...
}




/**Graph background variations**/
/**Gold
background: linear-gradient(-90deg, rgba(158,133,51,.05) 1px, transparent 1px), linear-gradient(rgba(158,133,51,.05) 1px, transparent 1px), linear-gradient(-90deg, rgba(158,133,51, .04) 1px, transparent 1px), linear-gradient(rgba(158,133,51,.04) 1px, transparent 1px), linear-gradient(transparent 3px, #ffffff 3px, #ffffff 78px, transparent 78px), linear-gradient(-90deg, #ddd4b8 1px, transparent 1px), linear-gradient(-90deg, transparent 3px, #ffffff 3px, #ffffff 78px, transparent 78px), linear-gradient(#ddd4b8 1px, transparent 1px), #ffffff;
background-size: 4px 4px, 4px 4px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px;*/

/**Blue
background: linear-gradient(-90deg, rgba(0,0,255,.05) 1px, transparent 1px), linear-gradient(rgba(0,0,255,.05) 1px, transparent 1px), linear-gradient(-90deg, rgba(0, 0, 255, .04) 1px, transparent 1px), linear-gradient(rgba(0,0,255,.04) 1px, transparent 1px), linear-gradient(transparent 3px, #ffffff 3px, #ffffff 78px, transparent 78px), linear-gradient(-90deg, #aaa 1px, transparent 1px), linear-gradient(-90deg, transparent 3px, #ffffff 3px, #ffffff 78px, transparent 78px), linear-gradient(#aaa 1px, transparent 1px), #ffffff;
background-size: 4px 4px, 4px 4px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px;**/

/**Original CSS
background: linear-gradient(-90deg, rgba(0,0,0,.05) 1px, transparent 1px), linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px), linear-gradient(-90deg, rgba(0, 0, 0, .04) 1px, transparent 1px), linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px), linear-gradient(transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px), linear-gradient(-90deg, #aaa 1px, transparent 1px), linear-gradient(-90deg, transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px), linear-gradient(#aaa 1px, transparent 1px), #f2f2f2;
background-size: 4px 4px, 4px 4px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px;*
#eff2f2
#f2f6f6
**/


.section-content-201 {
    padding: 0.8rem 1.5rem;
    background: #36479d;
    border-top:.5px solid #6e6d6b;
}

.page-title-01 {
    font-size:1.1rem;    
    color:#ffffff;
    margin:0;
    padding:0;
}

.page-title-02 {
    color: #2c337b;
    font-size:1.8rem;
    font-weight:900;  
    border-bottom:solid 1px #bfbfbf;
    padding-bottom:.5rem;
    margin:1.5rem 0;
}

.section-body-01 {
}

.article-body-02 {
}

.article-header-01 {
}

/** this is original h1 style with border and margin
<h1 style="color:#2c337b;font-size:2.5rem;font-weight:900;letter-spacing:-.5px;border-bottom:solid 2px #bfbfbf;padding:0 0 .75rem 0;margin:4rem 0 2rem 0;">
**/
.article-body-02 div {
}


.article-body-02 h1 {
    color: #2c337b;
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: -.5px;
    margin: 1rem 0;
}
@media (min-width: 576px) {
    .article-body-02 h1 {
        color: #2c337b;
        font-size: 2.0rem;
        font-weight: 400;
        letter-spacing: -.5px;
        margin: 1.5rem 0;
    }
}
@media (min-width: 768px) {
    .article-body-02 h1 {
        color: #2c337b;
        font-size: 2.1rem;
        font-weight: 400;
        letter-spacing: -.5px;
        margin: 1.5rem 0;
    }
}
@media (min-width: 992px) {
    .article-body-02 h1 {
        color: #2c337b;
        font-size: 2.3rem;
        font-weight: 400;
        letter-spacing: -.5px;
        margin: 1rem 0 2rem 0;
    }
}
@media (min-width: 1200px) {
    .article-body-02 h1 {
        color: #2c337b;
        font-size: 2.3rem;
        font-weight: 400;
        letter-spacing: -.5px;
        margin: 1rem 0 2rem 0;
    }
}

.article-body-02 h2 {
    color: #2c337b;
    font-size: 2.1rem;
    font-weight: 400;
    letter-spacing: -.5px;
    margin: 3rem 0 2rem 0;
}

.article-body-02 h3 {
    color: #2c337b;
    font-size: 1.8rem;
}

.article-body-02 h4 {
    color: #2c337b;
    font-size: 1.5rem;
}

.article-body-02 h5 {
    color: #2c337b;
    font-size: 1.2rem;
    font-weight:900;
}

.article-body-02 p {
    color:#2c337b;
    font-size:.9rem;
    line-height:1.8;
}

.article-body-02 ul {
}

    .article-body-02 ul li {
        color: #404040;
        font-size: .9rem;
    }

.article-body-02 ul li a {
}

.atro-blue-right-arrow-01 {
}


/** footer containers **/
.footer-container-002 a {
    color: #bfbfbf;
}

@media (max-width: 576px) {
    .footer-logo {
        width: 35%;
        margin: 0 0 1rem 0;
    }
}
@media (min-width: 576px) {
    .footer-logo {
        width: 60%;
        margin: 0 0 1rem 0;
    }
}

.footer-column-1-container {
}

.footer-column-2-container {
}

.footer-column-3-container {
}

.footer-column-4-container {
}

.footer-badge-container-01 {
    padding:1.5rem;
}
@media (min-width: 576px) {
    .footer-badge-container-01 {
        padding: 1.5rem;
    }
}
@media (min-width: 768px) {
    .footer-badge-container-01 {
        padding:0;
    }
}
@media (min-width: 992px) {
    .footer-badge-container-01 {
        padding:0;
    }
}
@media (min-width: 1200px) {
    .footer-badge-container-01 {
        padding:1rem;
    }
}

.footer-badge-01 {
    width:100%;
}

.footer-container-001 {
    /*background: #2c337b;*/
    padding: 2rem 0;
    background: radial-gradient(circle, rgba(44,51,123,1) 0%, rgba(64,64,64,1) 100%);
}

.footer-container-002 {
    /*background: #2c337b;*/
    padding: 2rem;
}

.footer-container-003 {
    padding: 1rem 0;
    background: #404040;
    color: #bfbfbf;
}

.footer-container-004 {
    padding:0 1rem;
    text-align:center;
}

.copyright {
    color: #e6e6e6;
    font-size: 90%;
    line-height: 2;
}

/** video detail page **/

.atro-video-tab-content-01 {
    padding: 2rem;
    margin: 0 0 2rem 0;
    background: rgba(0,0,0,.025);
    border: solid 1px #e9ecef;
}

/** product detail page **/

.product-name-text-01 {
    font-size: 120%;
    font-weight: bold;
    color: #2c337b;
}

.product-photo-01 {
    padding: 1rem;
    margin:0 0 2rem 0;
    border: solid 1px #2c337b;
}

.product-photo-02 {
    max-width: 100%;
}

.product-order-container-01 {
    padding:0 1rem;
}

.order-quantity-label-01 {
    font-size: 110%;
    font-weight: bold;
    color: #9e8533;
}

.order-quantity-input-01 {
    width: 100%;
    padding:.5rem .5rem .5rem 0;
    border: solid 1px #2c337b;
    border-radius:.25rem;
    text-align: right;
    font-weight: bold;
    margin: 0;
}

.add-to-cart-01 {
    margin: 0;
    padding: 0 .25rem 0 .5rem;
}

.add-to-cart-02 {
    width: 100%;
    max-width: 100%;
    padding: .5rem;
}

.back-to-category-01 {
    margin: 0;
    padding: 0 .25rem;
}

.back-to-category-02 {
    width: 100%;
    max-width: 100%;
    padding: .5rem;
}

.print-product-page-01 {
    margin: 0;
    padding:0 .5rem 0 .25rem;
}

.print-product-page-02 {
    width: 100%;
    max-width: 100%;
    padding: .5rem;
}

.product-order-container-01 {
    margin:1rem 0 2rem 0;
}

.product-details-tab-01 {
}

.atro-product-tab-content-01 {
    padding: 2rem;
    margin: 0 0 2rem 0;
    background: rgba(0,0,0,.025);
    border: solid 1px #e9ecef;
}

.atro-account-summary-tab-content-01 {
    padding: 2rem;
    margin: 0 0 2rem 0;
    background: rgba(0,0,0,.025);
    border: solid 1px #e9ecef;
}

.parts-xref-label-01 {
    font-size: 120%;
    font-weight: bold;
    color: #2c337b;
}

.atro-xref-table-01 {
    font-size: 85%;
}

.product-xref-header-01 {
    color: #9e8533;
}

/** category grid page **/

.section-content-601 {
}

.ddl-select-make-202 {
    width:100%;
}

.ddl-select-model-302 {
    width: 100%;
}

.category-filters-heading-01 {
    font-weight: bold;
    color: #2c337b;
    border-bottom: solid 1px #6e6d6b;
}

.category-filters-radio-button-list-01 {
    font-size:90%;
    color: #9e8533;
    margin:0 0 .5rem .5rem;
}

.category-filters-radio-button-text-01 {
    margin:0 0 0 .5rem;
}

.select-mm-container-01 {
    background: rgba(191,191,191,.25);
    padding: 1rem;
    height: auto;
}

.select-make-201 {
margin:0 0 1rem 0;
}

select-model-301 {
margin:0 0 1rem 0;
}

.select-categories-container-01 {
    background: rgba(191,191,191,.1);
    padding: 1rem;
    height: auto;
}

.category-grid-heading-01 {
    background: rgba(191,191,191,.1);
    padding: 1rem;
    height: 4rem;
}

.category-filters-heading-02 {
    font-weight: bold;
    color: #2c337b;
}

.category-grid-container-102 {
    padding:1rem 0 0 0;
}

.category-grid-row {
    padding:1rem 0;
}

.category-grid-card-02 {
    margin:0 0 .5rem 0;
}

.category-grid-card-image {
    padding: .25rem;
}

.category-grid-card-body-01 {
    border-top: solid 1px #e6e6e6;
    background-color: rgba(191,191,191,.15);
    padding: .5rem;
}

.manufacturer-grid-card-01 {
    margin:0 0 1rem 0;
}

.manufacturer-grid-card-02 {
}

.manufacturer-grid-card-image-01 {
}

.manufacturer-grid-card-body-01 {
    border-top: solid 1px #e6e6e6;
    background-color: rgba(191,191,191,.15);
    padding: .5rem;
    text-align:center;
}

.manufacturer-grid-card-name-01 {
    font-weight: 400;
    color: #2c337b;
}

.category-grid-card-part-number-01 {
    font-weight: bold;
    color: #2c337b;
    border-bottom: solid 1px #6e6d6b;
}

.category-grid-card-part-name-01 {
    font-size: 80%;
}

.category-grid-card-part-price-01 {
    font-size: 80%;
}

.category-grid-card-view-details-btn-01 {
    font-size: 80%;
    width: 100%;
    margin: .5rem 0 0 0;
}

.category-grid-card-add-to-cart-btn-01 {
    font-size: 80%;
    width: 100%;
    padding:.25rem 0 .25rem 0;
    margin:.5rem 0 0 0;
    line-height:2;
}

.category-grid-card-add-qty-102 {
    border: solid 1px #e6e6e6;
    padding: .25rem;
    margin: .5rem 0 0 0;
    text-align: center;
    color: #404040;
    border-radius: .25rem;
}

.category-grid-card-add-to-order-102 {
    margin: 0 0 0 0;
    padding: 0 0 0 .25rem;
}


/** cart page **/

.cart-header-billto-01 {
    padding: 1rem;
    margin:0 0 .5rem 0;
}

.cart-enter-purchase-order-01 {
    background:#e6e6e6;
}

.cart-header-shipto-01 {
    padding: 1rem;
    margin: 0 0 .5rem 0;
}

.cart-header-select-shipping-method-01 {

}

.cart-header-select-shipping-method-02 {
    margin:1rem 0 .5rem 0;
}

.cart-enter-purchase-order-02 {
    background:#e6e6e6;
}

.ddl-cart-select-shipping-address-01 {
    width: 100%;
}

.cart-header-instructions-01 {

    margin: 0 0 2rem 0;
}

.cart-header-instructions-02 {
    padding: 1rem;
    border: solid 1px #bfbfbf;
    border-radius: .5rem;
}

.cart-enter-instructions-text-01 {
    background:#e6e6e6;
}

.cart-order-entry-grid-01 {
    margin: 3rem 0 0 0;
}

.cart-table-01 {
    font-size: 90%;
}

.cart-table-02 {
    font-size:90%;
}

.cart-table-03 {
    margin:1rem 0 0 0;
}

.cart-order-item-image-01 {
}

.cart-product-photo-04 {
    max-width: 4rem;
    padding: .25rem;
    border: solid 1px #bfbfbf;
    background: #ffffff;
}

.cart-order-item-number-01 {
}

.cart-order-item-name-01 {
}

.cart-order-item-price-01 {
    text-align: right;
}

.cart-order-item-price-extended-01 {
    text-align: right;
}

.cart-order-item-quantity-01 {
    font-weight: bold;
    text-align: center;
    padding: .25rem;
    border: solid 1px #bfbfbf;
    background: #ffffff;
}

.cart-order-item-remove-01 {
}

.cart-column-amount-header-01 {
    text-align:right;
}

.cart-subototal-amount-01 {
    text-align: right;
}

.cart-shipping-amount-01 {
    text-align:right;
}

.cart-sales-tax-amount-01 {
    text-align:right;
}

.cart-total-amount-01 {
    text-align:right;
    font-weight:bold;

    border: solid 1px #bfbfbf;
}

.manage-cart-continue-update-buttons-01 {
    float: right;
    margin: 0 0 2rem 0;
    padding: 0 0 0 0;
}

.manage-cart-checkout-buttons-01 {
    float: right;
    margin: 0 0 2rem 0;
}

.btn-continue-shopping-01 {
    margin:0 .5rem 0 0;
}

.btn-update-cart-01 {
    margin:0 0 0 .5rem;
}

.btn-checkout-cart-01 {
}

.btn-checkout-cart-02 {
    width:8rem;
}

/** login new account and password pages **/

.atro-login-buttons-01 {
    margin:0 1.25rem 0 .5rem 0;
}

/***************ATRO Savings Calculator*******************/
/** atro custom form controls **/

.atro-calculator-entry {
    background:rgba(255,255,0,.5) !important;
    text-align:center;
}

/*.atro-calculator-result {
    background: rgba(158,133,51,.8) !important;
    color: #ffffff;
}*/
.atro-calculator-result {
    background: #ffffff !important;
    color: #000000;
    border: solid 1px #bfbfbf;
    text-align: center;
}
/*.atro-calculator-total {
    background: rgba(44,51,123,.8) !important;
    color: #ffffff;
}*/
.atro-calculator-total {
    background: rgba(158,133,51,.8) !important;
    color: #ffffff;
    text-align: center;
}

.atro-calculator-step-number {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    padding: .5rem;
    background-color: #bfbfbf;
    color: #ffffff;
    border: solid 1px #bfbfbf;
    border-radius: 1rem;
}

.atro-calculator-header {
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    padding: .25rem;
    /*background-color: rgba(44,51,123,1.0);*/
    background-color: #bfbfbf;
    color: #ffffff;
    border: solid 1px #bfbfbf;
    border-radius: .5rem;
}

/******************************************************************/
/** fast overwrite bootstrap styles for components and utilities **/

.carousel-control-prev-icon {
    display:none;   
}
.carousel-control-next-icon {
    display: none;
}

.bg-dark {
    /*background-color: #2c337b !important;*/
    background: radial-gradient(circle, rgba(44,51,123,1) 0%, rgba(64,64,64,1) 100%) !important;
}

.table .thead-dark th {
    color: #ffffff;
    background-color: #2c337b;
    border-color: #2c337b;
}

.btn-primary {
    background-color: #2c337b;
    border-color: #2c337b;
}

.btn-primary:hover {
    background-color: #36479d;
}

.btn-success:hover {
    background-color: #9e8533;
    border-color: #9e8533;
}

.btn-success {
    background-color: #e42d13;
    border-color: #e42d13;
}

.add-to-cart-01 .btn-primary {
    background-color: #2c337b;
}

.add-to-cart-01 .btn-primary:hover {
    background-color: #36479d;
}

/******************************************/
/** Feature Content **/

.product-feature {
    width: 100%;
    border: 1px solid #bfbfbf;
    border-radius: 6px;
}

.product-feature-01 {
    margin: .5rem;
    padding: .5rem;
}

.product-feature-details {
    text-align: center;
}

/** Feature Columns **/

.atro-warranty-column-01 {
    background-color: #404040;
    padding: 2rem;
}
.atro-warranty-column-01 h4 {
    color:#ffffff;
}
.atro-warranty-column-01 p {
    color: #ffffff;
}

.atro-feature-column-01 {
    background-color: #404040;
    padding: 2rem;
}
.atro-feature-column-01 h4 {
    color: #ffffff;
}
.atro-feature-column-01 p {
    color: #ffffff;
}

/******************************************************************/
/** ATRO Field Manual Styles **/

/** Field Manual Navigation **/

.atrofm-prevnext-01 {
}

.atrofm-prevnext-02 {
    text-align: left;
}

.atrofm-prevnext-03 {
    text-align: right;
}

.atrofm-prevnext-prev-100 {
}

/*****************************************************/
/** Field Manual Typography **/
.atrofm-body-02 h1 {
    color: #bfbfbf;
    background-color: #640d00;
    padding: .5rem 0 .5rem 1rem;
}

/****************BBBB below new fm styles added by jim 011220**********************/
@media (max-width: 768px) {
    .atrofm-body-02 h1 {
        font-size: 1.3rem;
        padding:.5rem 1rem;
    }
    .atrofm-body-02 h2 {
        font-size: 1.3rem;
        margin:.5rem 0 .25rem 0;
    }
    .atrofm-body-02 h3 {
        font-size: 100%;
        margin: 1.5rem 0 1rem 0;
    }
    .atrofm-body-02 h4 {
        font-size: .9rem;
        margin: 1rem 0 .5rem 0;
    }
    .atrofm-body-02 h4 a {
        font-size: .9rem;
    }
    .atrofm-body-02 h5 {
        font-size: 70%;
    }
    h5.card-title {
    font-size:.8rem;
    }
    .atrofm-body-02 h6 {
        font-size: 1rem;
    }
    .atrofm-body-02 p {
        font-size: .8rem;
    }
    .atrofm-body-02 p a {
        font-size: .8rem;
    }
    .atrofm-body-02 a {
        font-size: 1rem;
    }
    .atrofm-body-02 ul {
        margin:0;
        padding:1rem;
    }
    .atrofm-body-02 ul li {
        font-size: 85%;
        color: #2c337b;
        margin: 0 0 .5rem 0;
    }
    .atrofm-body-02 ul li a {
        font-size: 85%;
    }
    .atrofm-body-02 li {
        font-size: 80%;
        color: #2c337b;
    }
    .atrofm-body-02 ol {
    }
    .atrofm-body-02 ol li {
        font-size: 70%;
        color: #2c337b;
    }
    .atrofm-body-02 li {
        font-size: 70%;
        color: #2c337b;
    }
    .atrofm-body-02 table {
    }
    .atrofm-body-02 .nav-link {
        padding: .5rem;
    }
    .atrofm-table-3001 {
        font-size:.7rem;    
    }
    .atrofm-table-3001 a {
        font-size: .7rem;
    }
    .atrofm-details-table-01 {
        font-size: .7rem;
    }
    .atrofm-details-table-01 a {
        font-size: .7rem;
    }
}
@media (min-width: 769px) AND (max-width: 1024px) {
    .atrofm-body-02 h1 {
        font-size: 1.3rem;
        padding: .5rem 1rem;
    }
    .atrofm-body-02 h2 {
        font-size: 1.3rem;
        margin: .5rem 0 .25rem 0;
    }
    .atrofm-body-02 h3 {
        font-size: 100%;
        margin: 1.5rem 0 1rem 0;
    }
    .atrofm-body-02 h4 {
        font-size: .9rem;
        margin: 1rem 0 .5rem 0;
    }
        .atrofm-body-02 h4 a {
            font-size: .9rem;
        }
    .atrofm-body-02 h5 {
        font-size: 70%;
    }
    h5.card-title {
        font-size: .8rem;
    }
    .atrofm-body-02 h6 {
        font-size: 1rem;
    }
    .atrofm-body-02 p {
        font-size: .8rem;
    }
        .atrofm-body-02 p a {
            font-size: .8rem;
        }
    .atrofm-body-02 a {
        font-size: 1rem;
    }
    .atrofm-body-02 ul {
        margin: 0;
        padding: 1rem;
    }
        .atrofm-body-02 ul li {
            font-size: .9rem;
            color: #2c337b;
            margin: 0 0 .5rem 0;
        }
            .atrofm-body-02 ul li a {
                font-size: .9rem;
            }
    .atrofm-body-02 li {
        font-size: .9rem;
        color: #2c337b;
    }
    .atrofm-body-02 ol {
    }
        .atrofm-body-02 ol li {
            font-size: .9rem;
            color: #2c337b;
        }
    .atrofm-body-02 li {
        font-size: .9rem;
        color: #2c337b;
    }
    .atrofm-body-02 table {
    }
    .atrofm-body-02 .nav-link {
        padding: .5rem;
    }
    .atrofm-table-3001 {
        font-size: .7rem;
    }
        .atrofm-table-3001 a {
            font-size: .7rem;
        }
    .atrofm-details-table-01 {
        font-size: .7rem;
    }
        .atrofm-details-table-01 a {
            font-size: .7rem;
        }
}
@media (min-width: 1025px) {
    .atrofm-body-02 h1 {
        font-size: 1.6rem;
        padding: .5rem 1rem;
    }
    .atrofm-body-02 h2 {
        font-size: 1.5rem;
        margin: .5rem 0 .25rem 0;
    }
    .atrofm-body-02 h3 {
        font-size: 1.3rem;
        margin: 1.5rem 0 1rem 0;
    }
    .atrofm-body-02 h4 {
        font-size: 1.2rem;
        margin: 1rem 0 .5rem 0;
    }
        .atrofm-body-02 h4 a {
            font-size: 1.2rem;
        }
    .atrofm-body-02 h5 {
        font-size: 1.1rem;
    }
    h5.card-title {
        font-size: 1.1rem;
    }
    .atrofm-body-02 h6 {
        font-size: 1rem;
    }
    .atrofm-body-02 p {
        font-size: 1rem;
    }
        .atrofm-body-02 p a {
            font-size: 1rem;
        }
    .atrofm-body-02 a {
        font-size: 1rem;
    }
    .atrofm-body-02 ul {
        margin: 0;
        padding: 1rem;
    }
        .atrofm-body-02 ul li {
            font-size: .9rem;
            color: #2c337b;
            margin: 0 0 .5rem 0;
        }
            .atrofm-body-02 ul li a {
                font-size: .9rem;
            }
    .atrofm-body-02 li {
        font-size: .9rem;
        color: #2c337b;
    }
    .atrofm-body-02 ol {
    }
        .atrofm-body-02 ol li {
            font-size: .9rem;
            color: #2c337b;
        }
    .atrofm-body-02 li {
        font-size: .9rem;
        color: #2c337b;
    }
    .atrofm-body-02 table {
    }
    .atrofm-body-02 .nav-link {
        padding: .5rem;
    }
    .atrofm-table-3001 {
        font-size: .8rem;
    }
        .atrofm-table-3001 a {
            font-size: .8rem;
        }
    .atrofm-details-table-01 {
        font-size: .7rem;
    }
        .atrofm-details-table-01 a {
            font-size: .8rem;
        }    
}
/****************BBBB above new fm styles added by jim 011220**********************/

/** Field Manual Cards **/
.atrofm-card-body-01 {
    background: #e6e6e6;
}

.atrofm-card-01 {
    margin: 0 0 1rem 0;
}

.atrofm-card-image-01 {
    padding: 1rem;
}

.atrofm-card-image-201 {
    padding: 0;
}

/** Field Manual Tables **/

.atrofm-details-table-01 {
    margin:2rem 0;
    width:100%
}

.atrofm-td001 {
    font-weight: 900;
    white-space: nowrap;
}


/**************************************************/
/** ATRO TDocs Typography **/

.atrotdocs-body-02 h1 {
    color: #2c337b;
    margin-bottom: 1.5rem;
    /*padding: .5rem 0 .5rem 0rem;*/
    font-size: 2.3rem;
}

@media (max-width: 768px) {
    .atrotdocs-body-02 h1 {
        font-size: 1.8rem;
    }
    .atrotdocs-body-02 h2 {
        font-size: 100%;
    }
    .atrotdocs-body-02 h3 {
        font-size: 100%;
    }
    .atrotdocs-body-02 h4 {
        font-size: 70%;
    }
    .atrotdocs-body-02 h5 {
        font-size: 70%;
    }
    .atrotdocs-body-02 h6 {
        font-size: 70%;
    }
    .atrotdocs-body-02 p {
        font-size: 70%;
    }
    .atrotdocs-body-02 a {
        font-size: 70%;
    }
    .atrotdocs-body-02 ul {
    }
    .atrotdocs-body-02 ul li {
        font-size: 85%;
        color: #2c337b;
    }
    .atrotdocs-body-02 li {
        /*changed to fix nested lists 7/25/2025*/
        /*font-size: 80%;*/
        font-size: .8rem;
        color: #2c337b;
    }
    .atrotdocs-body-02 ol {
    }
    .atrotdocs-body-02 ol li {
        /*changed to fix nested lists 7/25/2025*/
        /*font-size: 70%;*/
        font-size: .7rem;
        color: #2c337b;
    }
    .atrotdocs-body-02 li {
        /*changed to fix nested lists 7/25/2025*/
        /*font-size: 70%;*/
        font-size: .7rem;
        color: #2c337b;
    }
    .atrotdocs-body-02 table {
    }
    .atrotdocs-body-02 .nav-link {
        padding: .5rem;
    }
    .tdocs-reference-thumbnail {
        width: 70%;
        border: solid 1px #e6e6e6;
    }
    .view-as-pdf {
        font-size: 2rem;
    }
    h4.techdocwarning {
        text-transform: uppercase;
        color: #e42d13;
        margin: .5rem 0 0 0;
    }
}

@media (min-width: 769px) AND (max-width: 1024px) {
    .atrotdocs-body-02 h1 {
        font-size: 2.1rem;
    }
    .atrotdocs-body-02 h2 {
        font-size: 115%;
    }
    .atrotdocs-body-02 h3 {
        font-size: 100%;
    }
    .atrotdocs-body-02 h4 {
        font-size: 80%;
    }
    .atrotdocs-body-02 h5 {
        font-size: 80%;
    }
    .atrotdocs-body-02 h6 {
        font-size: 80%;
    }
    .atrotdocs-body-02 p {
        font-size: 80%;
    }
    .atrotdocs-body-02 a {
        font-size: 80%;
    }
    .atrotdocs-body-02 li {
        /*changed to fix nested lists 7/25/2025*/
        /*font-size: 80%;*/
        font-size: .8rem;
        color: #2c337b;
    }
    .atrotdocs-body-02 table {
    }
    .atrotdocs-body-02 .nav-link {
        padding: .5rem;
    }
    .tdocs-reference-thumbnail {
        width: 50%;
        border: solid 1px #e6e6e6;
    }
    h4.techdocwarning {
        text-transform: uppercase;
        color: #e42d13;
        margin: .5rem 0 0 0;
    }
}

@media (min-width: 1025px) {
    .atrotdocs-body-02 h1 {
        font-size: 2.3rem;
    }
    .atrotdocs-body-02 h2 {
        font-size: 150%;
    }
    .atrotdocs-body-02 h3 {
        font-size: 125%;
    }
    .atrotdocs-body-02 h4 {
        font-size: 90%;
    }
    .atrotdocs-body-02 h5 {
        font-size: 90%;
    }
    .atrotdocs-body-02 h6 {
        font-size: 90%;
    }
    .atrotdocs-body-02 p {
        font-size: 90%;
    }
    .atrotdocs-body-02 a {
        font-size: 90%;
    }
    .atrotdocs-body-02 li {
        /*changed to fix nested lists 7/25/2025*/
        /*font-size: 90%;*/
        font-size: .9rem;
        color: #2c337b;
    }
    .atrotdocs-body-02 table {
    }
    .atrotdocs-body-02 .nav-link {
        padding: .5rem;
    }
    .tdocs-reference-thumbnail {
        width: 50%;
        border: solid 1px #e6e6e6;
    }
    h4.techdocwarning {
        text-transform: uppercase;
        color: #e42d13;
        margin: .5rem 0;
    }
}

.tdocs-vtabs-image-01 h3 {
    font-size: 1.4rem;
}

.tdocs-vtabs-image-01 h4 {
    font-size: 1.2rem;
}

.tdocs-vtabs-image-01 h5 {
    font-size: 1.0rem;
}

/** ATRO TDocs Cards **/
.atrotdocs-card-body-01 {
    background: #e6e6e6;
}

.atrotdocs-card-01 {
    margin: 0 0 1rem 0;
}

.atrotdocs-card-image-01 {
    padding: 1rem;
}

.atrotdocs-card-image-201 {
    padding: 0;
}

/** ATRO TDocs Tables **/

.atrotdocs-td001 {
    font-weight: 900;
    white-space: nowrap;
}


/***************************************/
/** ATRO Product List Filter Styles**/

.atro-product-list-filters-00 label {
    margin:0 0 0 .5rem;
}

.atro-filter-button-01 {
    width: 100%;
    margin: 0 0 .5rem 0;
}

.atro-category-filter-divider-00 {
    border-top: solid 1px #e6e6e6;
    padding: .25rem;
}

.atro-category-filter-divider-01 {
    border-top: solid 1px #e6e6e6;
    padding: .25rem;
}

/**************************************/
/** ATRO Torque Rod Finder Styles **/

.trf-stage-1-image {
    padding:2rem 1rem 1rem 1rem;
}

.trf-stage-1-card-bottom {
    background:#e6e6e6;
}


/**************************************/

.btn-invoice {
    color: #FFFFFF;
    background-color: #FF6B00;
    border-color: #FFC8A1;
}

    .btn-invoice:hover,
    .btn-invoice:focus,
    .btn-invoice:active,
    .btn-invoice.active,
    .open .dropdown-toggle.btn-invoice {
        color: #FFFFFF;
        background-color: #FF6B00;
        border-color: #FFC8A1;
    }

    .btn-invoice:active,
    .btn-invoice.active,
    .open .dropdown-toggle.btn-invoice {
        background-image: none;
    }

    .btn-invoice.disabled,
    .btn-invoice[disabled],
    fieldset[disabled] .btn-invoice,
    .btn-invoice.disabled:hover,
    .btn-invoice[disabled]:hover,
    fieldset[disabled] .btn-invoice:hover,
    .btn-invoice.disabled:focus,
    .btn-invoice[disabled]:focus,
    fieldset[disabled] .btn-invoice:focus,
    .btn-invoice.disabled:active,
    .btn-invoice[disabled]:active,
    fieldset[disabled] .btn-invoice:active,
    .btn-invoice.disabled.active,
    .btn-invoice[disabled].active,
    fieldset[disabled] .btn-invoice.active {
        background-color: #FF6B00;
        border-color: #FFC8A1;
    }

    .btn-invoice .badge {
        color: #FF6B00;
        background-color: #FFFFFF;
    }

/********************************************************/
/***** Field Manual and Support Documents styles *******/

.atro-item-code-link {
    white-space:nowrap;
    hyphens:none;
    color:yellow;
}

.atro-fm-info-01 {
    line-height:1.5;
}
.atro-fm-image-01 {
    width:100%;
    border:solid 1px #bfbfbf;
}
/********************************************************/
/***** Mobile Tables *******/
.mobile-tables-01 {
    font-size: 55%;
}
@media (min-width: 576px) {
    .mobile-tables-01 {
        font-size: 55%;
    }
}
@media (min-width: 768px) {
    .mobile-tables-01 {
        font-size: 55%;
    }
}
@media (min-width: 992px) {
    .mobile-tables-01 {
        font-size: 75%;
    }
}
@media (min-width: 1200px) {
    .mobile-tables-01 {
        font-size: 100%;
    }
}

/********************************************************/
/***** Exact Cross / Near Cross Marker Styles *******/

.exactCross-001 {
    text-align: center;
    background: #36479d;
    color: #ade10a;
    padding: .25rem .5rem;
    margin: .5rem 1rem 0 1rem;
    border-radius: .25rem;
    font-size: 90%;
}

.nearCross-001 {
    text-align: center;
    background: #404040;
    color: #e6e6e6;
    padding: .25rem .5rem;
    margin: .5rem 1rem 0 1rem;
    border-radius: .25rem;
    font-size:90%
}

/**
ATRO Blue #2c337b;
ATRO Gold #9e8533;
ATRO High Temp #e42d13;


Light Blue #36479d;
Maroon #640d00;
Dark Gold #514219;
Grass# 3b4b10;
Silver #bfbfbf;
Steel #6e6d6b;
Dark Gray #404040;
Earth #714502;

Lime #ade10a
Lime 25% #eaf7c2
Sky Blue #00b4ff
Orange Peel #ffa000
Orange Peel 15% fff1d9
**/

.exactNear-001 {
    padding-right: 0;
}
/********************************************************/
/***** (CSTP) CS Team Portal Styles *******/
.cstp-container-01 {
    padding: 2rem 2rem 6rem 2rem;
}

/********************************************************/
/***** (CA)CA Account Overview Styles *******/

.ca-container-01 {
    padding: 2rem 2rem 6rem 2rem;
}

/********************************************************/
/***** Marketing Center Styles *******/

.navbar-mc-01 {
    border-radius: 1rem;
}

.mc-news-and-updates-01 {
    padding:3rem 2rem;
}

.mc-section-header-01 {
    margin-right: 0;
    margin-left: 0;
    padding: 4rem 0;
}

.mc-section-header-02 {
    margin-right: 0;
    margin-left: 0;
    padding: 1rem 0;
}

.mc-section-header-03 {
    background: #404040;
    opacity:0.85;
    padding: 1rem 1.5rem;
    font-style: italic;
    font-weight: 700;
    font-size: 1.4rem;
    color: #ffffff;
    border-radius: 1rem;
    width:100%;
}

.mc-card-row-01 {
    margin-right:0;
    margin-left:0;
    padding:0 1rem;
}

.mc-card-row-02 {
    margin-right: 0;
    margin-left: 0;
    padding: 0 1rem;
}

.mc-container-01 {
    padding:2rem 2rem 6rem 2rem;
}


.mc-container-02 {
    padding-top:1rem 0 2rem 0;
}

/*******************************************************/
/***************Category Page Styles********************/

.category-nav-00 {
}
.category-nav-01 {
}
.category-nav-02 {
}
.category-nav-03 {
}
.category-nav-04 {
}

/**category page back to top**/

.btt-00 {
}

.btt-01 {
}

.btt-02 {
}

.btt-03 {
}

.btt-button-00 {
    color: #ffffff;
    background: #bfbfbf;
    font-size: .9rem;
}

.btt-position-00 {
    margin:1rem 0;
}

.btt-alignment-00 {
}

/**home page small screen back to top (reverse on dark background) **/

.btt-100 {
}

.btt-101 {
}

.btt-102 {
}

.btt-103 {
}

.btt-button-100 {
    color: #bfbfbf;
    background: transparent;
    border: solid 1px #bfbfbf;
    font-size: .9rem;
}

.btt-position-100 {
    margin: 2rem 0 0 0;
}

.btt-alignment-100 {

}

/**home page small screen back to top (standard on light background) **/

.btt-200 {
}

.btt-201 {
}

.btt-202 {
}

.btt-203 {
}

.btt-button-200 {
    color: #bfbfbf;
    background: transparent;
    border: solid 1px #bfbfbf;
    font-size: .9rem;
}

.btt-position-200 {
    margin: 2rem 0 0 0;
}

.btt-alignment-200 {
}

/************************************************************************/
/** Get FIT page styles below **/

.atro-get-fit-row-00 {
    padding:2rem 1rem;
}
@media (min-width: 576px) {
    .atro-get-fit-row-00 {
        padding: 2rem 1rem;
    }
}
@media (min-width: 768px) {
    .atro-get-fit-row-00 {
        padding: 6rem 2rem 2rem 2rem;
    }
}
@media (min-width: 992px) {
    .atro-get-fit-row-00 {
        padding: 6rem 2rem 2rem 2rem;
    }
}
@media (min-width: 1200px) {
    .atro-get-fit-row-00 {
        padding: 6rem 2rem 2rem 2rem;
    }
}

.container.get-fit-container-00 {
    padding-right:0;
    padding-left:0;
}
@media (min-width: 576px) {
    .container.get-fit-container-00 {
        padding-right: 0;
        padding-left: 0;
    }
}
@media (min-width: 768px) {
    .container.get-fit-container-00 {
        padding-right: 15px;
        padding-left: 15px;
    }
}
@media (min-width: 992px) {
    .container.get-fit-container-00 {
        padding-right: 15px;
        padding-left: 15px;
    }
}


.atro-get-fit-row-caption-01 {
    padding: 2rem .5rem;
}
@media (min-width: 576px) {
    .atro-get-fit-row-caption-01 {
        padding: 2rem .5rem;
    }
}
@media (min-width: 768px) {
    .atro-get-fit-row-caption-01 {
        padding: 1.5rem;
    }
}
@media (min-width: 992px) {
    .atro-get-fit-row-caption-01 {
        padding: 1.5rem;
    }
}
@media (min-width: 1200px) {
    .atro-get-fit-row-caption-01 {
        padding: 1.5rem;
    }
}


.atro-get-fit-row-image-00 {
    padding: 0;
    background: #404040;
    border: solid 1px #6e6d6b;
    border-radius: 2rem;
}
@media (min-width: 576px) {
    ...
}
@media (min-width: 768px) {
    ...
}
@media (min-width: 992px) {
    ...
}

@media (min-width: 1200px) {
    .atro-get-fit-row-image-00 {
        /* min-width: 570px; */
        /* min-height: 475px; */
    }
}

.get-fit-video-background {
    background-image: url('../../assets/graphics/ATRO-get-fit-row-blank-301.jpg');
}

.atro-get-fit-row-image-01 {
    width: 100%;
    border-radius: 2rem;
}
@media (min-width: 576px) {
    .atro-get-fit-row-image-01 {
        border-radius: 2rem;
    }
}
@media (min-width: 768px) {
    .atro-get-fit-row-image-01 {
        border-radius: 2rem;
    }
}
@media (min-width: 992px) {
    .atro-get-fit-row-image-01 {
        border-radius: 2rem;
    }
}
@media (min-width: 1200px) {
    .atro-get-fit-row-image-01 {
        border-radius: 2rem;
    }
}

/** use this for full color image that needs a background gray border**/
.atro-get-fit-row-image-02 {
    width: 100%;
    padding: .25rem;
    border-radius: 2rem;
}
@media (min-width: 576px) {
    .atro-get-fit-row-image-02 {
        padding: .25rem;
        border-radius: 2rem;
    }
}
@media (min-width: 768px) {
    .atro-get-fit-row-image-02 {
        padding: .25rem;
        border-radius: 2rem;
    }
}
@media (min-width: 992px) {
    .atro-get-fit-row-image-02 {
        padding: .25rem;
        border-radius: 2rem;
    }
}
@media (min-width: 1200px) {
    .atro-get-fit-row-image-02 {
        padding: .25rem;
        border-radius: 2rem;
    }
}

.atro-get-fit-row-first {
    /*padding: 2rem 1rem;*/
    padding:1rem;
}
@media (min-width: 576px) {
    .atro-get-fit-row-first {
        padding: 6rem 2rem 2rem 2rem;
    }
}
@media (min-width: 768px) {
    .atro-get-fit-row-first {
        padding: 2rem;
    }
}
@media (min-width: 992px) {
    .atro-get-fit-row-first {
        padding: 4rem 0 2rem 0;
    }
}
@media (min-width: 1200px) {
    .atro-get-fit-row-first {
        padding: 8rem 0 2rem 0;
    }
}

.atro-get-fit-row-mid {
    /*padding: 4rem 2rem 2rem 2rem;*/
    padding: 1rem;
}
@media (min-width: 576px) {
    .atro-get-fit-row-mid {
        padding: 4rem 2rem 2rem 2rem;
    }
}
@media (min-width: 768px) {
    .atro-get-fit-row-mid {
        padding: 1rem 2rem 1rem 2rem;
    }
}
@media (min-width: 992px) {
    .atro-get-fit-row-mid {
        padding: 2rem 0;
    }
}
@media (min-width: 1200px) {
    .atro-get-fit-row-mid {
        padding: 2rem 0;
    }
}

.atro-get-fit-row-last {
    /*padding: 4rem 2rem;*/
    padding: 1rem;
}

@media (min-width: 576px) {
    .atro-get-fit-row-last {
        padding: 4rem 2rem;
    }
}
@media (min-width: 768px) {
    .atro-get-fit-row-last {
        padding: 2rem 2rem;
    }
}
@media (min-width: 992px) {
    .atro-get-fit-row-last {
        padding: 2rem 0 8rem 0;
    }
}
@media (min-width: 1200px) {
    .atro-get-fit-row-last {
        padding: 2rem 0 8rem 0;
    }
}


.atro-get-fit-headline-01 {
    background: #2c337b;
    padding: .5rem 1rem;
    margin: 0 0 1rem 0;
    color: #9e8533;
}
@media (max-width: 374px) {
    .atro-get-fit-headline-01 {
        font-size: 1.3rem;
        line-height: 1.1;
    }
}
@media (min-width: 375px) and (max-width: 575px) {
    .atro-get-fit-headline-01 {
        font-size: 1.7rem;
        line-height: 1.1;
    }
}
@media (min-width: 576px) {
    .atro-get-fit-headline-01 {
        font-size: 1.8rem;
        line-height: 1.0;
    }
}
@media (min-width: 768px) {
    .atro-get-fit-headline-01 {
        font-size: 1.9rem;
        line-height: 1.1;
    }
}
@media (min-width: 992px) {
    .atro-get-fit-headline-01 {
        font-size: 2.0rem;
        line-height: 1.1;
    }
}
@media (min-width: 1200px) {
    .atro-get-fit-headline-01 {
        font-size: 2.1rem;
        line-height: 1.1;
    }
}

@media (max-width: 374px) {
    .atro-get-fit-headline-02 {
        font-size: 1.5rem !important;
        line-height: 1.2;
    }
}
@media (min-width: 375px) and (max-width: 575px) {
    .atro-get-fit-headline-02 {
        font-size: 1.8rem !important;
        line-height: 1.2;
    }
}
@media (min-width: 576px) {
    .atro-get-fit-headline-02 {
        font-size: 1.9rem !important;
        line-height: 1.2;
    }
}
@media (min-width: 768px) {
    .atro-get-fit-headline-02 {
        font-size: 2.0rem !important;
        line-height: 1.2;
    }
}
@media (min-width: 992px) {
    .atro-get-fit-headline-02 {
        font-size: 2.1rem !important;
        line-height: 1.2;
    }
}
@media (min-width: 1200px) {
    .atro-get-fit-headline-02 {
        font-size: 2.2rem !important;
        line-height: 1.2;
    }
}


.atro-get-fit-headline-03 {
    color: #9e8533;
    font-size: 2.6rem !important;
    text-align: center;
    line-height: 1.0;
    margin: 0 0 2rem 0;
}
@media (min-width: 576px) {
    .atro-get-fit-headline-03 {
        font-size: 2.6rem !important;
        line-height: 1.2;
        margin: 0 0 2rem 0;
    }
}
@media (min-width: 768px) {
    .atro-get-fit-headline-03 {
        font-size: 2.6rem !important;
        line-height: 1.2;
        margin: 0 0 2rem 0;
    }
}
@media (min-width: 992px) {
    .atro-get-fit-headline-03 {
        font-size: 2.6rem !important;
        line-height: 1.2;
        margin: 0 0 2rem 0;
    }
}
@media (min-width: 1200px) {
    .atro-get-fit-headline-03 {
        font-size: 3rem !important;
        font-weight: 700;
        line-height: 1.0;
        margin: 0 0 2rem 0;
    }
}


.get-fit-headline-04 {
    color: #404040;
    text-align: center;
}
@media (min-width: 576px) {
    ...
}
@media (min-width: 768px) {
    ...
}
@media (min-width: 992px) {
    ...
}
@media (min-width: 1200px) {
    ...
}


.get-fit-headline-ctas-00 {
    text-align: center;
    padding: 1rem 0 0 0;
}
@media (min-width: 576px) {
    ...
}
@media (min-width: 768px) {
    ...
}
@media (min-width: 992px) {
    ...
}
@media (min-width: 1200px) {
    ...
}

.btt-03 {
    margin: 0 auto;
}

h3.get-fit-row-headline-01 {
    font-weight: 400;
    font-size: 1.4rem;
}
@media (min-width: 576px) {
    h3.get-fit-row-headline-01 {
        font-weight: 400;
        font-size: 1.4rem;
    }
}
@media (min-width: 768px) {
    h3.get-fit-row-headline-01 {
        font-weight: 400;
        font-size: 2rem;
    }
}
@media (min-width: 992px) {
    h3.get-fit-row-headline-01 {
        font-weight: 400;
        font-size: 2rem;
    }
}
@media (min-width: 1200px) {
    h3.get-fit-row-headline-01 {
        font-weight: 400;
        font-size: 2rem;
    }
}

h4.get-fit-row-text-02 {
    font-weight:400;
    font-size:1.2rem;
}
@media (min-width: 576px) {
    h4.get-fit-row-text-02 {
        font-size: 1.2rem;
    }
}
@media (min-width: 768px) {
    h4.get-fit-row-text-02 {
        font-size: 1.5rem;
    }
}
@media (min-width: 992px) {
    h4.get-fit-row-text-02 {
        font-size: 1.5rem;
    }
}
@media (min-width: 1200px) {
    h4.get-fit-row-text-02 {
        font-size: 1.5rem;
    }
}

.get-fit-ul-100 {
    font-size: .9rem;
    margin-top: -.5rem;
    padding-left:1rem;
}
@media (min-width: 576px) {
    .get-fit-ul-100 {
        font-size: .9rem;
        margin-top: -.5rem;
        padding-left: 1rem;
    }
}
@media (min-width: 768px) {
    .get-fit-ul-100 {
        font-size: 1.1rem;
        margin-top: -.5rem;
        padding-left: 1rem;
    }
}
@media (min-width: 992px) {
    .get-fit-ul-100 {
        font-size: 1.1rem;
        margin-top: -.5rem;
        padding-left: 1rem;
    }
}
@media (min-width: 1200px) {
    .get-fit-ul-100 {
        font-size: 1.1rem;
        margin-top: -.5rem;
        padding-left: 1rem;
    }
}


h1.get-fit-h1 {
}

h2.get-fit-h2 {
    font-size:1.6rem;
}
@media (min-width: 576px) {
    h2.get-fit-h2 {
        font-size: 1.6rem;
    }
}

@media (min-width: 768px) {
    h2.get-fit-h2 {
        font-size: 1.6rem;
    }
}

@media (min-width: 992px) {
    h2.get-fit-h2 {
        font-size: 2.1rem;
    }
}

@media (min-width: 1200px) {
    h2.get-fit-h2 {
        font-size: 2.1rem;
    }
}

.get-fit-card-group-100 {
}

.get-fit-card-101 {
}

.get-fit-image-102 {
}

.get-fit-card-body-103 {
    padding: 2rem 1.5rem;
}

h5.get-fit-card-title-104 {
    font-size: 1.2rem;
}
@media (min-width: 576px) {
    h5.get-fit-card-title-104 {
        font-size: 1.2rem;
    }
}
@media (min-width: 768px) {
    h5.get-fit-card-title-104 {
        font-size: 1.2rem;
    }
}
@media (min-width: 992px) {
    h5.get-fit-card-title-104 {
        font-size: 1.2rem;
    }
}
@media (min-width: 1200px) {
    h5.get-fit-card-title-104 {
        font-size: 1.2rem;
    }
}


.card-text.get-fit-card-text-105 {
    color: #404040;
    font-size: .85rem;
    line-height: 1.4;
}
@media (min-width: 576px) {
    .card-text.get-fit-card-text-105 {
        font-size: .85rem;
        line-height: 1.4;
    }
}
@media (min-width: 768px) {
    .card-text.get-fit-card-text-105 {
        font-size: .85rem;
        line-height: 1.4;
    }
}
@media (min-width: 992px) {
    .card-text.get-fit-card-text-105 {
        font-size: .85rem;
        line-height: 1.4;
    }
}
@media (min-width: 1200px) {
    .card-text.get-fit-card-text-105 {
        font-size: .85rem;
        line-height: 1.4;
    }
}


.get-fit-card-00 {
    border: none;
}
@media (min-width: 576px) {
    .get-fit-card-00 {
        border: none;
    }
}
@media (min-width: 768px) {
    .get-fit-card-00 {
        border: none;
    }
}
@media (min-width: 992px) {
    .get-fit-card-00 {
        border: 1px solid rgba(0,0,0,.125);
    }
}


.get-fit-image-01 {
    width: 100%;
    border: none;
}
@media (min-width: 576px) {
    .get-fit-image-01 {
        width: 100%;
        border: none;
    }
}
@media (min-width: 768px) {
    .get-fit-image-01 {
        width: 100%;
        border: solid #bfbfbf .5px;
    }
}
@media (min-width: 992px) {
    .get-fit-image-01 {
        width: 100%;
        border: solid #bfbfbf .5px;
    }
}
@media (min-width: 1200px) {
    .get-fit-image-01 {
        width: 100%;
        border: solid #bfbfbf .5px;
    }
}

.atro-fit-tips-container {
    background: linear-gradient(-90deg, rgba(0,0,255,.05) 1px, transparent 1px), linear-gradient(rgba(0,0,255,.05) 1px, transparent 1px), linear-gradient(-90deg, rgba(0, 0, 255, .04) 1px, transparent 1px), linear-gradient(rgba(0,0,255,.04) 1px, transparent 1px), linear-gradient(transparent 3px, #ffffff 3px, #ffffff 78px, transparent 78px), linear-gradient(-90deg, #aaa 1px, transparent 1px), linear-gradient(-90deg, transparent 3px, #ffffff 3px, #ffffff 78px, transparent 78px), linear-gradient(#aaa 1px, transparent 1px), #ffffff;
    background-size: 4px 4px, 4px 4px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px;
}

.get-fit-section-block-00 {
    background: #2c337b;
}

h2.get-fit-section-header-00 {
    color: #ffffff;
    font-size: 1.6rem;
}
@media (min-width: 576px) {
    h2.get-fit-section-header-00 {
        color: #ffffff;
        font-size: 1.6rem;
    }
}
@media (min-width: 768px) {
    h2.get-fit-section-header-00 {
        color: #ffffff;
        font-size: 1.8rem;
    }
}
@media (min-width: 992px) {
    h2.get-fit-section-header-00 {
        color: #ffffff;
        font-size: 2.1em;
    }
}
@media (min-width: 1200px) {
    h2.get-fit-section-header-00 {
        color: #ffffff;
        font-size: 2.1rem;
    }
}

h3.get-fit-section-header-01 {
    color: #ade10a;
    font-size: 1.4rem;
}
@media (min-width: 576px) {
    h3.get-fit-section-header-01 {
        color: #ade10a;
        font-size: 1.4rem;
    }
}
@media (min-width: 768px) {
    h3.get-fit-section-header-01 {
        color: #ade10a;
        font-size: 1.6rem;
    }
}
@media (min-width: 992px) {
    h3.get-fit-section-header-01 {
        color: #ade10a;
        font-size: 1.8rem;
    }
}
@media (min-width: 1200px) {
    h3.get-fit-section-header-01 {
        color: #ade10a;
        font-size: 1.8rem;
    }
}

h2.get-fit-section-header-100 {
    font-size: 1.6rem;
}
@media (min-width: 576px) {
    h2.get-fit-section-header-100 {
        font-size: 1.6rem;
    }
}
@media (min-width: 768px) {
    h2.get-fit-section-header-100 {
        font-size: 1.8rem;
    }
}
@media (min-width: 992px) {
    h2.get-fit-section-header-100 {
        font-size: 2.1rem;
    }
}
@media (min-width: 1200px) {
    h2.get-fit-section-header-100 {
        font-size: 2.1rem;
    }
}

h3.get-fit-section-header-101 {
    font-size: 1.4rem;
}
@media (min-width: 576px) {
    h3.get-fit-section-header-101 {
        font-size: 1.4rem;
    }
}
@media (min-width: 768px) {
    h3.get-fit-section-header-101 {
        font-size: 1.6rem;
    }
}
@media (min-width: 992px) {
    h3.get-fit-section-header-101 {
        font-size: 1.8rem;
    }
}
@media (min-width: 1200px) {
    h3.get-fit-section-header-101 {
        font-size: 1.8rem;
    }
}

.atro-get-fit-text-wrapper-00 {
    text-align: center;
}
@media (min-width: 576px) {
    ...
}
@media (min-width: 768px) {
    ...
}
@media (min-width: 992px) {
    ...
}
@media (min-width: 1200px) {
    ...
}

.atro-get-fit-text-block-00 {
    border: solid 1px #bfbfbf;
    padding: 2rem;
    margin: 3rem 0 1rem 0;
}
@media (min-width: 576px) {
    ...
}
@media (min-width: 768px) {
    ...
}
@media (min-width: 992px) {
    ...
}
@media (min-width: 1200px) {
    ...
}


.atro-get-fit-text-block-01 {
    border: solid 1px #bfbfbf;
    border-radius: 1rem;
    padding: 2rem;
    margin: 1rem auto;
}
@media (min-width: 576px) {
    ...
}
@media (min-width: 768px) {
    ...
}
@media (min-width: 992px) {
    ...
}
@media (min-width: 1200px) {
    ...
}


.atro-get-fit-text-block-02 {
    border: solid 1px #bfbfbf;
    background: #bfbfbf;
    border-radius: 1rem;
    padding: 2rem;
    margin: 1rem auto;
}
@media (min-width: 576px) {
    ...
}
@media (min-width: 768px) {
    ...
}
@media (min-width: 992px) {
    ...
}
@media (min-width: 1200px) {
    ...
}


.atro-get-fit-text-block-03 {
    padding: 2rem;
    margin: 1rem auto;
}
@media (min-width: 576px) {
    ...
}
@media (min-width: 768px) {
    ...
}
@media (min-width: 992px) {
    ...
}
@media (min-width: 1200px) {
    ...
}


.atro-get-fit-text-block-04 {
    padding: 0;
}
@media (min-width: 576px) {
    .atro-get-fit-text-block-04 {
        padding: 0;
    }
}
@media (min-width: 768px) {
    .atro-get-fit-text-block-04 {
        padding: 2rem;
    }
}
@media (min-width: 992px) {
    .atro-get-fit-text-block-04 {
        padding: 2rem;
    }
}
@media (min-width: 1200px) {
    .atro-get-fit-text-block-04 {
        padding: 2rem;
    }
}

.atro-get-fit-text-block-05 {
    padding: 2rem;
    margin: 3rem 0 1rem 0;
}

@media (min-width: 576px) {
    ...
}

@media (min-width: 768px) {
    ...
}

@media (min-width: 992px) {
    ...
}

@media (min-width: 1200px) {
    ...
}

.card-title.get-fit-card-title-00 {
    font-size: 1.2rem;
}
@media (min-width: 576px) {
    .card-title.get-fit-card-title-00 {
        font-size: 1.2rem;
    }
}
@media (min-width: 768px) {
    .card-title.get-fit-card-title-00 {
        font-size: 1.2rem;
    }
}
@media (min-width: 992px) {
    .card-title.get-fit-card-title-00 {
        font-size: 1.4rem;
    }
}
@media (min-width: 1200px) {
    .card-title.get-fit-card-title-00 {
        font-size: 1.4rem;
    }
}


.card-text.get-fit-card-text-01 {
    font-size: .85rem;
    line-height: 1.4;
}
@media (min-width: 576px) {
    .card-text.get-fit-card-text-01 {
        font-size: .85rem;
        line-height: 1.4;
    }
}
@media (min-width: 768px) {
    .card-text.get-fit-card-text-01 {
        font-size: .85rem;
        line-height: 1.4;
    }
}
@media (min-width: 992px) {
    .card-text.get-fit-card-text-01 {
        font-size: 1.2rem;
        line-height: 1.4;
    }
}
@media (min-width: 1200px) {
    .card-text.get-fit-card-text-01 {
        font-size: 1.2rem;
        line-height: 1.4;
    }
}


.card-text.get-fit-card-text-02 {
    color:#bfbfbf;
    font-size: .75rem;
}
@media (min-width: 576px) {
    .card-text.get-fit-card-text-02 {
        font-size: .75rem;
    }
}
@media (min-width: 768px) {
    .card-text.get-fit-card-text-02 {
        font-size: 1.1rem;
    }
}
@media (min-width: 992px) {
    .card-text.get-fit-card-text-02 {
        font-size: 1.1rem;
    }
}
@media (min-width: 1200px) {
    .card-text.get-fit-card-text-02 {
        font-size: 1.1rem;
    }
}


/** Get FIT page styles above **/
/************************************************************************/ 

/** Steer King Pin Table **/
.linkheader {
    color: black !important;
   
}


/*fix header menu, keep all on one line*/
.container-fluid.header-container.d-lg-block > div.row.header-row-utility {
    justify-content: space-between;
}

    .container-fluid.header-container.d-lg-block > div.row.header-row-utility > div.col-md-8.header-utility {
        width: auto;
    }

    .container-fluid.header-container.d-lg-block > div.row.header-row-utility > div.col-md-4.header-utility {
        width: auto;
    }

@media (1331px <= width <= 1433px) {
    .header-utility .d-none.d-lg-block .nav li a, .header-utility .nav.utility-left li a {
        font-size: 84.6875%;
        padding-right: 1.25rem;
    }

    .header-utility .d-none.d-lg-block .nav li button, .header-utility .nav.utility-left li button {
        font-size: 84.6875%;
        padding-right: 1.25rem;
    }
}

@media (1219px <= width <= 1330px) {
    .header-utility .d-none.d-lg-block .nav li a, .header-utility .nav.utility-left li a {
        font-size: 79.375%;
        padding-right: 1rem;
    }

    .header-utility .d-none.d-lg-block .nav li button, .header-utility .nav.utility-left li button {
        font-size: 79.375%;
        padding-right: 1rem;
    }
}

@media (1096px <= width <= 1218px) {
    .header-utility .d-none.d-lg-block .nav li a, .header-utility .nav.utility-left li a {
        font-size: 74.0625%;
        padding-right: .75rem;
    }

    .header-utility .d-none.d-lg-block .nav li button, .header-utility .nav.utility-left li button {
        font-size: 74.0625%;
        padding-right: .75rem;
    }
}

@media (998px <= width <= 1107px) {
    .header-utility .d-none.d-lg-block .nav li a, .header-utility .nav.utility-left li a {
        font-size: 68.75%;
        padding-right: .5rem;
    }

    .header-utility .d-none.d-lg-block .nav li button, .header-utility .nav.utility-left li button {
        font-size: 68.75%;
        padding-right: .5rem;
    }
}

@media (991px <= width <= 997px) {
    .header-utility .d-none.d-lg-block .nav li a, .header-utility .nav.utility-left li a {
        font-size: 68%;
        padding-right: .5rem;
    }

    .header-utility .d-none.d-lg-block .nav li button, .header-utility .nav.utility-left li button {
        font-size: 68%;
        padding-right: .5rem;
    }
}