@charset "utf-8";
/* # Elkay Cabinetry CSS Document # */
/* ## medallionatmenards ## */
/* esite_media.css */

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* # Media Queries for Responsive Design. # */

@media only screen and (max-width: 1500px) {
    .slide_caption p {
        padding: 1rem 1.5rem;
        font-size: 1.5rem;
    }        
    

}

@media only screen and (max-width: 1250px) {
    h1 { margin: 5px 9px 12px 9px; }
    h2 { margin: 0 9px 15px 9px; }
    h3, h4, h5, h6, p, li { margin: 0 9px 9px 9px; }
    .slide_caption p {
        padding: 1rem 1.5rem;
        font-size: 1.8rem;
    }        
    

}
/* ## Tablets ## */
/* General Layout similar to full size, modifications mostly for menu */
@media only screen and (max-width: 1023px) {
    h1 { margin: 5px 9px 12px 9px; }
    h2 { margin: 0 9px 15px 9px; }
    h3, h4, h5, h6, p, li { margin: 0 9px 9px 9px; }
    .header_container ul li {
        display: block;
    }
    .header_container .support {
        padding: 53px 0 0 0;
    }
    .header_container .admin {
        padding: 10px 0 0 0;
    }
    #main_nav > li a,
    #main_nav > li a:link,
    #main_nav > li a:visited {
        background-position: center 96%;
        padding: .5rem .5rem 1rem .5rem;
        background-image: url(../images/18.png);
    }
    #main_nav > li:hover a,
    #main_nav > li:active a,
    #main_nav > li:focus a {
        background-image: url(../images/19.png);
    }
	h1 { 
		padding: 20px 0 0 0;
	}
	#social_share_container {
		margin: 20px 0 0px 25px;
	}
	#social_share {
		border-width: 1px 0;
    }
    .slide_caption p {
        padding: 1rem 1.5rem;
        font-size: 2rem;
    }        
    
    .subHeader .copy {
        width: 40%;
    }
    .subHeader .headlines {
        width: 60%;
    }
    .headlines .catUnstrHeading,
    .catHeroContent .catUnstrHeading {
        font-size: 2.8em;
        padding: 1rem;
    }
    .catUnstrCap {
        font-size: 1.1em;
    }
    .displayWhenActive {
        display: none;
    }
    .resp-tab-active .displayWhenActive {
        display: block;
    }
    .resp-vtabs ul.resp-tabs-list.noPaddingTab {
        width: 100%;
    }    
    h2.resp-accordion {
        border: none;
        background-color: #f6f4f3;
        border-bottom: 1px solid #ccc;
        padding: 8px !important;
    }
    h2.resp-accordion:first-child {
        border-top: 1px solid #ccc;
    }
    .noPaddingTab + div.resp-tabs-container h2.resp-accordion {
        padding: 0 !important;
        border: none;
    }
    h2.resp-accordion.resp-tab-active {
        border-bottom: solid 6px #035d67 !important;
    }
    .resp-vtabs .resp-tab-content {
        border: 1px solid #aaa !important;
        padding: 5%;
        -webkit-box-shadow: inset 0px 40px 70px -50px #555;
        -moz-box-shadow: inset 0px 40px 70px -50px #555;
        box-shadow: inset 0px 50px 40px -50px #555;
    }
    .doorSwatchesTextFirst {
        padding: 20px;
    }
    .doorSwatchesText {
        padding: 20px;
    }
}

/* ## Smartphones (portrait and landscape) ## */
@media only screen and (max-width : 767px) {
/* ### Global ### */
/* #### Nav and Header #### */
    .catHeader,
    .header_container,
    .header_container .support,
    .header_container .admin,
    .header_container .logo,
    .header_container .search,
    .subHeader,
    .subHeader .copy,
    .subHeader .headlines,
    .catHeroContent .catUnstrHeading,    
    .catTwoColumns > div,
    .catThreeColumns > div,
    .catFourColumns > div,
    .catTwoColumns > div:first-child, 
    .catThreeColumns > div:first-child, 
    .catFourColumns > div:first-child,
    .footerSignature .signatureLogo,
    .footerSignature .signatureCopy {
        width: 100%;
        max-width: 750px;
        margin: 10px auto 0;
        float: none;
    }    
    .header_container .search {
        max-width: 500px;
    }   
    .header_container .logo {
        max-width: 300px;
    }
    #widget_search input {
        width: 100%;
        max-width: 500px;
    }
    .subHeader .headlines {
        padding-left: 0;
    }
    .catHeader {
        display: block;
    }
    .subHeader .heroImg,
    .subHeader .catHeroContent,
    .subHeader .catUnstrHeading,
    .catHeader .heroImg,
    .catHeader .catHeroContent,
    .catHeroContent .catUnstrHeading,
    .catHeroContent .catUnstrCap {
        display: block;
        width: 100%;
        min-height: 100px;
        clear: both;
        float: none;
        margin: 10px 0 0 0;
    }
    .catHeader .heroImg {
        min-height: 400px;
    }
    .subHeader .catUnstrHeading svg,
    .catHeroContent .catUnstrHeading svg {
        max-height: 100px;
    } 
    .catUnstrHeading {
        font-size: 1.9em;
        padding: .5em;
    }
    .header_container .logo img {
        margin: 5px auto;
    }
    .header_container ul li a {
        font-size: .8em;
    }
	#main_nav {
		display: none;
	}
	.slicknav_menu {
		display: block;
		min-height: 50px;
	}
	#logos {
		clear: both;
		position: relative;
		min-height: 100px;
		margin: 0 0 50px;
		padding: 3px;
		display: block;
	}
	#supportZone ul {
		width: 100%;
		text-align: center;
	}
	#supportZone li {
		display: inline;
		float: none;
		padding: 0;
		margin: 5px 2px;
	}
	#supportZone a {
		white-space: nowrap;
		font-size: 13px;
	}
	#SearchBar {
		margin: 7px 0;
		padding: 2px 0;
	}
	#search {
		float: none;
		margin: 3px 2%;
		padding: 0;
		width: 96%;
	}
	#widget_search {
		width: 100%;
		padding: 0;
		margin: 0;
		position: relative;
		max-width: 768px;
	}
	#widget_left_nav_toggle {
		background-color: #E4DEDA;
		background-image: url('../images/20.gif');
		background-repeat: no-repeat;
		font-size: 19px;
		font-weight: 700;
		padding: 7px 40px;
		margin: 10px 0 0 0;
	}
	#widget_left_nav_toggle.opened {
		background-image: url('../images/21.gif');
	}
	#widget_left_nav {
		display: none;
	}
	#widget_left_nav.opened {
		display: block;
		border-width: 0 2px 5px 2px;
		border-style: solid;
		border-color: #E4DEDA;
		background-color: #F6F4F3;
		padding-top: 10px;
	}
	.filter-group {
		border-bottom: 1px solid #E4DEDA;
		width: 98%;
		margin-left: 2%;
	}
	
	div {
		-webkit-border-radius: 0px !important;
		-moz-border-radius: 0px !important;
		border-radius: 0px !important;
	}

    /* #### Footer #### */
	footer .elkay {
		width: 80%;
	}
	footer .links {
		width: 100%;
		margin: 20px 0 30px 0;
		font-size: 12px;
	}
	footer .links > li {
		padding: 0;
		margin: 0;
		width: 50%;
	}
	footer .links li:nth-child(odd) {
		text-align: right;
		border-right: 1px solid #4f4c48;
    }
    footer .links > li a {
        border: none;
    }
	/* ## Home Page ## */	
	/* ### Carousel ### */
	/* Changes from pager driven to swipe (Paging controls changed to dots) */
	#carousel {
		background: transparent;
		margin-top: 10px;
	}
	#slides {
		overflow: hidden;
	}
	#slides img {
		display: none;
		width: 100%;
		height: auto;
		top: 0px;
	}
	#carouselCaption {
		width: 100%;
		background: #E4DEDA;
		color: #555;
		height: auto;
		min-width: 250px;
		min-height: 5px;
		margin: 0;
		padding: 6px;
		position: relative;
	}
	.carouselCaptionOpen {
		height: auto;
	}
	#carouselCaption h2 {
		border: 0;
		background: none;
		margin: 6px;
	}
	#carouselCaption p {
		margin: 6px;
	}
	#carouselPager, .carouselPagerOpen, .carouselPagerClosed {
		position: relative;
		width: 100%;
		max-width: 768px;
		height : 35px;
		background: #fff;
		background-image: none;
		padding: 0;
		margin: 0;
		position: relative;
	}
	.carouselPagerClosed ul, #carouselPager div {
		display: block;
	}
	.carouselPagerClosed, .carouselCaptionClosed {
		background-image: none !important;
	}
	#pagerList a {
		background-image: url('../images/22.jpg');
		background-repeat: no-repeat;
		background-position: center;
		text-decoration: none;
		border: 0;
		padding: 0;
		display: inline;
	}
	#pagerList a.active {
		background-image: url('../images/23.jpg');
		background-repeat: no-repeat;
		background-position: center;
		text-decoration: none;
		border: 0;
		padding: 0;
		display: inline;
	}
	#pagerList {
		width: 100%;
		max-width: 768px;
		text-align: center;
		margin: 5px 0;
		padding: 0;
		right: 0px;
		top: 0px;
		height: 35px;
		position: relative;
	}
	#pagerList img, #carouselPager img, #pagerList img.active {
		border: 0;
		margin: 0;
		float: none;
		display: inline;
		position: relative;
		visibility: hidden;
	}
	/* ## UI Accordion ## */
	.ui-accordion .ui-accordion-content table {
		width: 100%;
	}
	h1 { clear: both; }
	#social_share_container {
		margin-top: 10px;
		max-width: 100%;
		width: 100%;
	}
	#social_share {	
		width: 100%;
		text-align: center;
		border-width: 1px 0;
	}
	h1 {
		clear: both;
		padding: 20px 5px 0;
	}
	#breadCrumb {
		margin: 0;
    }
    
    .slide_caption p {
        padding: 1rem 1.5rem;
        font-size: 2.6rem;
        font-weight: 400;
    }         
    
    .footerSignature {
        padding: .5em;
    }
}

@media only screen and (max-width: 500px) {
    .slide_caption p {
        font-size:3.2rem;
    }
    .footerSignature {
        display: block;
    }
    .footerSignature div,
    .footerSignature p {
        display: block;
        width: 100%;
    }
}

/* GRID */
@supports (display: grid) {
    .subHeader .heroImg,
        .subHeader .catHeroContent,
        .subHeader .catUnstrHeading,
        .subHeader .copy,
        .catHeader .heroImg,
        .catHeader .catHeroContent,
        .catHeroContent .catUnstrHeading,
        .catHeroContent .catUnstrCap,
        .catTwoColumns > div, 
        .catThreeColumns > div, 
        .catFourColumns > div, 
        .catThreeColumns > div:first-child,
        .catTwoColumns > div:first-child, 
        .catFourColumns > div:first-child  {
            margin: 0 auto;
    }
    .header_container {
        display: grid;
        grid-template-areas:    "space logo search"
                                "support logo admin";
        grid-template-columns: 1fr minmax(200px, 300px) 1fr;
        grid-template-rows: 1fr 2fr;
        margin: 0 auto;
        max-width: 1250px;
    }
    .header_container .support {
        grid-area: support;
        width: 100%;
        padding: 10px;
    }
    .header_container .logo {
        grid-area: logo;
        width: 100%;
    }
    .header_container .search {
        grid-area: search;
        width: 100%;
    }
    .header_container .admin {
        grid-area: admin;
        width: 100%;
        padding: 10px;
    }
    .catHeader {
        display: grid;
        grid-template-columns: 4fr 3fr;
        grid-gap: 10px;
        grid-template-areas: "heroImg catHeroContent";
    }
    .catHeader .catHeroContent {
        grid-area: catHeroContent;
        
    }
    .catHeader .heroImg {
        grid-area: heroImg;
        min-height: 300px;
    }
    .footerSignature {
        display: grid;
        grid-template-columns: max-content 1fr;
        grid-template-rows: max-content;
        grid-gap: 10px;
    }
    .footerSignature .signatureLogo,
    .footerSignature .signatureCopy,
    .catHeader .heroImg,
    .catHeader .catHeroContent {
        width: 100%;
    }
    .catHeader .catHeroContent {
        display: grid;
        grid-auto-rows: min-content;
        grid-gap: 10px;
        min-height: 300px;
    }
    .subHeader {
        display: grid;
        grid-template-columns: 5fr 7fr;
        grid-template-areas: "copy headlines";
        min-height: 200px;
        grid-gap: 10px;
    }
    .subHeader .copy {
        grid-area: copy;
        width: 100%;
    }
    .subHeader .headlines {
        grid-area: headlines;
        display: grid; 
        grid-auto-rows: minmax(100px, 1fr);
        grid-gap: 10px;
        width: 100%;
        margin: 0;
    }    
    .catHeroContent .catUnstrHeading,
    .headlines .catUnstrHeading {
        padding: .5rem 1rem;
        display: flex;
        align-items: center;
    }
    .catHeroContent .catUnstrHeading,
    .catHeroContent .catUnstrCap,
    .headlines .catUnstrHeading {
        margin: 0;
    }
    .catFourColumns,
    .catThreeColumns,
    .catTwoColumns {
        display: grid;
        grid-gap: 10px;
    }
    .catFourColumns {
        grid-template-columns: repeat(4, 1fr);
    }
    .catThreeColumns {
        grid-template-columns: repeat(3, 1fr);
    }
    .catTwoColumns {
        grid-template-columns: repeat(2, 1fr);
    }
    .catFourColumns > div,
    .catThreeColumns > div,
    .catTwoColumns > div {
        width: 100%;
        margin: 0 auto;
    }
    .doorSwatchesMed {
        display: grid;
        grid-template-columns: 2fr 3fr;
        grid-gap: 10px;
    }
    li.doorSwatchesText {
        height: auto;
        min-height: 110px;
        padding: .1rem 0 0;
    }
    li.doorSwatchesText:first-child {
        padding: .2rem 0 0;
    }
    .doorFinishProcess {
        display: grid;
        grid-template-columns: 400px 1fr;
        grid-template-rows: 2fr 3fr 3fr 3fr 6fr;
        grid-gap: 10px;
    }

    @media only screen and (max-width : 1023px) {
        .header_container {
            grid-template-columns: 1fr minmax(200px, 250px) 1fr;
        }
    }

    /* ## Smartphones (portrait and landscape) ## */
    @media only screen and (max-width : 767px) {
        
        .catHeader {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: max-content;
            grid-gap: 10px;            
            grid-template-areas: "catHeroContent" "heroImg";
        }
        .catHeroContent .catUnstrHeading {
            margin: 0;
        }
        .header_container {
            grid-template-areas:    "logo"
                                    "support"
                                    "admin"
                                    "search" ;
            grid-template-columns: minmax(300px, 400px);
            grid-template-rows: min-content 1fr 1fr 1fr;
            margin: 0 auto;
            max-width: 400px;
        }
        .subHeader {
            grid-template-columns: 1fr;
            grid-template-areas: "headlines" "copy";
            margin: 0;
        }
        .catHeader .catHeroContent {
            display: grid;
            grid-auto-rows: min-content;
            grid-gap: 10px;
        }
        .catFourColumns,
        .catThreeColumns,
        .catTwoColumns {
            grid-template-columns: 1fr;
            grid-auto-rows: 1fr;
        }
        .footerSignature {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: max-content;
            grid-gap: 10px;
        }
    }   
}