@charset "utf-8";
/* # Medallion Cabinetry CSS Document # */
/* esite_media.css */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/* # Width up to 1500 # */ 
/* ## - Desktops  ## */
/* Allow for padding when the design gets too close to the edge. */
@media only screen and (max-width: 1500px) {
	.slider_bg_img { height: 600px;}
}

/* # Width up to 1280 # */ 
/* ## - Desktops  ## */
/* Allow for padding when the design gets too close to the edge. */
@media only screen and (max-width : 1199px) {
	.contentwrapper,
	#logo { padding-right: 10px; }
	header .contentwrapper { 
		padding-left: 0; 
		padding-right: 0; 
		overflow: visible;
	}
	#main_nav li a:link, #main_nav li a:visited {
		margin: 0;
		font-size: 16px;
		letter-spacing: 0;
	}
	#main_nav li ul li {
		background-image: none;
	}
	.stains_module {
		background: url(../images/bg_stains_mb-11.jpeg) no-repeat;
	}
	.highlights_module {
		background: url(../images/bg_highlights_mb-12.jpeg) no-repeat;
	}
	.finish_gallery_module {
		background: url(../images/bg_finish_gallery_mb-12.jpeg) no-repeat;
	}
	.glaze_module {
		background: url(../images/bg_glaze_mb-13.jpeg) no-repeat;
	}
	.classic_paint_module {
		background: url(../images/bg_classic_paint_mb-14.jpeg) no-repeat;
	}
	.highlight_paint_module {
		background: url(../images/bg_highlight_paint_mb-15.jpeg) no-repeat;
	}
	.vintage_paint_module {
		background: url(../images/bg_vintage_paint_mb-16.jpeg) no-repeat;
	}
	.heirloom_paint_module {
		background: url(../images/bg_heirloom_mb-12.jpeg) no-repeat;
	}
	.distressing_module {
		background: url(../images/bg_distressing_mb-15.jpeg) no-repeat;
	}
	.stains_module, .highlights_module, .finish_gallery_module, .glaze_module, .classic_paint_module, .highlight_paint_module, .vintage_paint_module, .heirloom_paint_module, .distressing_module {
		padding: 5% 1% 1% 15%;
}
}

/* # Width up to 1024 # */ 
/* ## - Tablet and small screens  ## */
/* Keeping mainly same layout but allowing different menu styles */
@media only screen and (max-width : 1023px) {
	.showtablet { display: block; }
	.hidetablet { display: none; }
	
	
	#SearchBar {
	    float: right;
	    clear: none;
		width: 35%;
		margin: 10px;
	}
	#logo {
		float: none;
		clear: both;
		margin: 0 auto;
		padding: 20px 0px 30px;
	}
	#main_nav {
		text-align: center;
		min-width: 750px;
	}
	#main_nav li {
		background-image: url(../images/med_arrow_down-66.png);
		background-position: center 85%;
		height: 61px;
	}
	#main_nav li ul li {
		background-image: none;
	}
	#main_nav li a:link, #main_nav li a:visited {
		font-size: 14px;
		padding: 0 2px 5px;
		line-height: 1;
	}

	#search .flyout {
	    width: 90%;
	}
	.content_container_bl {
		display: none;
	}
	.resp-tab-active { display: block !important; }
	.resp-arrow { display: none; }
	h2.resp-accordion {
		margin-bottom: 1px !important;
		min-height: 30px;
		color: #fff;
		line-height: 1;
		padding: 15px 27px;
		background-image: url("../images/arrow_down-54.png");
		background-color: #75b1be;
		background-repeat: no-repeat;
		background-position: 98% 20px;
	}
	h2.resp-accordion.resp-tab-active {
		background-image: url("../images/arrow_down-65.png");
	}
	h2.resp-accordion h2.platinum,
	h2.resp-accordion h2.gold,
	h2.resp-accordion h2.silverline {
		color: #fff;
	}
	#product_tabs1 .crossSells img {
		width: 100%;
	}
	.resp-tab-content-active {
		overflow: hidden;
	}
	.quizAnswer h1 {
		margin: 20px 0 35px;
	}
	h4.main_module_heading { 
		font-size: 50px;
		max-width: 1150px;
	}
	
	/* Bath Silhouettes */
	.slide_with_bg .cta_block {
		right: 25px;
		width: 750px;
		height: 352px;
	}
	.slide_with_bg .cta_block h1 {
		font-size: 3.7em;
	}
	.slide_with_bg .cta_block p {
		font-size: 2.3em;
	}
	
	.slide_with_bg .slide_cta:link, .slide_with_bg .slide_cta:visited {
		font-size: 2.3em;
	}
	.portico {
		background-image: url();
	}
	.solare {
		background-image: url();
	}
	.veranda {
		background-image: url();
	}
	.galleria {
		background-image: url();
	}
	.mezza {
		background-image: url();
	}
	.terrace {
		background-image: url();
	}	
}
/* # Max-width: 767px # */
/* ## Phones & small tablets ## */
@media only screen and (max-width: 767px) 
{
	.showmobile { display: block; }
	.hidemobile { display: none; }
	#cart
	{
		border-top: 1px solid #d8d8d8;
	    border-bottom: 1px solid #d8d8d8;
	    display: block;
	    height: 50px;
	    float: none;
	    margin-bottom: 30px;
	    margin-left: auto;
	    margin-right: auto;
	    padding: 0px;
	    width: 126px;
	}
	#widget_cart input
	{
		margin: 0px;
	}

	.contentwrapper { padding: 0 10px; }
	.slicknav_menu { 
		display: block;
		clear: both;
		width: 100%;
		background-color: #F7F6F6;
		box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);
	}
	#mobileBack {
		margin: 10px;
	}
	#mobileBack a {
		color: #919196;
		font-size: 26px;
		text-shadow: none;
		padding: 3px;
		text-transform: uppercase;
	}
	#main_nav {
		display: none;
	}
	#supportZone {
		margin: 0;
		padding: 0;
		line-height: 1;
	}
	#supportZone .links {
		width: 100%;
		margin: 0;
		padding: 0;
		text-align: center;
	}
	#supportZone .links li {
		display: block;
		float: left;
		width: 33%;
	}
	#supportZone .links li a {
		display: inline-block;
		border: none;
	}
	#SearchBar {
		float: none;
		clear: both;
		margin: 0 auto;
		padding: 0 0 10px;
		width: 100%;
		max-width: 320px;
	}
	footer .elkay {
		float: none;
		width: 100%;
		margin: 10px 0;
		text-align: center;
	}
	footer .links {
		width: 100%;
	}
	footer .links li {
		width: 50%;
		margin: 0;
		float: left;
	}
	footer .links li:nth-child(even) a {
		text-align: left;
		padding: 8px;
	}
	footer .links li:nth-child(odd) a {
		border: 0;
		padding: 8px;
	}

	#social_share_container {
		float: none;
		clear: both;
		margin: 30px auto 10px;
	}
	#social_share {
		text-align: center;
	}
	.jssorb21 { bottom: -25px !important; }
	.oneHalfSlider p, .oneHalfSlider h1 { display: none; }
	.oneHalfSlider .slide_cta { 
		font-size: 48px; 
		border: 0 !important; 
		letter-spacing: 2px !important;
		margin-left: 20px;
	}
	.oneFourthColumn_home_cta {
		margin-left: 0%;
		width: 50%;
	}
	h4.main_module_heading { 
		font-size: 60px;
		line-height: 1.2;
		top: 0px;
		margin-top: 0;
		width: 100%;
		max-width: 100%;
		z-index: 999; 
	}
	
	.homeCTABlock .oneHalfColumn {
		float: left;
		clear: none;
		margin-left: 2%;
		padding: 0;
		width: 48%;
		max-width: 48%;
		min-width: 48%;
	}
	.homeCTABlock .oneHalfColumn img {
		width: 100%;
	}
	#quizNavButtonContainer {
		max-width: 460px;
		margin: 0 auto;
	}
	.quizNavButton {
		width: 200px;
		max-width: 200px;
		min-width: 200px;
		margin: 5px;
	}
	.quizNavButton .button,
	#quizFacebookButton, #quizTwitterButton,
	#quizStartButton, .quizNavButton a.button:link, .quizNavButton a.button:visited {
		width: 100%;
		min-width: 100%;
		height: 70px;
		padding: 22px 10px;
		font-size: 18px;
		letter-spacing: 0; 
	}
	.quizStartText { width: auto; }
	.quizStartImg div { width: 33%; }
	#quizFacebookButton, #quizTwitterButton {
		padding: 12px 10px 12px 50px;
	}
	#widget_left_nav_toggle {
		background-image: url(../images/mc_facet_closed-14.png);
		background-color: #E3ECEE;
		background-repeat: no-repeat;
		background-position: 8px 8px;
		padding: 10px 10px 10px 40px;
	}
	#widget_left_nav_toggle.opened {
		background-image: url('../images/mc_facet_open-14.png');
	}
	#widget_left_nav {
		display: none;
	}
	#widget_left_nav.opened {
		display: block;
		padding-top: 10px;
	}
	#breadCrumb {
	    margin: 10px 0 0;
	    padding: 0px;
	    clear: both;
	    width: 100%;
	    float: none;
	}
	h1 {
		font-size: 26px;
	}
	.shortDescription {
		background-image: url(../images/arrow_down-44.png);
		background-position: 10px 15px;
	}
	#search .flyout {
	    width: 90%;
	    margin-right: 5%;
	}
	.doorImageColumn {
        float: none;
        margin: 0 auto 10px;
        max-width: 450px;
        min-width: 300px;
        padding: 0 0 18px;
        width: 100%;
    }
    .main_img_caption {
  		position: relative;
		bottom: 0;
		opacity: 1;
	}
 	.eSpotSlideContainer .main_img_caption {
		font-size: 36px;
		position: absolute;
		bottom: 50px;
		opacity: .9;
	}
	.eSpotSlides .main_img_caption a {
		font-size: 28px;
	}
	
	.distressingHeader {
		width: 100%;
		margin-right: 0;
	}
	
	/* Bath Silhouettes */
	.slide_with_bg .cta_block {
		height: 700px;
		padding: 240px 20px 100px;
	}
	.slide_with_bg .cta_block h1 {
		font-size: 7em;
	}
	.slide_with_bg .cta_block p {
		display: none;
	}
	.slide_with_bg .slide_cta:link, .slide_with_bg .slide_cta:visited {
		font-size: 3.5em;
	}
	.portico {
		background-image: url();
	}
	.solare {
		background-image: url();
	}
	.veranda {
		background-image: url();
	}
	.galleria {
		background-image: url();
	}
	.mezza {
		background-image: url();
	}
	.terrace {
		background-image: url();
	}	
}

/* ## Phones only ## */
@media only screen and (max-width : 479px) 
{
	.homepage .oneThirdColumn .home_module_bg,
	.homepage .oneThirdColumn a:first-child .home_module_bg {
		width: 100%;
		margin: 10px 0;
	}
	
	#supportZone .links li {
		display: block;
		float: left;
		width: 50%;
	}	
	
	.resp-tabs-container .crossSells {
		width: 40%;
		margin: 2% 5%;
		min-height: 300px;
		font-size: 90%;
	}
	.resp-tabs-container .crossSells p {
		min-height: 50px;
	}
	
	.searchProductRelatedImage.crossSellImage {
		padding-right: 0;
	}
	
	/* Style Quiz */
	.quizFirstQuestion, .quizQuestion {
		padding: 0 2% 2%;
	}
	.quizQuestion h2, .quizFirstQuestion h3, .quizFirstQuestion p {
		font-size: 1em;
	}
	.quizSubQuestion {
		width: 100%;
		margin: auto auto 20px -4px;
	}
	.quizSubQuestion input {
		width: 20px;
	}
	.quizSubQuestion span {
		padding: 0;
	}
	#quizNavButtonContainer {
		padding: 2%;
	}
	.quizNavButton {
		width: 47%;
	}
	.quizNavButton a {
		margin: auto;
	}
	.quizAnswer h2 {
		text-align: center;
	}
	.quizAnswer h3 {
		margin: 10px 10%;
	}
	
	.distressingOptionContainer input {
		clear: both;
	}
}

/* Specific for cross Sells JSSOR */
@media only screen and (min-width: 821px) and (max-width: 1023px) 
{
	.resp-tabs-container .crossSells {
		width: 18%;
		margin: 2% 1%;
		min-height: 330px;
		font-size: 90%;
	}
}
@media only screen and (min-width: 641px) and (max-width: 820px) 
{
	.resp-tabs-container .crossSells {
		width: 23%;
		margin: 2% 1%;
		min-height: 360px;
		font-size: 90%;
	}
}
@media only screen and (min-width: 480px) and (max-width: 640px) 
{
	.resp-tabs-container .crossSells {
		width: 30%;
		margin: 2% 1%;
		min-height: 360px;
		font-size: 90%;
	}
}

.firstColumn { margin-left: 0 !important; }

/* search tabs */
@media only screen and (max-width: 520px) 
{
	.ui-tabs .ui-tabs-nav li a { 
		font-size: 11px;
		padding-top: 21px !important;
	}
}

/* Feature Queries */
@supports (display: flex) {
	.eqHeight {
		display: flex;
		align-items: stretch;
	    flex-wrap: wrap;
	}
	.jst-center {
		justify-content: center;
	}
	.jst-between {		
		justify-content: space-between;
	}
	.jst-around {		
		justify-content: space-around;
	}
	.vFlex {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	.alignTop {
		align-self: flex-start;
	}
	.alignCenter {
		align-self: center;
	}
	.alignBottom {
		align-self: flex-end;
	}
}
@supports not (display: flex) { 
	/* fall back styles if needed */
	.eqHeight {
		height: 300px;
		display: table;
	}
	.eqHeight div {
		height: 300px;
		display: table-row;
	}
	.vFlex {
		display: table;
	}
	.vFlex > div {
		display: table-cell;
		height: 100%;
	}
	.alignTop {
		vertical-align: top;
	}
	.alignCenter {
		vertical-align: middle;
	}
	.alignBottom {
		vertical-align: bottom;
	}
 }