/* 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: 1230px) {
	/*--------------- 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: 18%;
	}
	#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%;
	}
	
	#editBasket{
		width: 108px;
	}
	
	#checkout-container input#continueDelivery, #checkout-container input#nextStep {
		margin-right: 4px;
	}
		
}	
/*Apply to all Responsive*/
@media (max-width: 999px) {
	/*--------------- Structure --------------*/
	/*----------------------------------------*/
	.wrap, #content {
		padding-left: 2%;
		padding-right: 2%;
		width: 96%;
	}

	#header_graphic{
		z-index:700;
	}
	
	#header-left {
		width: 254px;
	}
	
	#header-centre {
		margin-left: auto;
		margin-right: auto;
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;    
		width: 254px;
	}

	
	/*--------------- Bespoke --------------*/
	/*----------------------------------------*/
	
	
	.contactInputSmall {
		width: 76px !important;
	}
	/*#switchnumber, #cv2 {
		width: 10% !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: 228px;
	}
	div.divRegisterOptIn {
		width:100%;
	}
	#checkout-right-col .deliveryChoices label, #checkout-right-col .divRegisterOptIn label {
		width: 90% !important;
	}
	
	div.shBasket div.basketCol2.shLargeCell {
		width: 49%;
	}
	
	div.shBasket {
		margin-bottom: 28px;
	}
	
	#checkout-container input#continueDelivery, #checkout-container input#nextStep {
		margin-right: 0px;
	}
	
	#formCheckout.extraButtons{
		clear:both;
		padding-top:12px;
	}
	
	#editBasket {
    	width: 130px; 
	}

	#checkout-right-col .buttonStyle {
		width:161px;
		padding-left: 0px !important;
        text-align: center !important;
	}
		
}





@media (max-width: 850px) {
	/*--------------- Bespoke --------------*/
	/*----------------------------------------*/
	
	.checkout-steps {
		padding-left: 0.94%;
		width: 19.03%;
	}
	.checkout-number {
		font-size: 34px;
		width: 35px;
	}
	.checkout-text {
		font-size: 12px;
		line-height:16px;
		margin-top:4px;
	}
	.tableBasketCol5 {
		padding-left: 0px;
		padding-right: 0px;
		width: 69px;
	}
	.tableBasketCol5Small {
		padding-left: 0px;
		padding-right: 0px;
		text-align: center;
		width: 33px;
	}
}

/*Small Tablet Sized */
@media (max-width: 767px) {
	/*--------------- Structure --------------*/
	/*----------------------------------------*/
	
	#header_graphic{
		z-index:800;
	}
	
	#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-left {

	}
	#header-right{
		background-image:none !important;
		height:auto;
		margin-top:6px;
		width:234px;
	}
	
	#paywithoutRegistering {
		margin-bottom:44px;
	}
	
	#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;
	}
	
	#topbar li a, #topbar li a:visited, #topbar li span {
    	font-size: 0.9em;
	}
	
	
	#checkout-container input#continueDelivery, #checkout-container input#nextStep{
		float:left;
		margin-left: 34.05%;
	}
	
	
}	

@media (max-width: 639px) {

	#header_graphic{
		z-index:900;
	}
	
	#topbar li:nth-child(2){
		display:none;
	}
	#topbar-right {
		display: none;
	}
	
	#header-right h2 {
    	font-size: 1.4em;
	}
	#header-right .large-text {
		font-size: 1.4em;
	}

}	
			

/*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;
		height:21px;
	}
	#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:nth-child(1){
		display:none;
	}
	
	#topbar li:first-child a{
		padding-left:0px;
	}

	

	
	#header-left {
		float: none;
		margin-top: 0px;
		padding-top: 29px;
		width:100%;
	}
	
	
	#header_graphic img{
	    display: block;
		margin-left: auto;
    	margin-right: auto;	
	}

	#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 {
        padding-left: 0px !important;
		text-align: center !important;
		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:140px;
		position:relative;
	}
	
	#editBasket{
		position:absolute;
		top:166px;
		left:0px;
		width: 100%;
	}
	
	#checkout-right-col .deliveryChoices label, #checkout-right-col .divRegisterOptIn label {
		width: 260px;
	}
	
	#checkout-container input#continueDelivery, #checkout-container input#nextStep {
		float: none;
		margin-left: 0px;
	}
	
	#foot-secure {
    	margin-top: 12px;
	}
	 
}