/* === Bootstrap Replacement === */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; height: auto; }

/* Grid */
.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.container-fluid { width: 100%; padding: 0 15px; }
.row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
[class*="col-"] { padding: 0 15px; width: 100%; }

.col-xs-6 { width: 50%; }
.col-xs-12 { width: 100%; }

@media (min-width: 768px) {
    .col-sm-4 { width: 33.333%; }
    .col-sm-6 { width: 50%; }
    .col-sm-12 { width: 100%; }
}
@media (min-width: 992px) {
    .col-md-3 { width: 25%; }
    .col-md-4 { width: 33.333%; }
    .col-md-5 { width: 41.667%; }
    .col-md-6 { width: 50%; }
    .col-md-12 { width: 100%; }
}
@media (min-width: 1200px) {
    .col-lg-4 { width: 33.333%; }
    .col-lg-6 { width: 50%; }
    .col-lg-offset-5 { margin-left: 41.667%; }
}

/* Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.lead { font-size: 1.25em; line-height: 1.6; }
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 8px;
    z-index: 100;
}
.skip-link:focus { top: 0; }

/* Buttons */
.btn {
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    text-decoration: none;
    font-family: 'futura-pt', sans-serif;
}
.btn-primary { color: var(--color-white); background-color: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover { background-color: #005a96; }
.btn-info { color: var(--color-white); background-color: var(--color-cta); border-color: var(--color-cta); }
.btn-info:hover { background-color: #5eb8e4; }
.btn-default { color: var(--color-text-dark); background-color: var(--color-white); border-color: var(--color-grey-border); }
.btn-default:hover { background-color: var(--color-grey-bg); }
.btn-lg { padding: 10px 16px; font-size: 18px; border-radius: 6px; }

/* === Site Styles === */
:root {
    --color-primary: #0072bc;
    --color-cta: lightskyblue;
    --color-grey-bg: #eceff1;
    --color-white: #fff;
    --color-grey-border: lightgray;
    --color-grey-text: darkgrey;
    --color-text-dark: #1a1a1a;
    --color-overlay: rgba(0,0,0,.4);
    --color-text-shadow: rgba(0,0,0,.5);
}

section {padding:25px 0;}

/*global*/
    /*typefaces*/
    h1,h2,h3,h4 {font-family:'futura-pt';}
    p, ul {font-family:'museo-slab';}
    /*typography*/
        .col-md-12 span {display:block;}
        p {font-size:12pt; line-height: 24pt;}
        h2 {color:var(--color-primary);}
        span {color:var(--color-grey-text);padding:0; margin:0;}
    /*includes*/
        header {
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }
        header a {
            color:var(--color-white);
            font-weight:500;
            text-align:center;
        }
        footer {
            background-color:var(--color-primary);
            color:var(--color-white);
            padding:50px 0;
        }
            footer a {
                color:var(--color-white);
                font-weight: bold;
                text-decoration:underline;
            }
            footer p {
                font-size:12pt;
            }
            footer ul {padding:0;}
            footer ul li {list-style:none;}
            #footerLogo {
                width:150px;
                padding-bottom:10px;
            }
        nav {padding-top:15px;}
        nav a:hover {
            font-weight:300;
            color:var(--color-primary);
        }
        nav img {width:250px;}
        nav ul {
            list-style:none;
            color:var(--color-white);
            text-align:center;
            padding-left:0;
            padding-bottom:10px;
        }
            nav ul li {
                display:inline;
                padding:0 10px;
            }
        #quickContact {
            background-color:var(--color-cta);
            padding:25px 0;
        }
        #quickContact h2 {
            color:var(--color-white);
        }
    /*backgrounds*/
        .projectBox,
        #cabinetry,
        #windowsdoors,
        #mouldingstairparts,
        #productWindowBG,
        #featureKolbe,
        #featureWirtz,
        #featureCentral {
            background-size: cover;
            background-repeat: no-repeat;
        }
        #homePage {
            background-image: url("../img/index_hero.jpg");
        }
        #cabinetry {
            background-image: url("../img/index_cabinets.jpg");
        }
        #windowsdoors {
            background-image: url("../img/index_windowsdoors.jpg");
        }
        #mouldingstairparts {
            background-image: url("../img/index_mouldingstairparts.jpg");
        }
        .projectBox {
            padding-top:340px;
            height:475px;
            color:var(--color-white);
            margin-bottom:30px;
        }
        .projectBox span {color:var(--color-white);}
        #foxLake {
            background-image: url("../img/foxlake/project_foxlake_1.jpg");
            background-position-x: -250px;
        }
        #hawthorneHill {
            background-image: url("../img/hawthorne_hill/project_hawthorne_1.jpg");
            background-position-x: -40px;
        }
        #kenoshaLight {
            background-image: url("../img/kenosha_light/project_kenosha_light.jpg");
            background-position-x: -250px;
        }
        #wyndale {
            background-image: url("../img/wyndale/project_wyndale_1.jpg");
            background-position-x: -250px;
        }
        #auburn {
            background-image: url('../img/auburn/project_auburn_1.jpg');
        }
        #elmGrove {
            background-image: url('../img/elm_grove/project_elm_grove_1.jpg');
        }
        #bellaVista {
            background-image: url('../img/bella_vista/project_bella_vista_1.jpg');
            background-position-x:-160px;
        }
        #hawksMeadow {
            background-image: url('../img/hawks_meadow/project_hawks_meadow_1.jpg');
        }
        #rogersGlenn {
            background-image: url('../img/rogers_glenn/project_rogers_glenn_1.jpg');
            background-position-x: -180px;
        }
        #sheboygan {
            background-image: url('../img/sheboygan/project_sheboygan_1.jpg');
        }
        #taylorWoods {
            background-image: url('../img/taylor_woods/project_taylor_woods_1.jpg');
            background-position-x: -180px;
        }

        .projectBG {
            background-color: var(--color-overlay);
            width: 300px;
            padding: 25px;
            margin: 0 auto;
        }
        .projectsBG {
            background-color: var(--color-overlay);
            padding:20px;
            width:100%;
        }
        .border {border:1px solid var(--color-grey-border);}
        .borders {border:1px solid var(--color-grey-border); padding:10px;}
        .buttons {padding:5% 0;}
/*home*/
        .bucket {
            display:block;
            height:250px;
            text-align:center;
            background-color:var(--color-grey-bg);
        }
            .bucket h3 {
                padding-top:100px;
                text-shadow:3px 2px var(--color-text-shadow);
                color:var(--color-white);
            }
        .infoBucket {
            background-color:var(--color-grey-bg);
            color: var(--color-text-dark);
            padding:50px;
            min-height:385px;
        }
            .infoBucket h3 {
                text-align:center;
            }
        .infoBucket + .col-md-12 {padding-top:25px;}
        #hero {
            padding:25% 5%;
            color:var(--color-white);
            text-shadow:1px 1px var(--color-text-shadow);
        }
        .vendorBucket {
            min-height:150px;
            text-align:center;
        }
        .vendorBucket img {width:200px; padding:25% 0;}
/*about*/
    #about {
        height:250px;
        color:var(--color-white);
        background-image: url("../img/about_bg.jpg");
    }
    #showroom .col-md-12:first-child {padding-bottom:10px;}
/*contact*/
    #contacts h4 {color:var(--color-primary);}
    #contact {
        height:250px;
        color:var(--color-white);
        background-image: url("../img/contact_bg.jpg");
    }
/*projects*/
    #quickProjects .col-md-12 {padding-bottom:20px;}
    #quickProjects ul {padding:0;}
    #quickProjects ul li {list-style:none; padding:0}
    #quickProjects img {width: 475px; overflow:hidden;}

/*products*/
    #product {
        height:250px;
        color:var(--color-white);
        background-image: url("../img/product_bg.jpg");
    }
    #partners .col-md-6 {margin:15px 0;}
    .vendor {
        border:1px dotted var(--color-grey-border);
        padding: 30px 20px;
        margin-bottom: 25px;
        min-height: 525px;
    }
        .vendor p {
            font-size:12pt;
        }
        .vendor img {
            display:block;
            margin: 0 auto;
            width:150px;
        }
        .vendor .smallLogo {
            padding-top:30px;
        }
        .vendor .blockLink {display:block; text-align:center;}
    .productImg {
        height:250px;
        width:320px;
        display:block;
        margin:0 auto;
        }
    #productWindowBG {
            height:720px;
            background-image: url("../img/index_windowsdoors.jpg");
    }
    .feature h4 {
        text-align:center;
        font-size:28px;
        color:var(--color-primary);
        padding:15px 0;
    }
    span.smallText {
        color:var(--color-grey-text);
        font-size:18px;
    }
    /*windows*/
        #windows {
            height:250px;
            color:var(--color-white);
            background-image: url("../img/window_bg.jpg");
        }
        #featureKolbe {
            background-image: url("../img/feature_kolbe.jpg");
            height:700px;
        }
        #feature {background-color:var(--color-grey-bg); padding:0;}
            #feature span {display:block; padding-top:75px;}
            #feature a {display:block; margin:15px 0;}
            #feature .caption {
                font-size:12px;
                line-height:12px;
                font-style:oblique;
                color:var(--color-grey-text);}

    /*cabinets*/
        #cabinets {
            height:250px;
            color:var(--color-white);
            background-image: url("../img/cabinets_bg.jpg");
        }
    /*millwork&stairs*/
        #mouldings {
            height:350px;
            color:var(--color-white);
            background-image: url("../img/moulding_bg.jpg");
        }
        #featureCentral {
            background-image: url("../img/feature_central.jpg");
            height:1000px;
        }
        .feature ul {
                list-style:none;
                padding:0;
            }
        .feature ul li {
            font-size:18px;
            padding: 5px 0;
        }
@media only screen and (max-width: 600px) {
    h2 {
        text-align:left!important;
    }
	#bannerMsg p {
		font-size:12px;
	}
	#bannerMsg  {
		height:105px!important;
	}
}