
/* Get rid of weird looking buttons on iphone */
input[type="button"], input[type="submit"], input[type="text"], input[type="password"]{
	-webkit-appearance: none!important;
}

/*hide main nav toggle on normal screens*/
a#toggleMainNav {
	display: none;
}

ul#mainNavList li a{
z-index: 999999 !important;
}
div#header, #contentWrap {
	width: 100%;
	max-width: 960px;
}

ul#mainNavList {
		max-height: 20em;
		display: block;
	}



/*MEDIA QUERIES
***************************************************/

.mainNavList.open {

}


@media all and (max-width: 960px) {

	/*GENERAL*/

	body {
		overflow-x: hidden;
	}
	
	div#contentWrap {
		width:98%;
		padding-left: 0;
	}
	div#content {
		width: 100%;
		padding-left: 0;
	}

	#banner {
		display: none;
	}

	/*MAIN NAV*/
	div#header ul, div#header h1 {
		float:none;
		width: 100%;
		position: static;
		clear: both;
		padding: 5px;

	}

	ul .subNavList1 {
		display: none;
	}

	a#toggleMainNav {
		display: block;
		width: 100%;
		height: 44px;
		margin:auto;
		position: relative;
		background: #080;
		cursor: pointer;
		border-radius: 3px;
		top:8px;
	}

	a#toggleMainNav img {
		display: block;
		width: 44px;
		height: 44px;
		position: absolute;
		right: 0;
		top: 0;
		border-left: 1px solid #fff;
		z-index: 50;
	}

	a#toggleMainNav span.pageTitle {
		color: #fff;
		text-transform: uppercase;
		text-decoration: none;
		font-size: 22px;
		display: inline-block;
		padding: 0 45px 0 3%!important;
		line-height: 44px;
	}
	div#mainNav ul#mainNavList li.navhome a:hover, div#mainNav ul#mainNavList li.navhome.onPath a {
		margin: auto;
	}
	a#toggleMainNav img {
		width:44px;
		height:44px;
	}
	
	div#mainNav {
		position: static;
		float: left;
		margin-right: 0;	
		width: 100%;	
	}

	div#header ul#mainNavList {
		height: auto;
		width: 100%;
		margin: auto;
		border-radius: 5px;
		padding: 8px 0 0 0;
	}


	ul#mainNavList li {
		float: none;
		width: 100%;
		display:block;
		position:relative;
		float: none;
		background:#000;
		
	}
	ul#mainNavList li a:link, ul#mainNavList li a:visited{
		color:#fff;
		text-align: center;

	}
	
	ul#mainNavList li a:hover{
	color: #000;
	}

	div#header ul#mainNavList {
		height: 0;
		overflow: hidden;
		transition: height 4s;
	}
	div#header ul#mainNavList.open {
		height: auto;
		overflow: visible;
	}
	div#mainNav{
		height: auto;
	}


	/*END OF MAIN NAV */

	/* HEADER */
	
	form.search input.btn {
	position: static;
	}
	div#mainNav ul#mainNavList li.navceramicxshop a{
		left: 0;
	}


	/*CONTENT*/


	div#wrap{
		margin: 0 1%;

	}
	div#wrap ul.productCategories li, div#wrap ul.productCategories li.last {
		width: 50%;
		box-sizing:border-box;
	}
	ul#quickLinksList li {
		width: 48%;

	}
	ul#quickLinksList li img {
		width: 100%;
		height:auto;
	}


	div#contentSections {
		width: 100%;
	}

	div#contentSections .box {
		width: 98%;
		  border-bottom: 3px solid green;
	}
	div#contentSections a , form.newsletter input.btn{
		margin-right: 40px;
	}
	div#wrap ul.productList li {
		width: 50%;
		box-sizing:border-box;
	}
	div#contentSections{
		border: none;
	}

	/* FOOTER */
	div#footerInner{
		width: 100%;
	}

	div#bottomInner {
		width: 98%;
		margin: 0 1%;
	}
	div.footerColumn {
  	width: 50%;
  	float: left;
  	padding-left: 1%;
  	box-sizing: border-box;
  	height: 250px;
  	}

  	div#footerContact{
  		float: left;
  	}
  	img#footerCards{
  		left:0;
  	}

  	div#footerContact{
  		width: auto;
  	}
  	div#leftNav{
  		width: 100%;
  	}
  	

  	/* In this section */

	div#leftNav.open {
	height: auto;
	}
	div#leftNav {
	overflow: hidden;
	height: 50px;
	
	}
	div#leftNavInner {
		border-radius: 0;
		padding: 7px 0;
	}
	.open div#leftNavInner {
		border-radius: 6px;
	}
	h3#hdInThisSection{
		position: relative;
	}

	h3#hdInThisSection:after{
		content: "+";
		float: right;
		color: #000;
		font-size: 3em;
		position: absolute;
		top: -8px;
		right:8px;
	}
	.open h3#hdInThisSection::after{
		content: "_";
		top:-22px;
	}

  	/* PRODUCT PAGE */
  	div#contentWrapWide, div#contentWrapWide div#content{
  		width: 100%;

  	}
  	 div#contentWrapWide div#content {
  	 	clear: both;
  	 }

  	/*CHECKOUT */
  	div.checkout {
  		width: 100%;
  		float:none;
  	}
  	div.checkout div.box {
  		float: left;
  	}

   /* product page note*/
   span#products-xmas-shipping {
   		float: left;
	    font-size: 12px;
	    margin: 0;
	    width:100%;
	    margin-left: 11px;
	    margin-top: 5px;
	}


	div.productDetail div.productImages, div.productDetail div.text {
	   box-sizing: border-box;
		width: 100%;
		padding: 0 20px;
	}
	div.productDetail div.text {
	  margin: 10px 0;
	}
	a#toggleMainNav span.pageTitle {
	  font-size: 16px;
	  padding: 4px 45px 0 3%;
	}
	.slick-slide img {
	  margin: 0 auto;
	}
	#path > ul {
	  padding-left: 5px;
	}
	div.company .flags {
		width: 100%;
		box-sizing: border-box;
	}
}








@media all and (max-width: 760px) {

	.researchForm h1#pageTitle {
		width: 100%;
		font-size: 40px;
		line-height: 40px;
	}

	#content > div > div.bodyContent, .researchForm #content > div > div.bodyContent {
		width: 100%;
		float: none;
	}

	div.copy div.formSignup {
		width: 100%;
		float: none;
		top: 0;
		margin-top: 30px;
	}

	div.copy img {
		margin: 10px;
		max-width: 100% !important;
		height: auto!important;
		box-sizing: border-box;
		display: block;
	}

}

@media all and (max-width: 610px) {

	div#header div.search, div#header div.cart{
		display: none;
	}
	div#header h1{
		  background: transparent url('../images/layout/logo.png') center top no-repeat;
	}

	div#wrap ul.productCategories li, div#wrap ul.productCategories li.last, ul#quickLinksList li {
		float: :none;
		width: 100%;
	}
	div#header ul{
		text-align: center;
	}
	div#header ul li {
		float: none;
		display: inline-block;
	}
	ul#topNavList {
		margin: 0;
	}
	div#header {
		height: 155px;
		margin-bottom: 40px;
	}
	div#wrap ul.productList li {
		float: none;
		width: 100%;
	}
	div.productSearch h3 {
		top:0;
	}
	div#contentWrap div.productSearch form{
		margin: 0;
	}
	div#path {
		height: 35px;
	}
	.productImages .slick-slide img {
	  height: auto;
	  width: 100%;
	}
	.productImageSliderMaster img.medium {
	  width: 100%;
	}
	div.productDetail p.summary {
	  line-height: 20px;
	  padding: 0 0 15px;
	}
	div.copy ul.wideProductCategories li {
		float: none;
		width: 100%;
	}
	h1#pageTitle {
		font-size: 22px;
	}
	#productTab4Content {
		padding-left: 20px;
	}


	.videoBox .video-item {
		padding-left: 5px;
		padding-right: 5px;
	}
	#play {
		background-size: 30%;
	}

	

}

@media all and (max-width: 520px) { 

	div.productDetail div#productSlides, div.productDetail div#productSlides div.largeImage ,div.productDetail div#productSlides div.largeImage img.medium {
	  width: 100%;
	 height: 300px;
	}

}

@media all and (max-width: 460px) {
	.tabbedContent ul.tabs li a {
		font-size: 12px;
		padding-left: 6px;
		padding-right: 6px;
	}
	.tabbedContent ul.tabs {
		padding-left: 2px;
	}
	div.tabContent {
	  padding: 20px 10px 10px;
	 }
	div.tabContent table {
		 font-size: 12px;
	}
	div.tabbedContent {
	  margin: 20px 0 10px;
	}
	

}
@media all and (max-width: 410px) {
	div.footerColumn{
		float:none;
		width: 100%;
		text-align: center;
		height: auto;
	}
	div#path{
		height: 65px;
	}
	p span.phone, p span.email {
		background-image: none;

	}
	div#footerContact{
		text-align: center;
		float: none;
	}
	span#products-xmas-shipping {

    margin-top: 9px;
	}
	a#toggleMainNav span.pageTitle {
	  font-size: 13px;
	}

	div.copy table td {
	  padding: 10px 3px;
	}
	div.productDetail div#productSlides {
		height: 270px;
	}
	div.productDetail div#productSlides div.largeImage,
	div.productDetail div#productSlides div.largeImage img.medium {
		height: auto;
	}

}
	
@media all and (max-width: 360px) {
	a#toggleMainNav span.pageTitle {
	  font-size: 12px;
	}
}


