﻿

/*
    Header / Nav Menu
*/

.navmenu {
    display: flex !important;
    padding: 30px 80px !important;
    width: 100vw !important;
    justify-content: center !important;
    align-items: center !important;
    background: #201E1D !important;
    height: 235px !important;
    z-index: 3 !important;
}

.navmenu-img {
    margin-right: 10px !important;
    z-index: 3 !important;
    float: left !important;
}

.navmenu-links {
    border-radius: 15px !important;
    padding: 10px 0 !important;
    display: flex !important;
    margin-top: 28px !important;
    z-index: 3 !important;
    white-space: nowrap;
}

.navmenu-img img {
    max-height: 174px !important;
    height: 174px !important;
    z-index: 3 !important;
}

.navmenu a {
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    color: white !important;
    text-decoration: none !important;
    padding: 5px 0 !important;
    font-size: 18px !important;
    margin-left: 30px !important;
    z-index: 3 !important;
}

.navmenu .material-icons {
    margin-right: 9px !important;
}

.navmenu-header-contact {
    width: 300px !important;
    margin-left: 50px !important;
    z-index: 3 !important;
    font-size: 15px !important;
    margin-top: 2px !important;
    z-index: 2 !important;
}

    .navmenu-header-contact a {
        font-size: 15px !important;
        margin-left: 0px !important;
        z-index: 2 !important;
    }

@media (max-width: 1000px) {
    .navmenu {
        height: 210px !important;
    }

    .navmenu-img {
        float: none !important;
        text-align: center !important;
        margin-right: 0px !important;
    }

    .navmenu-img img {
        height: 140px !important;
        margin-bottom: 0px !important;
        margin-top: 20px !important;
    }

    .navmenu-links {
        float: none !important;
        margin-top: 0px !important;
        justify-content: center;
    }

    .navmenu a {
        margin-left: 10px !important;
        margin-right: 10px !important;
        margin-top: 0px !important;
    }

    .navmenu-header-contact {
        display: none !important;
    }
}


@media (max-width: 600px) {
    .navmenu {
        height: 185px !important;
    }

    .navmenu-img img {
        height: 125px !important;
        margin-top: 15px !important;
    }

    .navmenu-links {
        margin-top: -4px !important;
    }

    .navmenu a {
        font-size: 16px !important;
    }
}

@media (max-width: 400px) {
    .navmenu {
        height: 170px !important;
    }

    .navmenu a {
        font-size: 14px !important;
    }

    .navmenu-img img {
        height: 115px !important;
    }
}


/*
    Footer 
*/

#footer {
    background: #201e1d !important;
    height: 110px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    color: white !important;
}

#footer-top {
    height: 110px !important;
}

#footer-top a {
    display: block !important;
    margin-top: 35px !important;
}

#footer-bottom {
    height: 0 !important;
}


/*
    Index Page
*/

#index {
    min-height: calc(100vh - 345px) !important;
}

#index-banner {
    background-image: url("../img/banner.png") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    color: white !important;
    height: 235px !important;
    background-color: black !important;
}

#index-banner .container {
    z-index: 2 !important;
    position: relative !important;
}


#index-banner-text {
    max-width: 450px !important;
    margin-bottom: 20px !important;
}

#index-banner:before {

}

#index-banner-text::before {
    content: 'North Rome Lumber is proud to offer the ability to cut any custom moulding our customer desires. Browse our catalog below to view our current offerings or reach out to us to discuss a quote for your custom project.' !important;
}

#index-popular-mouldings {
    min-height: calc(100vh - 850px) !important;
}

#moulding-types {
    content: '' !important;
}


@media (max-width: 1000px) {

    #index {
        min-height: calc(100vh - 320px) !important;
    }

    #index-banner .container {
        margin-top: -10px !important;
    }

    #index-banner {
        height: 215px !important;
    }
}

@media (max-width: 600px) {

    #index {
        min-height: calc(100vh - 295px) !important;
    }

    #index-banner {
        height: 200px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {

    #index {
        min-height: calc(100vh - 290px) !important;
    }

    #index-banner {
        height: 210px !important;
    }

    #index-banner-text {
        width: 360px !important;
    }

    #index-banner-text {
        font-size: 14px !important;
    }

    #index-banner .container {
        margin-top: 10px !important;
    }
}


@media (max-width: 420px) {

    #index {
        min-height: calc(100vh - 290px) !important;
    }

    #index-banner {
        height: 230px !important;
    }

    #index-banner-text {
        width: 320px !important;
    }
}

@media (max-width: 380px) {

    #index {
        min-height: calc(100vh - 270px) !important;
    }

    #index-banner {
        height: 250px !important;
    }

    #index-banner-text {
        width: 280px !important;
    }
}


/*
    Catalog Page
*/
    #catalog {
        min-height:calc(100vh - 365px) !important;
    }

    #catalog-banner {
        display: none !important;
    }

@media (max-width: 1000px) {

    #catalog-custom-upload {
        width: 300px;
    }

    #catalog {
        min-height: calc(100vh - 340px) !important;
    }
}

@media (max-width: 900px) {

    ::deep .order-form-control {
        width: 100% !important;
        margin-bottom: 10px;
    }

    .popup-modal-img {
        max-width: Calc(100vw - 70px) !important;
        max-height: Calc(100vh - 70px) !important;
    }
}


@media (max-width: 766px) {

    #catalog-custom-upload {
        margin-top: 5px !important;
    }
}

@media (max-width: 600px) {

    #catalog {
        min-height: calc(100vh - 315px) !important;
    }
}

@media (max-width: 480px) {

    #catalog {
        min-height: calc(100vh - 310px) !important;
    }
}

@media (max-width: 400px) {

    #catalog {
        min-height: calc(100vh - 300px) !important;
    }
}


/*
    Cart Page
*/

#cart {
    min-height: calc(100vh - 345px) !important;
    background-color: white !important;
}

#cart-banner {
    display: none !important;
}

@media (max-width: 1000px) {

    #cart {
        min-height: calc(100vh - 320px) !important;
    }
}


@media (max-width: 766px) {


}

@media (max-width: 600px) {

    #cart {
        min-height: calc(100vh - 295px) !important;
    }
}

@media (max-width: 480px) {

    #cart {
        min-height: calc(100vh - 290px) !important;
    }
}

@media (max-width: 400px) {

    #cart {
        min-height: calc(100vh - 280px) !important;
    }
}


/*
    Contact Us Page
*/

#contact {
    min-height: calc(100vh - 345px) !important;
    background-color: white !important;
}

#contact-banner {
    display: none !important;
}

#contact-info-text::before {
    content: '5810 N Rome Avenue \A Tampa, FL 33603 \A NorthRomeLumber@gmail.com \A (813) 876-3705 \A' !important;
    white-space: pre !important;
}



@media (max-width: 1000px) {

    #contact {
        min-height: calc(100vh - 320px) !important;
    }
}


@media (max-width: 766px) {
}

@media (max-width: 600px) {

    #contact {
        min-height: calc(100vh - 295px) !important;
    }
}

@media (max-width: 480px) {

    #contact {
        min-height: calc(100vh - 290px) !important;
    }
}

@media (max-width: 400px) {

    #contact {
        min-height: calc(100vh - 280px) !important;
    }
}


/*#contact {
    background: white !important;
    min-height: calc(100vh - 440px) !important;
}

#contact-content {
    background: white !important;
}

#contact-banner {
    background-image: url("../img/LengendaryBanner.jpg") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    height: 200px !important;
    padding-top: 40px !important;
}

#contact-banner:before {
    content: '' !important;
    position: absolute !important;
    top: 120px !important;
    width: 100% !important;
    height: 200px !important;
    background: rgba(62,107,173,.26) !important;
    background-image: linear-gradient(70deg,#000,#00000057,transparent) !important;
    z-index: 1 !important;
    margin-left: -40px !important;
}



#contact-info-text::before {*/
    /*    content: 'Legendary Millwork is proud to offer the ability to cut any custom moulding our customer desires. Browse our catalog below to view our current offerings or reach out to us to discuss a quote for your custom project.' !important;*/
    /*content: '22575 Heslip Drive \A Novi, MI 48375 \A info@kubicacorp.com \A (248) 344-7750 \A' !important;
    white-space: pre !important;
}


@media (max-width: 1000px) {

    #contact-banner {
        height: 150px !important;
    }

    #contact-banner:before {
        top: 190px !important;
        height: 150px !important;
    }
}


@media (max-width: 766px) {

    #contact-custom-upload {
        margin-top: 5px !important;
    }
}


@media (max-width: 600px) {

    #contact-banner:before {
        top: 175px !important;
        margin-left: -15px !important;
    }
}


@media (max-width: 600px) {

    #contact-banner:before {
        top: 175px !important;
    }
}

@media (max-width: 480px) {

    #contact-banner {
        height: 125px !important;
    }

    #contact-banner:before {
        top: 165px !important;
        height: 125px !important;
    }
}

@media (max-width: 360px) {

    #contact-banner:before {
        top: 150px !important;
    }
}*/