/* --------------------------------------------------------- */
/* APPLE MACBOOK PRO RETINA ETC. --------------------------- */
/* --------------------------------------------------------- */
 
/* Retina Displays/Screens (2880x1800) --------------------- */
@media
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx) {
}
 
 
 @media only screen and (max-width: 970px) {
    
}
 
/* --------------------------------------------------------- */
/* SMARTPHONES, TABLETS & TINY DESKTOPS -------------------- */
/* --------------------------------------------------------- */
 
/* Old Smartphones (portrait and landscape) ---------------- */
@media
only screen and (min-device-width: 240px) and (max-device-width: 319px) {
    /* YOUR STYLES */
    
}
 
 
/* Old Smartphones (e.g. portrait) ------------------------- */
@media only screen and (max-width: 320px) {
    .mobileButton {
        display: block;
    }

    .locationPhoto {
        width: 100% !important;
    }

    #productActions {
        font-size: 0.875em;
    }

    a.callUs, a.callUs:link, a.callUs:visited, a.callUs:hover, a.callUs:active {
        width: 100%;
    }

    ul.productActionLinks li.print {
        display: none;
    }

    ul.productActionLinks li.email {
        padding-right: 0;
    }

    ul.productActionLinks li {
        width: 33.33333%;
    }
}
 
/* Smartphones (portrait and landscape) -------------------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 640px) {
    /* YOUR STYLES */
    
}
 
/* Smartphones (portrait) & Old SP (landscape) ------------- */
@media only screen and (min-width: 320px) and (max-width: 479px) {
    .mobileButton {
        display: block;
    }

    .locationPhoto {
        width: 100% !important;
    }

    a.callUs, a.callUs:link, a.callUs:visited, a.callUs:hover, a.callUs:active {
        width: 100%;
    }

    ul.productActionLinks li.email {
        padding-right: 0;
    }

    ul.productActionLinks li.print {
        display: none;
    }

    ul.productActionLinks li {
        width: 33.33333%;
    }
}

@media only screen and (max-width: 411px) {
    ul.productList {
		margin-left: 0;
	}
	ul.productList li
	{
		border-right: 0;
		width: 100%;
	}

    .contactUsPhotos ul li {
        width: 50%;
    }

	.subPage #catalogContainer img {
		width: 30%;
	}

	.subPage #catalogContainer .noResize img {
		width: 100%;
	}
	/* Force table to not be like tables anymore */
	table.form, table.form thead, table.form tbody, table.form th, table.form td, table.form tr { 
		display: block; 
	}
	
	table.form td { 
		/* Behave  like a "row" */
		position: relative;
        width: 100%; 
	}
	
	table.form td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 0;
		left: 0;
		width: 100%; 
		padding-right: 0; 
		white-space: nowrap;
	}

	table.addresses, table.addresses thead, table.addresses tbody, table.addresses th, table.addresses td, table.addresses tr { 
		display: block; 
	}
	
	table.addresses td { 
		/* Behave  like a "row" */
		position: relative;
        width: 100%; 
	}
	
	table.addresses td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 0;
		left: 0;
		width: 100%; 
		padding-right: 0; 
		white-space: nowrap;
	}

	table.creditcard, table.creditcard thead, table.creditcard tbody, table.creditcard th, table.creditcard td, table.creditcard tr { 
		display: block; 
	}
	
	table.creditcard td { 
		/* Behave  like a "row" */
		position: relative;
        width: 100%; 
	}
	
	table.creditcard td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 0;
		left: 0;
		width: 100%; 
		padding-right: 0; 
		white-space: nowrap;
	}

	table.checkout, table.checkout thead, table.checkout tbody, table.checkout th, table.checkout td, table.checkout tr { 
		display: block; 
	}
	
	table.checkout td { 
		/* Behave  like a "row" */
		position: relative;
        width: 100%; 
	}
	
	table.checkout td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 0;
		left: 0;
		width: 100%; 
		padding-right: 0; 
		white-space: nowrap;
	}

	table.receiptTotals, table.receiptTotals thead, table.receiptTotals tbody, table.receiptTotals th, table.receiptTotals td, table.receiptTotals tr { 
		display: block; 
	}
	
	table.receiptTotals td { 
		/* Behave  like a "row" */
		position: relative;
        width: 100%; 
	}
	
	table.receiptTotals td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 0;
		left: 0;
		width: 100%; 
		padding-right: 0; 
		white-space: nowrap;
	}

	table.receiptTotals tr.mobileNo {
		display: none;
	}

    .featured-image {
        display: none;
    }
}

@media only screen and (max-width: 555px)
{
    .mobileButton { display: block;}
	ul.subCats {
			width: 100%;
			margin: 0 0 1em 0;
		}
	ul.subCats li
	{
		border-right: 0;
		width: 100%;
	}

}


/*use same styles for all widths up to 640px might tweak some elements at 640.*/

@media only screen and (max-width: 640px)
{
    section.cmsContent {
        padding-right: 0;
    }
    
    #ShoppingLinks { display: none;}
    #SiteSearchBox { display: none;}
    #searchToggle { display: block;}
    #Logo { width: 100%;}
    #Logo img { height: 65px;margin-bottom: 7px;}

    section.catalogContainer {
        padding-left: 0;
        width: 100%;
        float: left;
    }

    .content {
        padding: 0 0.375em 0.938em 0.375em;
    }
    .home .contentSlides {
        padding: 0;
    }
	.home-slide-content
	{
		padding-bottom: 55.625%;
	}

	.home-slide-content .home-slide-full {
		display: none;
	}
	.home-slide-content .home-slide-mobile {
		display: block;
	}



    .content.header {
        padding: 0;
    }

    .content.navContent {
        padding: 0;
        min-width: 240px;
        max-width: none;
    }

    header {
        border-bottom: 1px solid #000;
    }

    header nav.desktop {
        display: none;
    }

    header nav.mobile {
        display: block;
    }


    .homeBuckets {
        padding: 0;
        padding-top: 0.938em;
    }

	#homeBanner {
		flex-direction: column;
	}

	.bannerInfoWindow {
		margin: 6px 0 0 0;
		background: #4b8faf url(../mm/images/home-callouts/infobanner-bg-mobile.jpg) center top no-repeat;
	}

    .bannerInfoWindowInner {
        line-height: normal;
        font-size: 1.500em; /* Approximation due to font substitution */
    }

   .banners {
        margin-bottom: 6px;
        min-height: 0;
        padding-bottom: 60px;
    }

    .bannerContainers {
        width: 100%;
    }

	.bannerContainers + .bannerContainers {
		margin-left: 0;
		margin-top: 11px;
	}

    .footerNestedColumn {
         margin-bottom: 25px;
    }

    .bannerMiddle {
        margin: 0;
    }

    #footerContainer {
        padding-top: 20px;
    }

    .footerColumn {
        width: 100%;
    }

	.footerColumn.narrowExtra
	{
		width: 100%;
	}

    .footerNestedColumn.narrow {
        width: 100%;
    }

    .footerNestedColumn.wide {
        width: 100%;
    }
    .footerNestedColumn.narrowExtra {
        width: 100%;
    }

    #footerContactForm input[type="text"], #footerContactForm textarea {
        width: 100%;
    }

    .homeBorderBottom {
        border-bottom: 0;
    }

	p.diolly
	{
		display: none;
	}

    .bx-wrapper img {
        max-width: none;
    }
	#subCategories, #PnlProducts
	{
		min-width: 0;
		width: 100%;
	}
	#leftNav
	{
		display: none;
	}
	#catalogContainer {
		margin-bottom: 1em;
		padding: 0;
		width: 100%;
	}
	#catalogSortBy
	{
		width: 100%;
	}
	#catalogSortBy select {
		width: 80%;
		float: left;
	}
		#catalogSortBy input[type=button]
		{
			float: right;
		}
		#breadCrumb { display: none;}

		.categoryHeader h1,
		.categoryHeader p.h1,
		.pageHeader h1 {
			font-size: 1.875em;
		}

		.giftIdeasColumn {
		width: 100%;
			padding-bottom: 1em;
}
        
}

@media only screen and (max-width: 800px) {
     ul.productActionLinks li {
        font-size: 0.875em;
    }
}

@media only screen and (max-width: 980px) {
    ul.productList li.list-item-move {
        -moz-transition: all 0.6s ease-in-out 0s;
        -o-transition: all 0.6s ease-in-out 0s;
        -webkit-transition: all 0.6s ease-in-out 0s;
        transition: all 0.6s ease-in-out 0s;
    }
}

 
/* Smartphones (landscape) & Old Tablets (Portrait) -------- */
@media
only screen and (min-width: 480px) and (max-width: 640px) {
	
    
}
 
 
/* Smartphones & Tablets (portrait & landscape) ------------ */
@media
only screen and (min-device-width: 640px) and (max-device-width: 960px) {
   
}
 

/********Styles for home banners******/
@media
only screen and (min-width: 641px) and (max-width: 986px) {
 .bannerContainers { width: 33.333%;}

    .bannerMiddle {
        margin: 0;
        
    }   


}

 
 /* desktop up to 980  -------- */
@media
only screen and (min-width: 641px) and (max-width: 980px) {
    /* YOUR STYLES */
	.content {
        padding: 0;
        max-width: none;
    }

	.content.navContent {
        padding: 0;
    }

	#site-search {
		width: 100%;
	}

	header nav
	{
		height: auto;
	}
    
	.sf-menu, .sf-menu * {
		font-size: 11px;
	}

	.sf-menu ul li a, .sf-menu ul li a:visited, .sf-menu ul li a:hover, .sf-menu ul li a:active {
		font-size: 11px;
	}

	.sf-menu a, .sf-menu a:visited {
		padding: 0 4px;
	}

	.sf-menu li:hover ul,
	.sf-menu li.sfHover ul {
		padding: 0 4px 2px 4px;
	}
}

/*********menu/rotating feature specific***********/
@media
only screen and (min-width: 641px) and (max-width: 698px) {
	header nav.desktop {
        display: none;
    }

    header nav.mobile {
        display: block;
    }

	p.diolly {
		display: none;
	}
}

@media only screen and (min-width: 699px) and (max-width: 799px)
{
	.sf-menu a, .sf-menu a:visited {
		padding: 0 4px;
	}

	.sf-menu li:hover ul,
	.sf-menu li.sfHover ul {
		padding: 0 4px 2px 4px;
	}

	p.diolly {
		display: none;
	}
}

@media only screen and (min-width: 800px) and (max-width: 874px)
{
	.sf-menu a, .sf-menu a:visited {
		padding: 0 8px;
	}

	.sf-menu li:hover ul,
	.sf-menu li.sfHover ul {
		padding: 0 8px 5px 8px;
	}

	p.diolly {
		display: none;
	}
}

@media only screen and (min-width: 875px) and (max-width: 1006px)
{
	.sf-menu a, .sf-menu a:visited {
		padding: 0 14px;
	}

	.sf-menu li:hover ul,
	.sf-menu li.sfHover ul {
		padding: 0 14px 5px 14px;
	}

	p.diolly {
		display: none;
	}
}

@media only screen and (min-width: 641px) and (max-width: 879px)
{
	#ShoppingLinks {
		font-size:0.813em;
	}

	.shoppingLinksSep {
		padding: 0 0.25em;
	}
}

@media only screen and (max-width: 885px)
{
	.contactUsPhotos {
	    width: 100%;
	}

    .contactUsHours {
        width: 100%;
    }
}

@media only screen and (max-width: 980px)
{
	#subCategories, #PnlProducts
	{
		min-width: 0;
		width: 100%;
	}
}

@media only screen and (max-width: 765px) {
    footer .content {
		padding: 0 0.375em 0.938em;
	}
	#footerContainer {
        padding-top: 20px;
    }

    .footerColumn {
        width: 100%;
    }

	.footerColumn.narrowExtra
	{
		width: 100%;
	}
    .footerNestedColumn.narrow {
        width: 100%;
    }

    .footerNestedColumn.wide {
        width: 100%;
    }
    .footerNestedColumn.narrowExtra {
        width: 100%;
    }

    #footerContactForm input[type="text"], #footerContactForm textarea {
        width: 100%;
    }

	.locationPhoto {
		width: 40%;
	}
}
@media only screen and (max-width: 805px) {
	
    .bannerInfoWindow {
         margin: 6px 0 0 0;
    }

	.bannerInfoWindowInner {
        line-height: normal;
        font-size: 1.500em; /* Approximation due to font substitution */
    }
}

/***********Product Detail***************/

@media only screen and (max-width: 520px)
{
	#ProductPhotos
	{
		width: 100%;
		height: auto;
	}
	#productDetails
	{
		float: left;
		width: 100%;
	}
}
 
/* Smartphones & Tablets (portrait) & Tiny Desktops -------- */
@media
only screen and (min-width: 640px) and (max-width: 799px) {
   
}

/* just menu specific for up to 980px; -------- */
@media
only screen and (min-width: 800px) and (max-width: 980px) 
{
    
}
 
 
/* Smartphones & Tablets (landscape) & Splitted Desktops --- */
@media
only screen and (min-width: 800px) and (max-width: 1000px) {
    /* YOUR STYLES */
    
}
 
 
/* --------------------------------------------------------- */
/* DEVICES BY RATIO ---------------------------------------- */
/* --------------------------------------------------------- */
 
/* LowRes (e.g. 240x320 / 320x480) ------------------------- */
@media
only screen and (min--moz-device-pixel-ratio: 0.75),
only screen and (-o-min-device-pixel-ratio: 3/4),
only screen and (-webkit-min-device-pixel-ratio: 0.75),
only screen and (min-device-pixel-ratio: 0.75),
only screen and (min-resolution: 0.75dppx) {
    /* YOUR STYLES */
}
 
 
/* HighRes ------------------------------------------------- */
@media
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 1.5dppx) {
    /* YOUR STYLES */
     
    /* e.g. HighRes Logo (use _2x as extension for double-sized images) */
    /* .logo {background-image: url(logo_2x.png); background-size: 50%;} */
}
 
 
/* RetinaRes Smartphones (e.g. iPhone 4 / portrait) -------- */
@media
only screen and (min--moz-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (-o-min-device-pixel-ratio: 3/2) and (orientation: portrait),
only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (min-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (min-resolution: 1.5dppx) and (orientation: portrait) {
    /* YOUR STYLES */
}
 
 
/* RetinaRes Smartphones (e.g. iPhone 4 / landscape) ------- */
@media
only screen and (min--moz-device-pixel-ratio: 1.5) and (orientation: landscape),
only screen and (-o-min-device-pixel-ratio: 3/2) and (orientation: landscape),
only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape),
only screen and (min-device-pixel-ratio: 1.5) and (orientation: landscape),
only screen and (min-resolution: 1.5dppx) and (orientation: landscape) {
    /* YOUR STYLES */
}
 
 
 
 
 
/* --------------------------------------------------------- */
/* IPADS --------------------------------------------------- */
/* --------------------------------------------------------- */
 
/* iPads (portrait and landscape) -------------------------- */
@media
only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    /* YOUR STYLES */
}
 
 
/* iPads (portrait) ---------------------------------------- */
@media
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    /* YOUR STYLES */
    html, body {max-width: 760px;}
    aside.rightNav { max-width: 180px;min-width: 140px; }
}
 
 
/* iPads (landscape) --------------------------------------- */
@media
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    html, body {min-width: 1000px;}
    aside.rightNav { max-width: 270px;min-width: 270px; }
    
    
}
 
 
/* iPad Retina (iPad 3; portrait and landscape) ------------ */
@media
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min-device-pixel-ratio: 2),
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min-resolution: 2dppx) {
    /* YOUR STYLES */
}
 
 
 
 
 
/* --------------------------------------------------------- */
/* COMPUTERS / OTHER DEVICES ------------------------------- */
/* --------------------------------------------------------- */
 
/* Displays/Screens (e.g. MacBook @ 1280x800) -------------- */
@media
only screen and (min-width: 1250px) and (max-width: 1409px) {
    /* YOUR STYLES */
}
 
 
/* Displays/Screens (e.g. 19" WS @ 1440x900) --------------- */
@media
only screen and (min-width: 1410px) and (max-width: 1649px) {
    /* YOUR STYLES */
}
 
 
/* Displays/Screens (e.g. 22" WS @ 1680x1050) -------------- */
@media
only screen and (min-width: 1650px) and (max-width: 1889px) {
    /* YOUR STYLES */
}
 
 
/* Displays/Screens (e.g. 24" WS @ 1920x1080) -------------- */
@media
only screen and (min-width: 1890px) and (max-width: 2529px) {
    /* YOUR STYLES */
}
 
 
/* Really Large Displays/Screens (e.g. 2560x1440) ---------- */
@media
only screen and (min-width: 2530px) {
    /* YOUR STYLES */
}