
$dark:      #000528;
$navy:      #002566;
$blue:      #00599C;
$lightblue: #058DC6;
$green:     #40B494;
$grey:      #ABABAB;
$textgrey:  #626262;
$red:       #FF1600;
$orange:    #f18d39;
$pink:      #ed6a58;
$tint:      #F8FAFF;

@media screen and (max-width: 1260px) { 
	.reviews .slick-slider {
		padding:0 3vw;
		margin:0 2vw;
	}
	.reviews .slick-slider .slick-arrow {
	left:5px;
	}
	.reviews .slick-slider .slick-arrow.slick-next {
		right:5px;
	}
}



@media screen and (max-width: 1180px) {
	
	.reviews .introduction .container .left {
		padding-left:2vw;
	}
	.reviews-featured-content {
		width:calc(48% - 40px);
	}
	.reviews-featured>div {
		margin:0;
	}
	
	section.module.module-issues-bar { 
	
		padding:22px 0;
		> div { flex-direction:column;}
		.container-1180 > span { display:block; padding: 0 0px; }
		form { margin-top:10px;
			#issue_search { max-width:160px; }
		 } 
		button.issues-button {
			border-radius:10px;
			background-color:white;
			color:navy;
			opacity:0.7;
			font-size:20px !important;
			padding:5px 30px 4px 30px;
			top:1px;
			&:hover { opacity:1}
		}
	
	}


}
@media screen and (min-width: 840px) {  // Bigger than Mobile

	.mobile-only { display:none !important; }
}

@media screen and (max-width: 840px) { // Mobile

	
	.desktop-only { display:none !important; }
	
	
	main ol, main p, main ul {
		font-size: 16px;
		letter-spacing: 0.24px;
		line-height: 1.4;
	}



	section.module.module-how-blocks { 
			background-color:white;
			background-image:none;
			h2 { color:$navy; }
			>div.container-1180 {
				padding:22px 0;
				flex-direction:column; 
				>div {
					flex-basis:100%;
					margin:11px 22px;
				}
			}
	}

	main.book .module-how-blocks {
		background-image: linear-gradient(142deg,#2D84C6 0%,#00599C 100%);
		h2 { color:white; }
	
	}

	.module-services-blocks  {
		padding:32px 0;
		h2 { padding-bottom:0;}
	> div.slick-service-blocks {
		display:block;
		padding-top:0;
		a { margin:12px !important; height:60vw; 
			>span:first-of-type { font-size:17px !important; line-height:21px;  } 
			>span:last-of-type { padding-right:0; } 
		}
	}
}

	section.module.module-why-blocks,
	section.module.module-club-blocks { 
			background-color:$blue;
			background-image: linear-gradient(131deg, #1970CF 0%, #1561B5 62%, #0B5AAF 100%);
			color:white;
			padding:22px 0;
			h2 { color:white; }
			> div.slick-why-blocks,
			> div.slick-club-blocks {
				display:block;
				padding-top:22px;
				> div {
					display:block;
					padding-bottom:0;
					div {
						div {
							float:left;
						&:first-of-type { width:30%; text-align:left; img { float:left;}}
						&:last-of-type  {width:70%;}
						h3,p { color:white;}
						img.mobile-only { height:auto; width:90%;}
						}
					}
				}
				.slick-dots li {
					 button { 
						font-size:0 !important;
						border: 1px solid white;
						background-color:transparent;
						width:14px;
						height:14px;

					
					}
					&.slick-active button { background-color:white; }
				}
			}
	} // section.module.module-why-blocks & section.module.module-club-blocks

	section.module.module-club-blocks {  
		background-image:none;
		background-color:rgba($green,0.1);
    	color:$navy;
		h2  {color:$navy; }
		> div.slick-club-blocks {
				div div div h3 { color:$navy; }

				.slick-dots li {
					margin:22px 0 32px 0;
					button { 
					   border: 1px solid $navy;
				   }
				   &.slick-active button { background-color:$navy; }
			   }

		}
	} // section.module.module-club-blocks ONLY



	section.module-club-promo {
		margin-bottom:36px;
		background-color:transparent;
		padding:64px 0 0 0;
		.star-price {
			position:absolute;
			right:10px;
			margin-top:-30px;
			width:100px;
			height:100px;
			font-size:11px;
			> span:first-of-type { margin-top:-8px;}
			.number { font-size:26px; line-height:26px;}
		}
		
		>div.container-980 {
			padding:22px;
			flex-direction:column;
			background-image:none;
			> div { flex-basis:100%;text-align:center; }
			h2 {
				font-size:28px;
				line-height:32px;
				text-align:center;
			}
			ul { color:$textgrey; text-align:left;}
			p.button { margin:12px auto;}
			>div:first-of-type img { width:108px;}
			
		}
	} // section.module-club-promo

	section.module-values {
		padding:64px 0;
	
		>div {
			padding:0;
			flex-direction:column;
			background-image:none;
			> div { flex-basis:100%;text-align:center; }
			h2 {
				font-size:28px;
				line-height:32px;
				text-align:center;
			}
			ul { 
				display:block;
				color:$textgrey;
			li span { display:block; 
					text-align:center; 
					img { display:inline-block; }
				}
			}
			p.button { margin:12px auto;}
			>div:first-of-type img { width:108px;}
			ul.slick-dots { 
				width:100%; 
				li  {display:inline-block;}
			}
			
		}
	} 
	
	.blog section.module-values  > div ul { color:white;}
	
	// module-values
	

	section.module-achievements {
	
		padding:22px;
		ul {
			li { flex-basis:45%; }
		}
	} // module-achievements


	section.module.module-guarantee { 
		text-align:center;
		background-image: url('../img/bg-guarantee.svg');
		background-size:cover;
		background-position:center center;
		p:last-of-type { margin-bottom:0;}
		img { display:none; }
	} // module-guarantee

	section.module.module-reviews{ 
		padding-bottom:16px;
	} // module-reviews
	
	

	section.module.module-message {
		padding:22px 22px 64px 22px;;
		>div  {
			padding:22px;
			h2 { font-size:28px; }
		}
		>div>div:first-of-type { flex-basis:100%; } 
		>div>div:last-of-type { display:none;} 
	} // module-message


	section.module-ecologi { 
		padding:30px 0;
		
		>div.container-1180 {
			flex-direction:column;
			padding:0;
			.left { width:100%;
				padding:30px;
				box-sizing: border-box;
				p { display:none;}
				a.button-link { margin-top:32px; }
			}
			>img { 
				width:100%; 
				object-fit: cover;
				height:250px;
				border-bottom-left-radius:20px;
				border-bottom-right-radius:20px;
				margin-top:20px;
			
			}
		}
	} // module-ecologi

	section.module.module-service-banner { 
		
		h2 { font-size:18px; font-weight:400; line-height:1.3;
		}
		>div {
			flex-direction:column;
			>div { flex-basis:100%;}
		}

	} // service-banner

	footer {
		padding-top:10px;
		ul.logos li img {
			height:24px;
		}
		form {
			
		}
	}
	.footer-top {
		flex-direction: column-reverse;
		margin-bottom:0;
		padding-bottom:0;
		>div { border-bottom:1px solid white; margin-bottom:32px;}
	}
	.footer-credit { 
		padding:18px 0px;
		p { margin:0; font-size:16px; }
		.container-1180 {  margin: 0 5px; }
	}
	.hero-home.mobile-only,
	.hero-home.mobile-only.loaded {
		padding:0;
		background-image: linear-gradient(129deg, #004C9F 0%, #004B9E 2%, #002566 100%) !important;
		.container-1180 {
			width:90vw; 
		}
		h1 {
			font-size:31px; 
			padding-bottom:0px;
		}
		h2 {
			font-size:31px; 
			font-weight:normal;
		}
		.image { 
			width:100%;
			height:70vw;
			background-size:cover;
			background-position:center center;
		}
		p.button { margin:18px 0; }
		.module-flyout-trustpilot { margin-bottom:20px; }
	}
	
	// services
	main.service {
		
		.header-service-single {
			padding:22px 0px;
			.logos { display:none; }
			>div {
			>div { 
				flex-basis:100%; 
				justify-content:center; 
				align-items:center;
				h1,p { text-align:center; }
				h1 { font-size:31px; line-height:34px}
			}
			>div:last-of-type { display:none; }
		}
	}	

	.description {
		flex-direction:column-reverse;
		padding:32px 0;
		>div { 
			flex-basis:100%; 
			ul li { margin:8px 0;  font-size:16px;	}
			&:last-of-type { h3 { text-align:center; font-size:28px; line-height:33px; }
		}
		
		}
	}
	
	section.service-prices .services-smallprint {
		margin-left:0;
		font-size:10px;
	}

	section.service-prices .price-tables {
		flex-direction:column-reverse;
		> div { 
			flex-basis:100%; 
			flex-wrap:wrap;
			button { flex-basis:30%;}
		}

		>div:first-of-type {
			display:flex;
			flex-basis:unset;
			justify-content:space-between;
			button.button-tab-navy {
				border-top-left-radius: 0px;
				border-top-right-radius: 0px;
				border-bottom-left-radius: 10px;
				border-bottom-right-radius: 10px;
				width:31%;
				white-space: unset;
				line-height:1.2 !important;
				background-color:$blue;
				padding:22px 6px; 
				&:after {
					border-top-left-radius: 0px;
					border-top-right-radius: 0px;
					border-bottom-left-radius: 10px;
					border-bottom-right-radius: 10px;
					border:none;
				}
			}
		

		}
		>div:last-of-type {
				flex-grow: unset;
				div.price-table { 
				max-width:100%;
				overflow-x:scroll !important;
				border-top-left-radius: 20px;
				border-top-right-radius: 20px;
				border-bottom-right-radius: 0px;
				table {
					th,td{ min-width:120px; }
				}
			}
			.price-footer { 
				color:white;
				background-color:$lightblue;
				height:auto;
				font-weight:bold;
				padding:8px; 
				overflow:visible;
				height:auto;
				max-height:200px;
		}
		}

		
	}
	
	

		.header-service-builders img { height:30vh; }

		section.service-projects .container-980.projects .project-gallery.row {
			
					a { width:calc(45vw - 11px) !important; 
						height:calc(45vw - 11px) !important;
						margin-left:0 !important;
						margin-right:0 !important;
						margin-top:0 !important;
					}	
			
			
		} // project gallery

	} // services


main.about {
    .header-about  > div {
       > div {
           &:first-of-type { padding-right:0 !important;  padding:22px 0; text-align:center; 
            flex-basis:100%;}
           &:last-of-type { display:none; }
        }
    }

  section.about-partners {
      padding:22px 0;
       .bhc-logo-carousel li {
		  
		   img { opacity:0.5; }
	   }
  }







	

} // about us


main.contact, main.reviews { 
	section.contact-content div.container-1180 .wrapper { 
		flex-direction:column;
		>div { flex-basis:100%; margin-bottom:22px; }
	}

	.header-contact,
	.header-reviews {
		padding:22px 0;
		>div {
			flex-direction:column;
			h1 { font-size:31px; line-height:34px; text-align:center; margin-bottom:0; }
		>div:first-of-type  { flex-basis:100%; }
		>div:last-of-type { 
			flex-basis:100%;
			.wrapper {
				width:100%;
				padding:32px;
				
				box-sizing:border-box;
				margin-top:32px;
				margin-bottom:32px;
				border-top-left-radius:30px;
				border-top-right-radius:0px;
				border-bottom-right-radius:30px;
				text-align:center;
				img {display:none;}
				p.button { margin-bottom:0;}
			}
		 }
		}
	}
} //contact,reviews

	main.club {
			.header-club {
				padding:22px 22px;
				text-align:center; > div {
				h1 { font-size:31px; line-height:34px; text-align:center; margin-bottom:0; }
				ul.logos { display:none; }
				div { width:100%;
				flex-basis:100%;}
				div:last-of-type  {display:none;}
				}
			}

			section.club-prices {
				p.button {  margin-top:32px; }
				.price-list-mobile {
					background-color:#ffffff;
                    border-radius:10px;
                    padding:0px;
                    box-shadow: 0 0 9px 0 rgba(0,0,0,0.2);
					overflow:hidden;
					margin-bottom:32px;
					
					>div {
						padding:18px;
						font-size:21px;
						border-bottom: 2px solid rgba($navy,0.1);
						color:$navy;
						font-weight:bold;
						.strike { font-weight:normal; color:$lightblue; text-decoration: line-through; font-size:18px; }
						small {  font-weight:normal; display:block; font-size:18px;}
					}
					>div:first-of-type {
						color:white;
						background-color:$green;
						padding:18px;
						font-size:21px;
						display:flex;
						flex-direction:column;
						justify-content:center;
						font-weight:bold;
					}
					
				}
			} // club-prices


			section.club-types {
				padding:0;
				img { display:none; }
				> img.mobile-only {
					display:block;
					height:30vh; 
					width:100%;
					object-fit: cover;;
				}
				>div.container-720 {
					padding:32px 0 0 0;
				}
				>div.container-1180>div {
					margin-top:0;
					margin-bottom:42px;
					>div,>div:last-of-type {
						margin:0;
						width:100%;
						ul {
							li {
								padding:18px 18px 18px 42px;
								position:relative;
								.fa-check { position:absolute; left:18px; top:20px;  }
							}
						}
					}
				}

			} // club-types

			section.club-join {
				>div {
					padding:22px 0;
					input#postcode_search { box-sizing:border-box;}
				}
			}
			
	} // club


// SHOP/CLUB/BASKET

	main.join,
	main.book .columns {
		flex-direction:column-reverse;
		div.narrow480,
		div.narrow580 {
			width:auto;
			max-width:none;
			h2 { text-align:center;}
		}
		
		> div.container-right { 
			transition: all .3s ease-in-out; 
			background-color:white;
			box-sizing: border-box;
			max-height:0;
			height:0px;
			display:block;
			overflow:hidden;
			padding: 0px;
			
			&.active {
				max-height:8000px;
				height:auto;
			
			 }
			hr { margin:11px auto 0 auto; }
			> div {
				padding:22px;
				box-sizing:border-box;
				h2 { padding:0;}
				.basket-table > div {
					padding-left:0px; 
					small { display:block; font-size:80%; }
				}
			}
			
			
		}


		>div.container-left { 
			h1 { text-align:center; }
			transition: all .3s ease-in-out; 
			padding: 0 ;
			max-height:0;
			height:0px;
			box-sizing: border-box;
			overflow:hidden;
			.module-trusted h2 { display:none; }

			&.active {
				max-height:8000px;
				height:auto;
			 }
			.back-button.mobile-only { 
				margin-bottom:22px;
			}
			>div:not(.ajax-target),div.inner { 
				padding:22px 36px;
				width: auto;
				max-width:none;
				box-sizing:border-box;
				float:none;
				p { text-align:center; }
				ul.logos { display:none; }
				
				
			}
			.ajax-target { padding-left:22px; padding-right:22px; float:none; box-sizing:border-box; }

			.lower{
				margin-top:22px; 
				padding:22px;
			}

			#stripe_single_payment_form {
				margin-top:22px; 
			}
			
			form {
				.input-wrapper { display:block; }
				p.button {
					float:none;
					display:inline-block;
					width:100%;
					margin:12px 100px;
				}
				p.button.button-mobile-center {
					margin:16px auto 22px auto;
					padding:0;
					text-align:center;
				}
				span.error { display:block; text-align:center; }
				p.button.mobile-only { margin-left:0;}
				.field_input { margin:0;}
				.field_wrapper.has_checkbox {
					text-align:center;
					padding-left:0;
					span { display:block; margin:12px 22px 0 22px; }
					input[type=checkbox] { 
						position:relative; 
						 }
				}
			}

		}

		.club-join-section {
			display:block;
			padding: 0 ;
			max-height:0;
			height:0px;
			box-sizing: border-box;
			overflow:hidden;
			transition: all .3s ease-in-out; 
			label.radio { display:none !important; }
			hr:last-of-type { display:none; }
			h2 { text-align:center; }
			&.active { max-height:8000px;
						height:auto; 
						label.radio { display:inherit !important; }
					}
			
		}

	} // join / book


	form {

		label.width-400,
		input.width-400,
		select.width-400 { max-width:100% !important; width:100%; }
		fieldset span.field_input.half { flex-basis:100%;}

		.field-input.field-file label { 
			padding-left:80px;
			margin-top:0px;
			background-position: 30px center;
			background-size:60px auto;
			font-size:0;
			strong { font-size:18px;}

		}


	} 
	
	form#form_payment fieldset span.field_input, #stripe_single_payment_form fieldset span.field_input {
		flex-basis:48%;
		margin-top:0;
	}
	form#form_payment fieldset span.field_input:first-of-type, #stripe_single_payment_form fieldset span.field_input:first-of-type {
		flex-basis:100%;
		margin-bottom:0;
	}// forms

	.basket-banner {
		position:fixed;
		background-color:white;
		left:0;
		bottom:-80px; 
		right:0; 
		z-index:300;
		display:flex;
		padding:0 !important;
		transition: all .3s ease-in-out; 
		&.active { bottom:0px;  }
		>div {
			flex-basis:50%;
			line-height: 80px;
			text-align:center;
			position:relative;

			.fa-shopping-basket { font-size:36px; color:$navy; margin-bottom:-8px;} 
			.js-item-number { 
				display:inline-block;
				position: absolute;
				margin-top:26px;
				margin-left:-10px;
				width:20px;
				height:20px; 
				border-radius:50%;
				background-color:$pink;
				color:white;
				text-align:center;
				line-height:20px;
				font-size:10px; 
				font-weight:bold;
			}
			&.basket-button {
				background-color:$blue;
				color:white;
				cursor:pointer;
				transition: all .3s ease-in-out; 
				
				font-weight:bold;
				&:hover  {background-color:$lightblue; }

			}
		}
	}
	
} // end regular mobile




// Smaller devices
@media screen and (max-width: 480px) {
	.reviews .introduction {
	padding:0px 0;
}
	.reviews .introduction .container {
		flex-direction:column;
	}
	.reviews .introduction .container .left,
	.reviews .introduction .container .right {
		width:100%;
		box-sizing:border-box;
		padding:30px 5vw;
	}
}