/* Responsive CSS for secure pages */

/*--------------- Useful for block switching --------------*/
/*---------------------------------------------------------*/
	
.hideOnPhone{
	display:block;
}
.hideOnSmallTablet{
	display:block;
}
.showOnPhone{
	display:none;
}
.showOnSmallTablet{
	display:none;
}

/*Apply to all Responsive*/
@media (max-width: 999px) {
	/*--------------- Structure --------------*/
	/*----------------------------------------*/
	
	img{
		max-width: 100%;
		height: auto;
	}
	
	.wrapper-inner {
		padding-left: 2%;
		padding-right: 2%;
		width: 96%;
	}
	
	#header_graphic{
		z-index:600;
	}
	
	#header-left {
		width: 25%;
	}
	#header-centre {
		margin-left: 2%;
		margin-right: 2%;
		width: 46%;
	}
	
	#centerc-1col {
		width: 100%;
	}
	
	#checkout-steps-container {
		width: 100%;
	}
	.checkout-steps {
		padding-left: 2%;
		width: 25%;
	}
	#checkout-container {
		background-position: 50%;
		width: 100%;
	}
	#checkout-left-col {
		padding-right: 2%;
		width: 48%;
	}
	#checkout-right-col {
		padding-left: 2%;
		width: 48%;
	}
	#checkout-container label {
		margin-right: 2%;
		width: 32.05%;
	}
	#checkout-container input[type="text"], #checkout-container input[type="tel"], #checkout-container input[type="email"], #checkout-container input[type="password"] {
		margin-right: 0px;
	}
	#checkout-container input.contactInput{
		padding-left: 2%;
		padding-right: 2%;
		width: 61%;	
	}
	#checkout-container select {
		padding-left: 2%;
		padding-right: 2%;
		width: 65%;	
	}
	
	#checkout-container select.shSelect {
		width: 81px;
	}
	
	#checkout-container #formLeft .submitButton, #checkout-container .checkoutRegister {
		margin-left: 34%;
	}
	
	#paywithoutRegistering {
		width: 200px;
	}
	
	div#checkoutBasket div.basketCol3 {
		padding: 2%;
		padding-right:4%;
		width: 46%;
	}
	* html div#checkoutBasket div.basketCol3 {
		width: 52%;
		w\idth: 46%;
	}
	div#checkoutBasket div.basketCol4 {
		padding: 2%;
		padding-right:4%;
		width: 10%;
	}
	* html div#checkoutBasket div.basketCol4 {
		width: 16%;
		w\idth: 10%;
	}
	div#checkoutBasket div.checkoutQty {
		width: 10%;
	}
	* html .checkoutQty {
		width: 16%;
		w\idth: 10%;
	}
	
	div#checkoutBasket div.totalRow div.basketCol2 {
    	padding: 2%;
		padding-right:4%;
		width: 78%;
	}
	* html div#checkoutBasket div.totalRow div.basketCol2 {
		width: 84%;
		w\idth: 78%;
	}
	
	div.shBasket div.basketCol2.shLargeCell {
		width: 64%;
	}
	div.shBasket div.basketCol4 {
		padding: 2%;
		padding-right: 2%;
		width: 12%;
	}
	div.shBasket div.basketCol2 {
		padding: 2%;
		padding-right: 2%;
		width: 28%;
	}
		
	/*--------------- Structure --------------*/
	/*----------------------------------------*/

	#header_graphic{
		z-index:700;
	}
	
	#wrapper-header {
    	height: 95px;
	}

	#header-left {
		width: 340px;
	}
	
	#header-centre {
		margin-left: auto;
		margin-right: auto;
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;    
		width: 254px;
	}

	/*--------------- Bespoke --------------*/
	/*----------------------------------------*/
		
	.contactInputSmall {
		width: 76px !important;
	}
	
	div#checkoutBasket div {
		overflow: hidden;
	}
	div#checkoutBasket div.basketCol1 {
		width: 100%;
	}
	div#checkoutBasket div.basketCol2 {
		padding-left: 0.5%;
		padding-right:1%;
		width: 48%; 
	}
	div#checkoutBasket div.basketCol3 {
		padding-left: 0px;
		padding-right:1%;
		width: 52%; 
	}
	div#checkoutBasket div.basketCol4 {
		padding-left: 0px;
		padding-right:1%;
		width: 17%;
	}
	div#checkoutBasket div.checkoutQty {
		padding-left: 0px;
		padding-right:1%;
		width: 10%; 
	}
	
	div#checkoutBasket div#checkoutCoupon {
		width: 98%;
	}
	div#checkoutBasket div.productRow {
		border-bottom: 0px;
	}
	div#checkoutBasket div.totalRow div.basketCol2 {
		padding-left:0px;
		width: 78%;
	}
	#checkout-container input[type="submit"] {
		margin-right: 0px;
	}
	div.shBasket div.basketCol2 {
		padding-left: 0.5%;
		padding-right:1%;
		width: 48%;
	}
	div.shBasket div.basketCol3 {
		padding-left: 0.5%;
		padding-right:1%;
		width: 30%;
	}
	div.shBasket div.basketCol4 {
		padding-left: 0.5%;
		padding-right:1%;
		width: 23%;
	}
	
	#formLeft {
		max-width: 408px;
		width:100%;
	}
	
	#paywithoutRegistering {
		width: 180px;
	}
	
	#checkout-right-col .deliveryChoices label, #checkout-right-col .divRegisterOptIn label {
		width: 316px;
	}
	
	div.shBasket div.basketCol2.shLargeCell {
		width: 49%;
	}
	
	div.shBasket {
		margin-bottom: 28px;
	}
	
	div.divRegisterOptIn{
		width:100%;
	}
	
	#checkout-container select.shSelect {
		width: 81px;
	}

	#checkout-container select {
		padding-left: 2%;
		padding-right: 2%;
		width: 65%;
	}
	
}

@media (max-width: 850px) {
	/*--------------- Bespoke --------------*/
	/*----------------------------------------*/
	
	.checkout-steps {
		padding-left: 0.94%;
		width: 25%;
	}
	.checkout-number {
		font-size: 34px;
		width: 35px;
	}
	.checkout-text {
		font-size: 12px;
	}
	.tableBasketCol5 {
		padding-left: 0px;
		padding-right: 0px;
		width: 69px;
	}
	.tableBasketCol5Small {
		padding-left: 0px;
		padding-right: 0px;
		text-align: center;
		width: 33px;
	}
	
	#checkout-right-col .deliveryChoices label, #checkout-right-col .divRegisterOptIn label {
		width: 316px;
	}
	
	#payPP {
    	float: right;
		margin-top:6px !important;
	}
	#paySH {
    	float: right;
	}
	
}

/*Small Tablet Sized */
@media (max-width: 767px) {
	/*--------------- Structure --------------*/
	/*----------------------------------------*/
	
	#header_graphic{
		z-index:800;
	}
	
	#header-left {
		width: 292px;
	}
	
	#headerPhone {
		margin-top: 4px;
	}
	
	#checkout-container {
		background-image: none !important;
	}
	#checkout-left-col {
		padding: 0px;
		width: 100%;
	}
	#checkout-right-col {
		padding: 0px;
		width: 100%;
	}
	.contactInputLarge {
		max-width:326px;
		padding-left:2%;
		padding-right:2%;
		width:95%;
	}
	
	.hideOnSmallTablet {
		display: none;
	}
	.showOnSmallTablet {
		display: block;
	}
	/* #foot-secure img {
		margin: 0 auto;
	} */
	
	/*--------------- Bespoke --------------*/
	/*----------------------------------------*/
	
	#checkout-steps-container{
		display:none;
	}
	
	h1 {
		padding-top: 15px;
	}
	.basketHeading {
		display: none;
	}
	div#checkoutBasket div.productRow {
		background-color: #f3f7fb;
		border-bottom: 0px;
		margin-bottom: 10px;
		padding: 8px;
	}
	div#checkoutBasket div.productName {
		width: 98%;	
	}
	div#checkoutBasket div.productRow div.basketCol4 {
		text-align: left;
		width: 98%;
	}
	div#checkoutBasket div.productRow div.basketCol4 span {
		float:left;
		margin-right: 10px;
	}
	div.shBasket div.productRow {
		background-color: #f3f7fb;
		border-bottom: 0px;
		margin-bottom: 10px;
		padding: 8px;
	}
	div.shBasket div.productRow div.basketCol2 {
		padding-left: 0px;
		padding-right: 0px;
		width: 100%;
	}
	div.shBasket div.productRow div.basketCol4 {
		padding-left: 0px;
		padding-right: 0px;
		text-align: left;
		width: 40%;
	}
	div.shBasket div.productRow div.basketCol4 span {
		float:left;
		margin-right: 5px;
	}
	
	#header {
		padding-top: 16px;
	}
	
	#paywithoutRegistering {
		margin-bottom:24px;
	}
	
	#checkout-container select {
		padding-left: 2%;
		padding-right: 2%;
		width: 65%;
		max-width: 354px;
	}
	
	#checkout-right-col .deliveryChoices label, #checkout-right-col .divRegisterOptIn label {
		width: 338px;
	}
	
	#checkout-right-col .deliveryChoices label, #checkout-right-col .divRegisterOptIn label {
		width: 338px;
	}
	
	#paySH {
		margin-left: 4px !important;
		margin-top: 6px !important;
	}

}	

@media (max-width: 639px) {

	#header {
    	padding-top: 10px;
	}

	#wrapper-header {
    	height: 130px;
	}

	#header-left {
		float: none;
		margin-bottom: 10px;
		max-width: 250px;
		width: 54%;
	}
	
	#header-right {
		float: none;
		width: 100%;
	}
	
	.divBasketSnapshot {
		float: left;
	}

	#headerPhone {
		margin-top: 0px;
		padding-right: 0px;
		text-align: center;
		width: 159px;
	}

	#header_graphic{
		z-index:900;
	}
	
	.divBasketSnapshot {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		float: none;
		width: 100%;
	}
	
	#headerPhone {
		float: none;
		margin-top: 0px;
		padding-top: 10px;
		padding-right: 0px;
		text-align: left;
		width: 100%;
	}

	.foot-secure-left, .foot-secure-right {
		justify-content: center;
		margin-block: 10px;
		width: 100%;
	}


}				

/*Mobile Sized */
@media (max-width: 480px) {
	/*--------------- Bespoke --------------*/
	/*----------------------------------------*/
	.hideOnPhone {
		display: none;
	}
	.showOnPhone {
		display: block;
	}
	.hideOnSmallTablet {
		display: none;
	}
	.showOnSmallTablet {
		display: block;
	}
	
	#header_graphic{
		z-index:1000;
	}
	
	#header-centre{
		position:static;
		left:auto;
		right:auto;
		width:100%;
	}
		
	#topbar {
		float: none;
	}
	#topbar li a, #topbar li a:visited {
		padding-left: 9px;
		padding-right: 9px;
	}
	#topbar li .last {
		float:right;
		margin-left: 0px;
		padding-left: 14px;		
	}
	
	#topbar li:first-child a{
		padding-left:0px;
	}

	#checkout-left-col .largeLabels label, #checkout-right-col .largeLabels label {
		margin-right: 0px;
		width: 88%;
	}
	#checkout-container input.contactInput {
		padding-left: 2%;
		padding-right: 2%;
		width: 95%;
		max-width: 100%;		
	}
	.contactInputSmall {
		width: 95% !important;
	}
	.continue-large, .continue, .aBack, .aBack:visited {
		margin-bottom: 12px;
		margin-right: 0px;
		width: 100%;
	}
	.back {
		width: 100%;
	}
	
	#checkout-container #formLeft .submitButton, #checkout-container .checkoutRegister {
		margin-left: 0px;
	}
	
	#checkout-container select {
		width: 100%;
		max-width: 100%;
	}
	
	div#checkoutBasket {
    	margin-top: 0px;
	}
	
	#basketButtonContainer{
		padding-bottom:66px;
		position:relative;
	}
	
	#editBasket{
		position:absolute;
		top:46px;
		left:0px;
	}	
	
	#checkout-right-col .deliveryChoices label, #checkout-right-col .divRegisterOptIn label {
		width: 260px;
	}
	
	#wrapper-header {
		height: 128px;
	}

	#header {
		padding-top: 6px;
	}
	
	#header-left {
		max-width: 240px;
		width: 78%;
	}
	
	.divBasketSnapshot {
		float: none;
		margin-bottom: 6px;
		width: auto;
	}
	
	#header-right a, #header-right a:visited {
    	float: none; 
    	padding-left: 0px; 
	}
	
	#headerPhone {
		float: none;
		padding-top: 4px;
		position: relative;
		width: 87%;
		z-index: 500;
	}
	
	#checkout-right-col .deliveryChoices label, #checkout-right-col .divRegisterOptIn label {
		width: 260px;
	}
	 
}