/* Min Size Desktop Width - based on .wrapper width */
@media only screen and (max-width: 960px) {
	.wrapper, .main-container .wrapper{width: 98% !important; margin: 0; padding: 0 1% !important;}
	.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c10, .c11, .c12{width: 95% !important; margin: 10px 0 !important; padding: 0 2.5% !important;}
}

/* Mobile */
@media only screen and (max-width: 640px) {
	.wrapper{width: 100% !important; margin: 0; padding: 0 !important;;}
	.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c10, .c11, .c12{width: 95% !important; margin: 10px 0 !important; padding: 0 2.5% !important;}

	a[href^=tel]{color:inherit !important; text-decoration:none !important;}
	
	/* Header container */
	.header-container{height: auto; text-align: center; padding-top: 30px;}
	.header-container .wrapper{height: auto;}
	.header-container .wrapper .c12{margin: 0 !important;}
	.header-container #searchclickmenu{cursor: pointer; position: absolute; top: 4px; right: 10px; padding: 2px; color: #fff; text-decoration: none;}
	.header-container #submenumobile{display: block; background-color: #488EEA; margin: 0; padding: 5px 0;}
	.header-container #submenumobile li{float: left; border-right: 1px solid #FFF; padding: 2px 10px; margin-bottom: 0;}

	/* Header container - Mobile Menu - Lines or Down arrow for the icon */
	.header-container #mobileclickmenu{background: #006501 url("../images/mobile-menu-lines.png") no-repeat 4px 5px; border-bottom: 1px solid #fff; height: 25px; width: calc( 100% - 33px ); cursor: pointer; position: absolute; top: 0px; left: 0px; padding: 4px 0 0 33px; color: #FFF; text-align: left;}

	/* Header container - Logo */
	.header-container .wrapper img.logo{margin: 20px 0; display: block; cursor: pointer;}

	#topmenuholder{position:relative; top: auto; right: auto;}

	/* Header container - Main menu */
	.menu-container .c12{width: 100% !important; padding: 0 !important;}
	.menu-container ul{z-index: 100; height:auto; width: auto; position: relative; top: auto; right: 0; margin: 0 0 0 0; padding: 0; border-top: 1px solid #CCC; z-index: 300000; background: #006501;}
	.menu-container ul li{width: 100%; float: none; top: auto; display: block; margin: 0 !important; text-align: center; border: none; border-bottom: 1px solid #CCC; padding: 0;}
	.menu-container ul li:hover{}
	.menu-container ul li.selected{}
	.menu-container ul li a{display: block; cursor: pointer; padding: 10px 0; color: #fff}
	.menu-container ul li:hover a{}
	.menu-container ul li.selected a{background-image: none;}
	.menu-container ul li ul{padding: 0; position: relative; top: auto; left: auto; width: auto; z-index: 1000;}
	.menu-container ul li ul li a{text-align: center; border: none;}
	
	/* Contact form */
	.contact-form .c4-left{width: 95%; margin: 0 2.5%;}
	.contact-form .c8-right{width: 95%; margin: 0 2.5%;}
	.contact-form textarea{min-height: 150px; max-height: 150px;}

	/* Footer container */
	.footer-container .wrapper{text-align: center; color: #FFF; font-size: 1em;}
	.footer-container .small-link {display: none;}
	.sub-footer-container ul{display: block !important; border: none; text-align: center;}
	.sub-footer-container ul li{padding: 3px 0; font-size: 0.9rem;}
	.sub-footer-container ul li a{color: #000;}
	.sub-footer-container p{text-align: center;}

	aside{display: none;}

    .desktophidden{display: block;}
    .mobilehidden{display: none;}

	/* Cookie container - Cookie Specifics */
	.cookie-container .wrapper{padding: 1% !important; width: 98% !important;}
	.cookie-container aside{display: block !important; font-size: 0.8rem}
	.cookie-container aside p{display: inline-block !important; line-height: 1rem}
	.cookie-container aside div{display: inline-block !important;}
	.cookie-container aside #cookiespopupclose{text-align: right; display: inline-block !important; position: static !important; top: auto !important; right: auto !important; margin-left: 1% !important; width: 98% !important}
	
	/* Shopping -- REMOVE IF NOT NEEDED */
	.category-menu-container ul li {width:100%; padding-top:0; margin-bottom:20px;}
	.category-menu-container ul li a {width:100%; text-align:center; padding:85px 0 0 0;}
	
	.header-container #minibasketwrapper {top:-54px; z-index:1000000;}
	.header-container #minibasket {margin-top:-7px; background:#363B8C}
	.header-container #minibasket h4 {margin-top:0; font-weight:400}
	.customer-menu {display:none;}
	
	.main-container .product-item-wrapper {width: 100%}
	.main-container .product-item-wrapper .product {margin-bottom:10px}
	.main-container .product-item-wrapper .product img {margin:0 auto;}
	
	.main-container .product-item-wrapper .product .product-image {height:auto !important; display:block !important;}
	
	#quicksearchfilterform {margin-bottom:0 !important;}
	#quicksearchfilterform .price {padding:0 !important;;}
	
	#quicksearchfilterform .productkeywords input {margin-bottom:10px !important; padding: 3px 10px !important;}
	#quicksearchfilterform p {font-size:1em;}
	#quicksearchfilterform p.resetform {font-size:1.2em}
	
	.product-orderby {position:static;}

	.basket-table {width:100% !important; margin:20px auto 0 auto !important; }
	.basket-table, 
	.basket-table thead, 
	.basket-table tbody, 
	.basket-table th, 
	.basket-table td, 
	.basket-table tr {display: block; }
	.basket-table thead tr {position: absolute; top: -9999px; left: -9999px;}
	.basket-table tr {border: 1px solid #ccc;}
	.basket-table tr:not(.summaryrow) td {border: none !important; border-bottom: 1px solid #eee; position: relative;padding-left: 50% !important; }
	.basket-table tr:not(.summaryrow) td:before { position: absolute;top: 10px;left: 6px;width: 45%; padding-right: 10px; white-space: nowrap;}
	.basket-table tr:not(.summaryrow) td:nth-of-type(1):before { content: "Item";}
	.basket-table tr:not(.summaryrow) td:nth-of-type(2):before { content: "Price";}
	.basket-table tr:not(.summaryrow) td:nth-of-type(3):before { content: "Quantity";}
	.basket-table tr:not(.summaryrow) td:nth-of-type(4):before { content: "";}
	.basket-table tbody tr td a.removelink {width:70px;}
	
	.basket-table tr.summaryrow {border:none; }
	.basket-table tr.summaryrow td {display:inline-block; border:none !important;}
	.basket-table tr.summaryrow td:nth-of-type(1) {width:5%;}
	.basket-table tr.summaryrow td:nth-of-type(2) {width:45%}
	.basket-table tr.summaryrow td:nth-of-type(3) {width:5%;}
	
	.basket-table tr.updatebasketrow {border:none; }
	.basket-table tr.updatebasketrow td {display:inline-block; border:none !important;}
	.basket-table tr.updatebasketrow td:nth-of-type(1) {width:90%;}
	.basket-table tr.updatebasketrow td:nth-of-type(1):before { content: "";}
	.basket-table tr.updatebasketrow td input {width:90% !important;}
	.basket-table tr.updatebasketrow td .button {width:49% !important; margin-right:1px !important; padding:5px 10px !important;}
	.basket-table tr.updatebasketrow td:nth-of-type(2) {width:1%}
	.basket-table tr.updatebasketrow td:nth-of-type(3) {width:1%;}
	
	.main-container .basket-form .update-button {position:static; width:100%}
	.main-container .full-basket-wrapper .card-holder-form {position:static; width:100%;}
	.main-container .full-basket-wrapper .card-holder-form input.button {width:100%;}
	
	.delivery-details {float:none !important; margin-left:-10px !important; width:100%; height:auto !important; margin:0;}
	.delivery-details label {display: block; width:100%;}
	.delivery-details input {width:100%; display:block;}
	
	.billing-details {float:none !important; margin-top:50px !important;; margin-left:-10px !important; width:100%; height:auto !important; margin:0;}
	.billing-details label {display: block; width:100%;}
	.billing-details input {width:100%; display:block;}
	
	#billing-different {margin-bottom:20px;}
	#billing-different label {width:220px; float:left;}
	#billing-different input {}
	
	.register-new .account-fields label {width:90%}
	.register-new .account-fields input {width:90%}
	
	.checkout-extra{float:none !important; margin-top:20px !important;; margin-left:-10px !important; width:100%; height:auto !important; margin:0;}
	.checkout-extra label {display: block; width:100%;}
	.checkout-extra input {width:100%; display:block;}
	.checkout-extra textarea {width:100% !important;; display:block;}
	
	#orderconfirmation {margin-left:-30px; width:100%;}
	#orderconfirmation table {}
	#orderconfirmation table tr td {text-align:left; vertical-align: top;}
	#orderconfirmation table tr td:nth-of-type(1) {width:80% !important; display:block;}
	#orderconfirmation table tr td:nth-of-type(2) {width:20% !important; }
	
	#itembreakdowntable {width:110% !important; margin:20px auto 0 auto !important; }
	#itembreakdowntable, 
	#itembreakdowntable thead, 
	#itembreakdowntable tbody, 
	#itembreakdowntable th, 
	#itembreakdowntable td, 
	#itembreakdowntable tr {display: block;}
	#itembreakdowntable thead tr {position: absolute; top: -9999px; left: -9999px;}
	#itembreakdowntable tr {border: 1px solid #ccc;}
	#itembreakdowntable tr:not(.summaryrow) td {border: none !important; border-bottom: 1px solid #eee; position: relative;padding-left: 50% !important; }
	#itembreakdowntable tr:not(.summaryrow) td:before { position: absolute;top: 10px;left: 6px;width: 45%; padding-right: 10px; white-space: nowrap;}
	#itembreakdowntable tr:not(.summaryrow) td:nth-of-type(1) { width:auto !important;}
	#itembreakdowntable tr:not(.summaryrow) td:nth-of-type(2) { width:auto !important;}
	#itembreakdowntable tr:not(.summaryrow) td:nth-of-type(1):before { content: "Item"; width:auto;}
	#itembreakdowntable tr:not(.summaryrow) td:nth-of-type(2):before { content: "Quantity";}
	#itembreakdowntable tr:not(.summaryrow) td:nth-of-type(3):before { content: "Item Ex Vat";}
	#itembreakdowntable tr:not(.summaryrow) td:nth-of-type(4):before { content: "Item Vat";}
	#itembreakdowntable tr:not(.summaryrow) td:nth-of-type(5):before { content: "Item Inc Vat";}
	#itembreakdowntable tr:not(.summaryrow) td:nth-of-type(6):before { content: "Line Ex Vat";}
	#itembreakdowntable tr:not(.summaryrow) td:nth-of-type(7):before { content: "Line Vat";}
	#itembreakdowntable tr:not(.summaryrow) td:nth-of-type(8):before { content: "Line Inc Vat";}
}