/** Shopify CDN: Minification failed

Line 36:0 All "@import" rules must come first

**/
:root {
  --grey: #6e6e6e;
  --white: #FFF;
  --light-grey: #e6e6e6;
  --light-blue: #ecf2f6;
  --mid-grey: #c7c7c7;
  --black: #000000;
  --accent: #000000;
  --margin: 24px;
  --margin-s: 16px;
  --margin-xs: 8px;
  --container-padding: 48px;
  --swiper-theme-color:#000 !important;

  --swatch-white: #FFF;
  --swatch-black: #000;
  --swatch-yellow: #ffcc02;
  --swatch-red: #c82500;
  --swatch-pink: #ffcccc;
  --swatch-green: #02903b;
  --swatch-orange: #c86a00;
  --swatch-purple: #4a0087;
  --swatch-brown: #764305;
  --swatch-grey: #5a5554;
  --swatch-blue: #00158a;
}

body { color: var(--grey); font-size:16px; }

/* Fonts */
@import url("https://fast.fonts.net/t/1.css?apiType=css&projectid=fd440da5-a517-4838-9d34-093778d64d7a");

@font-face{
    font-family:"Helvetica Neue";
    src:url("//www.scp.co.uk/cdn/shop/files/Helvetica-Neue-Regular.woff2?v=16967408205377054524") format("woff2"),
    url("//www.scp.co.uk/cdn/shop/files/Helvetica-Neue-Regular.woff?v=11287592639408884770") format("woff");
}
@font-face{
    font-family:"Helvetica Neue";
    src:url("//www.scp.co.uk/cdn/shop/files/Helvetica-Neue-Bold.woff2?v=7851697070384846660") format("woff2"),
    url("//www.scp.co.uk/cdn/shop/files/Helvetica-Neue-Bold.woff?v=1836124488314836226") format("woff");
    font-weight:bold;
}

/* Colours */
.grey { color: var(--grey); }
.light-grey { color: var(--light-grey); }
.accent { color: var(--black); }
.black, .black a { color: var(--grey); }
.bg-light-blue { background: var(--light-blue); }
.bg-light-grey { background: var(--light-grey); }
.bg-white { background: var(--white); }
.white { color: #FFF; }
.blue { color:var(--blue); }
  
/* Display */
.fixed { position: fixed; }
.relative { position:relative; }
.block { display:block; }
.absolute { position: absolute; }
  
/* Grid */
.grid { display:grid; grid-gap: 24px; }
.grid-gap-small { grid-gap: 12px; }
.col-span-all { grid-column: 1/-1; }
.col-span-1	{ grid-column: span 1 / span 1; }
.col-span-2	{ grid-column: span 2 / span 2; }
.col-span-3	{ grid-column: span 3 / span 3; }
.col-span-4	{ grid-column: span 4 / span 4; }
.col-span-5	{ grid-column: span 5 / span 5; }
.col-span-6	{ grid-column: span 6 / span 6; }

/* Border */
.border-top { border-top: 1px solid var(--light-grey); }
.border-bottom { border-bottom: 1px solid var(--mid-grey); }
.border-bottom-inset { position:relative; }
.border-bottom-inset:after { content:''; display:block; position:absolute; left:var(--container-padding); right:var(--container-padding); bottom:0; border-bottom: 1px solid var(--mid-grey); }
.border-left { position:relative;}
.border-left:after { content:''; width:1px; left:-12px; background:var(--light-grey); position:absolute; top:0; bottom:0; }
.border-right { position:relative;}
.border-right:after { content:''; width:1px; right:-12px; background:var(--light-grey); position:absolute; top:0; bottom:0; }


/* Margin */
.margin-bottom { margin-bottom:var(--margin); }
.margin-bottom-s { margin-bottom:var(--margin-s); }
.margin-bottom-xs { margin-bottom:var(--margin-xs); }
.margin-top { margin-top:var(--margin); }
.margin-top-s { margin-top:var(--margin-s); }
.padding-bottom { padding-bottom:var(--margin); }
.padding-bottom-s { padding-bottom:var(--margin-s); }
.padding-top { padding-top:var(--margin); }
.padding-top-s { padding-top:var(--margin-s); }


/* Flex */
.flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }
.items-start	{ align-items: flex-start; }
.items-end		{ align-items: flex-end; }
.items-center	{ align-items: center; }
.items-baseline	{ align-items: baseline; }
.items-stretch	{ align-items: stretch; }
.justify-start	{ justify-content: flex-start; }
.justify-end	{ justify-content: flex-end; }
.justify-center	{ justify-content: center; } 
.justify-between { justify-content: space-between; }
.justify-around	{ justify-content: space-around; } 
.justify-evenly	{ justify-content: space-evenly; }

/* ==========================================================================
	General
   ========================================================================== */
html { box-sizing: border-box; -webkit-text-size-adjust: none; }
*, *:before, *:after { box-sizing: inherit; }
* {margin: 0; padding: 0; }
body {background: #ffffff; line-height: 1.2;  color: var(--grey); padding-top:128px; }
img {border: 0; display: block; outline: none; -ms-interpolation-mode: bicubic; max-width: 100%; height: auto;}
a {text-decoration: none; }
li {list-style-type: none;}

/* ==========================================================================
	Typography
   ========================================================================== */
body {-webkit-font-smoothing: antialiased; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  letter-spacing: -0.02em;}
h1, h2, h3, h4 {font-weight: normal; } 
h1 strong, h2 strong, h3 strong, h4 strong { display: block; }
h3 {font-weight: normal;}
p {margin-bottom: 16px;}
a {text-decoration: none; color: inherit;}
strong, .bold {  font-weight: 700;}
.sansserif { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
.active, .active a { color: var(--black); }

/* ==========================================================================
	Typography : Sizing
   ========================================================================== */
body .wp-caption p, figcaption { font-size: 16px; line-height: 1.125; }
h1 {font-size: 27px;}
h2 {font-size: 27px;}
h3 {font-size: 16px;}
h4 {font-size: 11px;}
.text .button {font-size: 14px;}
.center { text-align:center; }

/* New */
.f-56 {font-size: 56px;} 
.f-26 {font-size: 26px;}
.f-16 {font-size: 16px;}
.f-14 {font-size: 14px;}

/* Old */
.f-54 {font-size: 54px;}
.f-48 {font-size: 48px;}
.f-45 {font-size: 45px;}
.f-32 {font-size: 32px;}
.f-28 {font-size: 28px;}
.f-27 {font-size: 27px;}
.f-24 {font-size: 24px;}
.f-22 {font-size: 22px;}
.f-20 {font-size: 20px;}
.f-18 {font-size: 18px;}
.f-12 {font-size: 12px;}
.f-11 {font-size: 11px;}

/* ==========================================================================
	Forms
   ========================================================================== */
input, select, textarea, .button {outline: none; border: none; border-radius: 0; text-indent: 8px; font-size: inherit; fontfooter-column-family: inherit;  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; width: 100%; line-height: 40px; height: 40px; margin-bottom: 16px; background-color: #ebebeb;  vertical-align: top; text-decoration: none !important;}
button {outline: none; border: none; }
label {display: block; /* margin-bottom: 8px; font-size: 16px; */}
input[type=text], input[type=submit], input[type=email] {-webkit-appearance: none; border-radius:0;}
input[type=checkbox] {    width: auto; height: auto; vertical-align: middle; margin-bottom: 0;}
input.submit, a.button, button.submit, button.button {text-indent: 0; padding: 0 8px; width: auto; background-color: var(--accent); color: #FFF; cursor: pointer; margin-bottom: 0; text-align: left; min-width: 184px; font-size: 14px;} 
input.button-secondary, a.button-secondary {background: #C8C8C8; color: #FFF;}
textarea {resize: none;}
fieldset { border:0; }
::-webkit-input-placeholder {color: #6e6e6e;}
:-moz-placeholder {color: #6e6e6e;}
::-moz-placeholder {color: #6e6e6e;}
:-ms-input-placeholder {color: #6e6e6e;}
select {-webkit-appearance: none; appearance: none; color: #6e6e6e;}
.dropdown, .selector-wrapper, .clickAndCollect div {position: relative; clear: both; overflow: auto;}
.dropdown:before, .clickAndCollect div:before {content: '\25BE'; color: #6e6e6e; position: absolute; top:0; right:0; bottom: 0; width: 40px; line-height: 40px; text-align: center; background-color: #ebebeb; pointer-events: none; display: block; height: 40px;}
.error {color: #eb445c;}
.button { display: inline-block; }
button { -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer; color:inherit; }

/* ==========================================================================
	Structure
   ========================================================================== */
.container { margin: 0 auto; position: relative; padding: 0 var(--container-padding);}
.content {min-height: 400px; margin-top: var(--margin); margin-bottom: 32px; position: relative; }
.columns-1 { grid-template-columns: repeat(1, 1fr); }
.columns-1 { grid-template-columns: repeat(1, 1fr); }
.columns-2 { grid-template-columns: repeat(2, 1fr); }
.columns-3 { grid-template-columns: repeat(3, 1fr); }
.columns-4 { grid-template-columns: repeat(4, 1fr); }
.columns-5 { grid-template-columns: repeat(5, 1fr); }
.columns-6 { grid-template-columns: repeat(6, 1fr); }
.columns-7 { grid-template-columns: repeat(7, 1fr); }
.columns-8 { grid-template-columns: repeat(8, 1fr); }

/* SVG Icons */
.icon { display: inline-block; width: 1em; height: 1em; stroke-width: 0; stroke: currentColor; fill: currentColor; }

/* Pagination */
.pagination span, .pagination a { width:44px; height:44px; line-height:44px; text-align:center; }
.pagination span.current {color: var(--accent); }
.pagination svg { width:16px; height:16px; margin-top:14px; }

/* ==========================================================================
	Helpers
   ========================================================================== */
.border {position: relative; padding-left: 12px;}
.border:after {content: ''; position: absolute; top:0; left:0; bottom: 0; width: 1px; display: block; background-color: var(--mid-grey); }

.border-fh .border {position: static;}
.border-fh .border:after {top:16px; margin-left: -8px; left: auto;}

.hidden {display: none;}

.p-b {padding-bottom: 26px;}
.m-b {margin-bottom: 16px; display: block;}

/* Borders */
.b-t {border-top:1px solid #6e6e6e;}

/* Loading */
.icon-loading {display: inline-block;line-height: 30px; width: 28px; height: 28px; display: inline-block; text-align: center; font-size: 20px; visibility: hidden;}
.loading .icon-loading {  -moz-animation: spin 2s infinite linear; -o-animation: spin 2s infinite linear; -webkit-animation: spin 2s infinite linear; animation: spin 2s infinite linear; visibility: visible; color: #FFF;}

.hotspot {position: absolute; top:0; left:0; right:0; bottom: 0; display: block; z-index: 1; cursor: pointer;}

/* ==========================================================================
	Lazyloading
   ========================================================================== */
.image-container { position:relative; display:block; overflow:hidden; }
.image-container img { position:absolute; top:0; left:0; width:100%; }
 
img.lazy, iframe.lazy {opacity: 0;  -webkit-transition: opacity 1s; transition: opacity 1s; min-height: 1px }
img.lazy.initial, img.lazy.loaded, img.lazy.error, iframe.lazy.initial, iframe.lazy.loaded, iframe.lazy.error  { opacity: 1; }
img:not([src]) { visibility: hidden; } 

img.lazyload, iframe.lazyload  {opacity: 0;  -webkit-transition: opacity 1s; transition: opacity 1s; min-height: 1px }
img:not([src]) { visibility: hidden; } 


/* ==========================================================================
	Carousel
   ========================================================================== */
.owl-dots {position: absolute; left: 0; right: 0; line-height: 40px; text-align: center; bottom: 0; height: 40px;}
.owl-dots div {width: 16px; height: 16px; display: inline-block; border-radius: 50%; background-color: #C8C8C8; margin: 0 4px 0 4px; clear: none; vertical-align: middle; cursor: pointer;}
.owl-dots div.active {background-color: #44a8eb;}
.owl-prev, .owl-next {font-size: 0; position: absolute; top: 0; bottom: 0; width: 32px; height: 32px; text-align: center; margin: auto; text-align: center; color: #C8C8C8;}
.owl-prev {left: 20%;}
.owl-next {right: 20%;}
.owl-prev:before, .owl-next:after {font-size: 32px; font-family: 'SCP'; width: 32px; height: 32px;}
.owl-prev:before { content: '\e80f'; }
.owl-next:after { content: '\e80e'; }
.owl-prev:hover, .owl-next:hover {color: #44a8eb;}

/* ==========================================================================
	Posts
   ========================================================================== */
.post {vertical-align: top; margin-bottom: 26px;}
.post .image-container {width: 100%; height: auto; margin-bottom: 20px;}
.post h2 {margin-bottom: 0;}
.post h2 a { color: #141414;}
.post h2 a.grey {color: #6e6e6e;}
.post .border {min-height: 80px; position: relative;}
.post.has-excerpt h2.sub {margin-bottom: 16px;}
.post.has-excerpt .border {padding-bottom: 32px;}
h3.category a {color: inherit; letter-spacing: -0.03em;}
h3.category {position: absolute; bottom: -2px;}

/* ==========================================================================
	Instant Search
   ========================================================================== */
.fast-ac-container { display:none !important; }

/* ==========================================================================
	Footer
   ========================================================================== */
.footer {background-color: #ecf2f6; color: #6e6e6e; padding: 16px 0 32px 0; line-height:1.285714285714286; }
.footer .container:before { display:none;} 
.footer li {display: block; }
.footer-address { margin-bottom:14px; line-height:1.14; }
.footer-address a { display:block; }
.footer-address a:first-of-type { margin-top:8px; }
.footer-address:last-of-type { margin-bottom:0; }
.footer-column-header svg { display:none; }

/* Mailing List */
.footer-newsletter { grid-column:6; grid-row:1; }
.newsletter p {margin-bottom: 8px;}
.newsletter input { color: #6e6e6e; background-color: #FFF; margin-bottom:8px; }
.newsletter input, .newsletter button { height:32px; line-height:32px;  width:100%; }
.newsletter .submit { min-width:0; text-align:center; max-width:116px; text-indent:0; }
.newsletter ::-webkit-input-placeholder {color: #c7c7c7;}
.newsletter :-moz-placeholder {color: #c7c7c7;}
.newsletter ::-moz-placeholder {color: #c7c7c7;}
.newsletter :-ms-input-placeholder {color: #c7c7c7;}

/* Social */
.social { font-size: 0;}
.social a { margin-right: 6px; width: 24px; height: 24px; position: relative;  border-radius: 50%; display: inline-block;}
.social a:before {font-size: 24px; position: absolute; top:-2px; left:0; color: #FFF;}
.footer-social { position:absolute; bottom:0; left:8px;  }
.footer-social a { color:#6e6e6e; }
.footer-social svg { width: 24px; height: 27px; margin-top:-3px; vertical-align: top; }


/* ==========================================================================
	Layout : Cookie
   ========================================================================== */
.layout-cookie-warning {position: fixed; bottom: 0; left: 0; right: 0; display: none; background: var(--light-blue); color: var(--grey); padding: 10px 0; text-align: left; z-index: 100; }
.layout-cookie-warning.active {display: block;}
.layout-cookie-warning .button { text-align:center; margin: auto 0 auto auto; }
.layout-cookie-warning a { text-decoration: underline; color: var(--grey); }
.layout-cookie-warning p { margin: 10px 140px 0 0; }
.layout-cookie-warning .container { display:flex; }

.shopify-pc__banner__dialog { padding: 10px var(--container-padding) !important; box-shadow: none !important; }
.shopify-pc__banner__dialog button { height:40px !important; padding-top:0 !important; padding-bottom:0 !important; }
.shopify-pc__banner__dialog button.shopify-pc__banner__btn-manage-prefs { padding:0 !important; }

/* ==========================================================================
	Media Queries
   ========================================================================== */

@media only screen and (max-width : 1279px) {
	
	/* Footer */
  	.footer .grid { grid-template-columns: repeat(3, 1fr); }
  	.footer-newsletter { grid-column:auto; grid-row: auto; }
  	.footer-column-professional { border-left:0; padding-left:0; }
  	.footer-column-professional:after { display:none; }
  	
  	
}
   
@media only screen and (max-width : 1020px) {
	
	/* Footer */
  	.footer-social { position:static; margin-top:16px; }

    /* Modal */
    body .vbox-content { padding:0; }

}

@media only screen and (max-width : 700px) {
  
	/* Footer */
  	.footer .grid { grid-template-columns: repeat(2, 1fr); }
  	.footer-column-professional:after { display:block; }
  	.footer-column-professional { padding-left:8px; }
  	.footer-column-service { padding-left:0; }
  	.footer-column-service:after { display:none; }
  	.footer-column-contact { padding-left:0; }
  	.footer-column-contact:after { display:none; }
  	.footer-column-service { padding-left:8px; }
  	.footer-column-service:after { display:block; }
  	.footer-column-locations { padding-left:0; }
  	.footer-column-locations:after { display:none; }

    /* Cookie Banner */
    .layout-cookie-warning p { margin-bottom:16px; margin-right:0; }
	.layout-cookie-warning .container { flex-direction:column; }
    .layout-cookie-warning .button { margin-left:0; }

    /* Modal */
    body .venoratio::before { height: calc(100vh - 80px); padding-top:0; }
  
}

@media only screen and (max-width : 660px) {

    :root {
      --container-padding: 20px;
    }

    /* Type Reduction */
    .f-56 { font-size: 26px; }
      
 	/* Tuck in container */
  	body { padding-top:112px; }

}

@media only screen and (max-width : 480px) {
	
	/* Mobile Helper */
	.m-mb {margin-bottom: 16px;}

	/* Type Reduction */
	.f-54 {font-size: 27px;}
	.f-45 {font-size: 22px;}

}

@media only screen and (max-width : 540px) {

	/* Footer */
  	.footer .grid { grid-template-columns: repeat(1,1fr); grid-gap:0; }
  	.footer-column { padding-left:0; border-bottom:1px solid #c7c7c7; max-height:40px; overflow:hidden; }
  	.footer-column:after { display:none; }
    .footer-column.is-open { max-height: 500px; padding-bottom:8px; }	
  	.footer-column.is-open .footer-column-header svg { transform: rotate(-180deg); }
  	.footer-column-header { position:relative; cursor:pointer; }
    .footer-column-header h4 { margin-bottom:0; line-height:40px; }
  	.footer-column-header svg { position: absolute; top: 14px;width: 14px; right:0; height: 8px; display:block; }
  	.footer-newsletter { max-height:none; border-bottom:0; padding-bottom:0; }
}

/* ==========================================================================
	Modal Popup CSS 
   ========================================================================== */
[data-modal] { outline:none; }


/* ==========================================================================
	Animation
   ========================================================================== */
@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% {transform: rotate(359deg);}
}