body,
html {
    font-family: "copperplate", serif;

    font-weight: 400;
    font-style: normal;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    color: #000;
    width: 100% !important;
    height: 100% !important;
    max-width: ;
    margin: 0 auto;
    background-color: #fff;

}

html {
    scroll-behavior: smooth;
}


container {
    width: 100%;
    max-width: 1920px;
    padding-right: 0px !important;
    padding-left: 0px !important;
    margin-left: 0;
    margin-right: 0;

}

.container-fluid {
    width: 100%;
    max-width: 1920px;
    padding-right: 0px !important;
    padding-left: 0px !important;
}


a:link {
    text-decoration: none !important;
}

.row {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0px !important;
    padding-right: 0px !important;
    overflow-x: hidden;
}

.navbar {
    height: 90px;
    background-color: #888;

}

.navbar li {
    margin-top: 10px;
    padding: 15px;
    font-size: 18px;
}

.navbar li a {
    color: #fff !important;
    font-weight: 400;
}

.navbar li a:hover {
    color: #00269a !important;
}


.navbar-brand img {
    max-height: 65px;
    margin-left: 50px;

}



.nav .active a {
    font-weight: 800;
    color: #00269a !important;
    background-color: #888 !important;
}

#navbar {
    max-width: 1600px;

}

.order a {
    background-color: #00269a !important;


}

#orderOnline {
    color: #fff !important;
}

.dropdown-menu {
    background-color: #888 !important;
}

/**************************************************************  first Div  ********************************************/
.firstDiv {

    /* The image used */
    background-image: url("../img/cooper-enterprises-1-80.jpg");
    max-width: 100%;
    /* Full height */
    height: 100%;
    min-height: 800px;
    padding-bottom: 50px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;

}




.firstDiv h1 {
    margin-top: 250px;
    text-align: center;
    font-weight: 00;
    color: #fff;
    line-height: 65px;
    font-size: 48px;
}


.fourthStrip h1 {
    margin-top: 60px;
    font-family: "copperplate", serif;

    text-align: center;
    font-weight: 600;
    color: #00269a;
    line-height: 65px;
    font-size: 48px;
}


.firstDivAbout {

    /* The image used */
    background-image: url("../img/cooper-enterprises-023-80.jpg");
    max-width: 100%;
    /* Full height */
    height: 100%;
    min-height: auto;
    padding-bottom: 100px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}




.firstDivAbout h1 {
    margin-top: 190px;
    text-align: center;
    font-weight: 00;
    color: #fff;
    line-height: 65px;
    font-size: 48px;
}



.newButton {
    background-color: transparent;
    border: 1px solid #fff;

}


.newButton a {
    color: #fff;
}


.newButton:hover {
    color: #000 !important;
    background-color: #fff !important;
}

.newButton a:hover {
    color: #000 !important;

}

.firstDivButtons {
    margin-top: 50px;
    text-align: center;
}

.firstDivSpacer {
    width: 10px;
}

/**************************************************************   second Div  ********************************************/

.secondDiv {
    margin-top: 100px;
    text-align: center;
    padding-bottom: 150px;
}

.secondDiv h2 {
    color: #00269a;
    font-weight: 300;
    margin-bottom: 75px;
    font-size: 50px;

}

.secondDiv p {
    font-family: sans-serif;
    font-size: 20px;
    margin-bottom: 35px;
    line-height: 26px;
}

.buttonGroup {
    margin-top: 150px;
}

.whatWeDoDiv:hover,
.whatWeHaulDiv:hover,
.meatDiv:hover,
.mealDiv:hover,
.marketDiv:hover {
    color: #fff !important;
}


.meatDiv {
    /* The image used */
    background-image: url("../img/cooper-enterprises-020.jpg");
    max-width: 100%;
    width: 100%;
    /* Full height */
    height: 400px;
    /* Create the parallax scrolling effect */
    background-attachment: inherit;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    text-shadow: 3px 3px 5px #000;
    /* Create the parallax scrolling effect */
    background-size: cover;
    text-align: center;
    overflow: hidden !important;
    color: #fff;
    margin-top: 25px;
}

.mealDiv {
    /* The image used */
    background-image: url("../img/AdobeStock_318019990_Preview.jpeg");
    max-width: 100%;
    width: 400px;
    /* Full height */
    height: 400px;
    /* Create the parallax scrolling effect */
    background-attachment: inherit;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    text-shadow: 3px 3px 5px #000;
    /* Create the parallax scrolling effect */
    background-size: cover;
    text-align: center;
    overflow: hidden !important;
    color: #fff;
    margin-top: 25px;
}

.marketDiv {
    /* The image used */
    background-image: url("../img/cooper-enterprises-3.jpg");
    max-width: 100%;
    width: 100%;
    /* Full height */
    height: 400px;
    /* Create the parallax scrolling effect */
    background-attachment: inherit;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    text-shadow: 3px 3px 5px #000;
    /* Create the parallax scrolling effect */
    background-size: cover;
    text-align: center;
    overflow: hidden !important;
    color: #fff;
    margin-top: 25px;
}

.whatWeHaulDiv {
    /* The image used */
    background-image: url("../img/cooper-enterprises-022.jpg");
    max-width: 100%;
    width: 100%;
    /* Full height */
    height: 400px;
    /* Create the parallax scrolling effect */
    background-attachment: inherit;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    text-shadow: 3px 3px 5px #000;
    /* Create the parallax scrolling effect */
    background-size: cover;
    text-align: center;
    overflow: hidden !important;
    color: #fff;
    margin-top: 25px;
}

.whatWeDoDiv {
    /* The image used */
    background-image: url("../img/cooper-enterprises-013.jpg");
    max-width: 100%;
    width: 100%;
    /* Full height */
    height: 400px;
    /* Create the parallax scrolling effect */
    background-attachment: inherit;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    text-shadow: 3px 3px 5px #000;
    /* Create the parallax scrolling effect */
    background-size: cover;
    text-align: center;
    overflow: hidden !important;
    color: #fff;
    margin-top: 25px;
}

.thumbInterior h3 {
    margin-top: 30%;
    font-size: 36px;

}

/**************************************************************   third Div  ********************************************/

.thirdDiv {
    /* The image used */
    background-image: url("../img/AdobeStock_237020344_Preview-10.jpg");
    max-width: 100%;
    ;
    /* Full height */
    height: auto;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;

    /* Create the parallax scrolling effect */
    background-size: cover;
    text-align: center;
    overflow: hidden !important;
    color: #fff;
    padding-bottom: 100px;
}

.thirdDiv h2 {
    margin-top: 100px;
    color: #00269a;
    font-weight: 300;

    font-size: 50px;
}

/**************************************************************  fourth Div  ********************************************/

.fourthDiv {
    /* The image used */
    background-image: url("../img/cooper-enterprises-001.jpg");
    max-width: 100%;
    ;
    /* Full height */
    height: auto;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;

    /* Create the parallax scrolling effect */

    text-align: center;
    overflow: hidden !important;
    color: 000;
    padding-bottom: 0px;
}

.fourthDiv h2 {
    color: #00269a !important;
    font-weight: 100;
    font-size: 50px;
    margin-bottom: 50px;
    margin-top: 50px;
}

.fourthDivChase h2 {
    color: #888 !important;
    font-weight: 600;
    font-size: 30px;
    margin-bottom: 50px;
    margin-top: 30px;

}



.fourthStrip {
    padding-top: 100px;
    background-color: #fff;
    padding-bottom: 150px;

}

.fourthDivChase {
    /* The image used */
    background-image: url("../img/cooper-enterprises-013.jpg");
    max-width: 100%;
    ;
    /* Full height */
    height: auto;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;

    /* Create the parallax scrolling effect */

    text-align: center;
    overflow: hidden !important;
    color: ;
    padding-bottom: 0px;

}

.fourthDivChase p {
    color: #00269a !important;
    font-weight: 100;
    font-size: 16px;
    margin-bottom: 50px;
    margin-top: 50px;
}



.fourthDivChase .fourthStrip {
    font-family: sans-serif;
    font-size: 16px;
    background-color: #fff;
    padding-bottom: 150px;
    padding-top: 0px;

}


.fourthDivHighPole {
    /* The image used */
    background-image: url("../img/cooper-enterprises-013.jpg");
    max-width: 100%;
    ;
    /* Full height */
    height: auto;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;

    /* Create the parallax scrolling effect */

    text-align: center;
    overflow: hidden !important;
    color: ;
    padding-bottom: 0px;

}

.fourthDivHighPole p {
    color: #000 !important;
    font-weight: 100;
    font-size: 16px;
    margin-bottom: 50px;
    margin-top: 50px;
}



.fourthDivHighPole .fourthStrip {
    font-family: sans-serif;
    font-size: 16px;
    background-color: #fff;
    padding-bottom: 150px;
    padding-top: 0px;

}



.fourthDivleadEscort {
    /* The image used */
    background-image: url("../img/cooper-enterprises-3.jpg");
    max-width: 100%;
    ;
    /* Full height */
    height: auto;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;

    /* Create the parallax scrolling effect */

    text-align: center;
    overflow: hidden !important;
    color: ;
    padding-bottom: 0px;

}

.fourthDivleadEscort p {
    color: #000 !important;
    font-weight: 100;
    font-size: 16px;
    margin-bottom: 50px;
    margin-top: 50px;
}



.fourthDivleadEscort .fourthStrip {
    font-family: sans-serif;
    font-size: 16px;
    background-color: #fff;
    padding-bottom: 150px;
    padding-top: 0px;

}


.fourthDivSteer {
    /* The image used */
    background-image: url("../img/cooper-enterprises-016.jpg");
    max-width: 100%;
    ;
    /* Full height */
    height: auto;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;

    /* Create the parallax scrolling effect */

    text-align: center;
    overflow: hidden !important;
    color: ;
    padding-bottom: 0px;

}

.fourthDivSteer p {
    color: #000 !important;
    font-weight: 100;
    font-size: 16px;
    margin-bottom: 50px;
    margin-top: 50px;
}



.fourthDivSteer .fourthStrip {
    font-family: sans-serif;
    font-size: 16px;
    background-color: #fff;
    padding-bottom: 150px;
    padding-top: 0px;

}






.fifthDiv {
    text-align: center;
    color: #00269a !important;
    font-weight: 600;
    margin-bottom: 50px;
    margin-top: 50px;

}

.fifthDiv h2 {

    font-size: 50px;
}

.fourthDiv li {
    list-style-type: none;
    font-size: 30px;
    padding-bottom: 15px;
    padding-right: 15px !important;
    text-align: center;
}

.haulList {
    margin-top: 25px;
    list-style: none;
    padding: 0;
}

.haulList li {
    padding-bottom: 20px;
    font-size: 18px;
    font-weight: 100;
}


/**************************************************************   footer Div  ********************************************/
.footerDiv {
    height: auto;
    padding-top: 25px;
    padding-bottom: 75px;
    background-color: #00269a;
}

.footerLogo img {
    margin: 0 auto !important;
}

.footerTextR {
    color: #fff;
    font-size: 18px;
    text-align: end;

}

.footerTextR a {
    color: #fff !important;
}

.footerTextL a {
    color: #fff !important;
}

.footerTextL ul {
    list-style-type: none;
    font-size: 18px;
}

.footerTextL,
.footerTextR h3 {
    color: #888;
}

.footerTextL {}



.footerSvg img {
    max-height: 50px;
    margin-left: 90%;
}

/*****************************************navShrink******************************** Green #104730******/


/*************************************************************** Image Switch******************/


.grow {
    transition: all .2s ease-in-out;
}

.grow:hover {
    transform: scale(1.03);
}




/*************************************************************** Mobile CSS******************/

@media only screen and (min-width: 768px) {}

@media screen and (max-width: 600px) {
    .navbar {
        height: 90px;

    }

    .navbar-header button {
        margin-top: 30px;
        margin-right: 25px;


    }

    .navbar-toggle {
        background-color: #00269a !important;


    }

    #navbar {
        border-top: 0px;
        height: 100% !important;
        overflow-y: hidden;
    }

    .meatDiv,
    .mealDiv,
    .marketDiv {
        margin-bottom: 15px;
    }

    .footerDiv {
        height: auto;
        padding-top: 25px;
        padding-bottom: 75px;
        background-color: #00269a;
        text-align: center !important;
        padding-left: 0px !important;
    }


    .footerTextR {
        color: #fff;
        font-size: 18px;
        text-align: center;

    }

    .navbar li {
        padding: 15px;
        font-size: 18px;
        background-color: #888;
        text-align: end;
        margin-top: 0px;

    }

    .firstDiv h1 {
        font-size: 30px !important;
    }

    .btn {
        max-width: 100% !important;
    }

    .secondDiv h2,
    .thirdDiv h2,
    .fourthDiv h2 {
        font-size: 30px !important;
    }

    .thumbInterior h3 {
        margin-top: 50%;
        font-size: 36px;

    }
}