/* BREAKPOINTS 
:root {
  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
  --bs-breakpoint-xxl: 1400px;
}
*/


/* BS5 resets */





/* Global variables */

:root {
	--bs-dark-rgb: 0,0,0;
	--accent-color: #858585;
	--hover-color: #858585;
	--color: #000;
	--bg-color: #fff;
	--navbar-height: 104px;
}


/* BS overides */

/* Set fluid containers below 1400px  */
@media (min-width: 576px) and (max-width: 1399px) {
	
 .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
/* Master control for margins */
.container, .container-fluid, .container-lg,.container-md,.container-sm,.container-xl,.container-xxl {
  --bs-gutter-x:1.5rem;
  --bs-gutter-y:0;
  padding-right: var(--bs-gutter-x);
  padding-left: var(--bs-gutter-x);
}
}








.bg-dark {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-dark-rgb),var(--bs-bg-opacity)) !important;
}

.navbar-dark {
	--bs-navbar-color: rgba(255, 255, 255, 0.55);
	--bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
	--bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
	--bs-navbar-active-color: #fff;
	--bs-navbar-brand-color: #fff;
	--bs-navbar-brand-hover-color: #fff;
	--bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.card {
	border: none;
	border-radius: 0;
}


.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #858585;
  --bs-btn-border-color: #858585;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #666666;
  --bs-btn-hover-border-color: #666666;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #666666;
  --bs-btn-active-border-color: #666666;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

/* Navbar heigt relates to brand sizes */
@media (min-width: 576px) and (max-width: 1199.98px) {
:root { --navbar-height: 104px; }
}
/* Settings for off canvas Nav */
@media (min-width: 1200px) {
:root { --navbar-height: 110px; }

}






/* Default styles 

================================================================================================================== */






/* TYPOGRAPHY
--------------------------------------------------  */

body { 
	font-family: 'AvenirLTPro', sans-serif;
	font-weight: 200;
	letter-spacing: 0.07em;
	color: var(--color);
	background-color: var(--bg-color);
}

/*control bold and italics etc. */
b, strong {
    font-weight: 700;
}

h1,h5,.h1,.h5,.display-1,.display-2,.display-3,.display-4 {
  font-weight: 900;
  letter-spacing: 0.05em;
  color: inherit;
  line-height: 1;
}

h2,h3,h4,h6,.h3,.h4,.h6  {
  font-weight: 700;
  color: inherit;
  letter-spacing: 0.05em;
  line-height: 1;
}

/* Splash text and strap line */

h2.strapline, p.strapline { font-size: 2rem; }

p.strapline {
	font-weight: 700;
  color: inherit;
  letter-spacing: 0.05em;
  line-height: 1;
 }

@media (max-width: 575.999px) {
h2.strapline, p.strapline { font-size: 1.25rem; }
}

@media (min-width: 576px) and (max-width: 1399px) {


}






.weight-700 { font-weight: 700 !important; }

.lead, .lead p {
  font-size: 1.25rem;
}

/* LINKS
--------------------------------------------------  */


a, a:visited, a:active, a:hover { 
	color: #858585;
} 
a.btn, a.btn:visited, a.btn:active, a.btn:hover { 
	color: #ffffff;
} 

/* INLINE ANCHOR TAGS AHOY in paragraphs */
p a, p a:visited, p a:hover, p a:active, p a:focus {
	color: #858585;
}
.reverse a,  .reverse a:visited, .reverse a:active,  .reverse p  a,  .reverse p  a:visited, .reverse p > a:active {
	color: #858585;
} 



/* NAVBAR
--------------------------------------------------  */

.navbar {
	--nav-font-size: 1.2rem;
}


.navbar-brand {
	text-indent: -9999px;
	display: block;
	background: transparent url(../img/key-logo-wht_256x128.svg) no-repeat center center;
	background-size: 256px 128px;
	width: 256px;
	height: 88px;
	margin-top: 3px;
	margin-right: 0;
	margin-bottom: 3px;
	/* transition: all 0.5s; */
}


.navbar-collapse {
	justify-content: flex-end;
}
.navbar-nav {
	font-size: var(--nav-font-size);
  --bs-nav-link-padding-x: 2rem;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-font-weight: ;
  --bs-nav-link-color: #fff;
  --bs-nav-link-hover-color: #858585;
  list-style: none;
}

.navbar-nav .nav-item  {
	margin-left: 2rem;
}
a.nav-link, a.nav-link:visited {  color: #ffffff; }
a.nav-link:active, a.nav-link:hover { color: #858585; }




html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
}

/* Set to compansate for fixed nav */
body { padding-top: var(--navbar-height); }
	
	
/* Settings for off canvas Nav */
@media (max-width: 1199.98px) {
.navbar-brand {	
	background-size: 224px 112px;
	width: 224px;
	height: 82px;
}
 .navbar-collapse {
    position: fixed;
    z-index: 1001;
    top: var(--navbar-height); 
    bottom: 0;
    padding-bottom: var(--navbar-height);
    left: 100%;
    width: 100vw;
  height: 100vh;
  background-color: #000;
  padding-top: 2rem;
  text-align: right;
    display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: hidden;
  visibility: hidden;
  transform: translateX(100%);
  transition: visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
  }
.navbar-collapse.open { 
	transform: translateX(-100vw);
	visibility:visible;
}
.navbar-nav .nav-item  {
	margin-left: 0;
	margin-bottom: 1rem;
}


} /*  /@media */

.nav-scroller .nav {
  color: rgba(255, 255, 255, .75);
}

.nav-scroller .nav-link {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: .875rem;
  color: #6c757d;
}

.nav-scroller .nav-link:hover {
  color: #007bff;
}

.nav-scroller .active {
  font-weight: 500;
  color: #343a40;
}

/* Hamburger core */
.hamburger {
  padding: 15px 15px;
  display: inline-block;
      z-index: 1002;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 0.7; }
  .hamburger.is-active:hover {
    opacity: 0.7; }
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: #fff; }

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: #fff;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px;
 }
/* Hamburger Elastic - Choose style from hamburger.css =====. */
.hamburger--elastic .hamburger-inner {
  top: 2px;
  transition-duration: 0.275s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
  .hamburger--elastic .hamburger-inner::before {
    top: 10px;
    transition: opacity 0.125s 0.275s ease; }
  .hamburger--elastic .hamburger-inner::after {
    top: 20px;
    transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); }

.hamburger--elastic.is-active .hamburger-inner {
  transform: translate3d(0, 10px, 0) rotate(135deg);
  transition-delay: 0.075s; }
  .hamburger--elastic.is-active .hamburger-inner::before {
    transition-delay: 0s;
    opacity: 0; }
  .hamburger--elastic.is-active .hamburger-inner::after {
    transform: translate3d(0, -20px, 0) rotate(-270deg);
    transition-delay: 0.075s; }














/* IMAGES
--------------------------------------------------  */
.img-wrap {
	display: block;
	position: relative;
	width: 100%;
	overflow: hidden;
}
.img-wrap > img, .img-wrap img, figure > img {
  width: 100%;
  height: auto;
}

.circle-img > img {
	border-radius: 50%;
}

/* .img-wrap.ratio {
	height: 0px;   
}
.img-wrap.ratio-1x1 { padding-bottom: 100%; }
.img-wrap.ratio-2x1 { padding-bottom: 50%; }
.img-wrap.ratio-16x9 { padding-bottom: 56.25%; }
*/

.img-wrap.ratio > img {
    position: absolute;
    height: 100%;
    inset: 0;
    object-fit: cover;
}

.cover {
	position: absolute;
	display: block;
	overflow: hidden;
	inset: 0;
}
.cover img, .cover picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.fig > img {
  width: 100%;
}
.fig-caption { 
	font-weight: 400;
	padding-top: 0.5rem;
}
.fig-caption::before {
  content: "\229A";
  color: inherit;
  padding-right: 0.5rem;
}




/* GENERAL
--------------------------------------------------  */
@media (max-width: 575px) {

}

.negative {
	color: #fff;
	background-color: #000;
}

/* reverse out main colour scheme */
.reverse {
	color: var(--bg-color);
	background-color: var(--color);
}


/* SPLASH SETTINGS  ----------------------------- */

/* BREAKPOINTS 
  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
  --bs-breakpoint-xxl: 1400px;
*/



	
/* body { --navbar-height: 110px; } */

.splash {
	position: relative;
	display: block;
	height: max(302px,calc(50vh - var(--navbar-height)) );
}



@media (min-width: 768px) {
.splash {
	height: calc(40vh - var(--navbar-height));
}
} /* /@media */

.splash-overlay {
  z-index: 100;
  text-shadow: 3px 3px 3px #000000;
}







/* Custom styles 

================================================================================================================== */


.key-card .card-body {
	padding:  var(--bs-card-spacer-y)  0px;
}


.card-body  .btn {

}
/* create virtual anchor hover */
.a-wrap {
	text-decoration: none;
}



.card-footer {
  padding: 0;
  color: var(--color);
  background-color: var(--bg-color);
  border-top: none;
}
.card-footer:last-child {
  border-radius: 0;
}

.btn-block { width: 100%; }










.a-wrap .img-wrap img {
  object-fit: cover;
  transition: transform 0.3s ease;
}

.a-wrap:hover img {
  transform: scale(110%);
  transform-origin: center;
}



.projects-splash, .contact-splash {
	background: #000000 url(../img/key-ring-wht_240x240.svg) no-repeat 56vw -26vw;
	background-size: 54vw 54vw;
}
.faq-splash {
	background: #000000 url(../img/key-ring-wht_240x240.svg) no-repeat 56vw 8vw;
	background-size: 72vw 72vw;
}
.sustainability-2025 .faq-splash {
	background-image: url(../img/key-ring-wht_240x240.svg), url(../img/forest-cloud-skyline-hero.jpg);
	background-position: 56vw 8vw, left top;
	background-size: 72vw 72vw, cover;
}
.sustainability-2025 .faq-splash:after {
	position: absolute;
	left: calc(7vw * 0.5625);
	bottom: 10px;
	color: #ffffff;
}


@media (max-width: 767px) {
/* when single column make text visible over ring */	
.projects-splash, .contact-splash, .faq-splash {
	background-image: url(../img/key-ring-gry_240x240.svg);
}
}


/* STICKY CONTACTS -----------------   */

#stickyContact {
	--contactUnit: 24px;
}
.sticky-contact {
	width: 100%;
	min-height: 64px;
	padding: 1rem 0px;
	opacity: 0;
	z-index: 500; 
	position: fixed;
	bottom: 0px;
	transform: translateX(-100%);
}
.sticky-contact.seeit { 
	transition: opacity 0.5s;
	opacity: 1; 
	transform: translateX(0);
		transition: transform 0.05s;
}

/* position te/ email with flrx */
.cont-wrap {
	
}

.cont-wrap .cont { padding-right: 2rem; }

.sticky-contact .cont > span { display: none; font-size: 10px; } /* remove tel/email text to replace with icon */
.sticky-contact .cont { 
	margin: 0;
	/* font-weight: 700; */
	font-size: calc(var(--contactUnit) * 0.625); /* creates whole number */
}

@media (max-width: 767px) {
.sticky-contact {
	 /* padding: 0.5rem 1rem 0.5rem 1rem ; */
	opacity: 0;
	z-index: 1040;
}
}

@media (min-width: 1400px) {
#stickyContact {
	--contactUnit: 32px;
	height: 72px;
}
}



a, a:visited, a:active, a:hover { 
	color: #858585;
} 

a.tel, a.email, a.tel:visited, a.email:visited {
	color: #ffffff;
	text-decoration: none;
}
a.tel:hover, a.email:hover {
	color: #858585;
}

.tel:before, .email:before {
	display: inline-block;
	width: var(--contactUnit);
	height: var(--contactUnit);
	margin-right: calc(var(--contactUnit) * 0.5);
	text-indent: -9999px;
	overflow: hidden;
	transform: translateY( calc(var(--contactUnit) * 0.25));
	}
.tel:before {
	content: "tel: ";
	color: #fff;
	background: transparent url('data:image/svg+xml,<svg id="tel-wht " xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48"><defs><style>.st0 {fill: none;stroke: %23ffffff;stroke-miterlimit: 10;stroke-width: 2px;}</style></defs><path class="st0" d="M17.3,30.7c9.2,9.2,18,11.1,21.2,11.3,2.1-3,2.9-5.5,3.5-7.8-2.2-2.2-5.5-4.4-8.5-5.7l-3.5,3.7c-1.2-.3-4.5-1.7-8.5-5.7s-5.3-7.3-5.7-8.5l3.5-3.5c-1.3-3-3.5-6.2-5.7-8.5-2.1.6-4.6,1.5-7.6,3.5.2,3.3,2.1,12.1,11.3,21.2Z"/></svg>') no-repeat center center;
background-size: var(--contactUnit) var(--contactUnit);
}
.email:before {
	content: "email: ";
	background: transparent url('data:image/svg+xml,<svg id="email-wht" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48"><style type="text/css">.st0{fill:none;stroke:%23ffffff;stroke-width:2;stroke-miterlimit:10;}.st1{fill:none;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}.st2{fill:none;stroke:%23ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;}</style><g id="_x34_8x48"/><g id="icons"><g><path class="st0" d="M46,37c0,1.1-0.9,2-2,2H4c-1.1,0-2-0.9-2-2V10c0-1.1,0.9-2,2-2h40c1.1,0,2,0.9,2,2V37z"/><path class="st0" d="M43,11L28.9,25.1c-2.7,2.7-7.2,2.7-9.9,0L5,11"/><line class="st0" x1="5" x2="16" y1="36" y2="25"/><line class="st0" x1="43" x2="32" y1="36" y2="25"/></g></g></svg>') no-repeat center center;	
	background-size: var(--contactUnit) var(--contactUnit);
}


/* LANGUAGE NO FLAGS */

@media (min-width: 576px) {
.mtt-btn { 
	display: none;
	visibility: hidden;
	}
.collapse:not(.show) {
  display:block;
}
}

@media (max-width: 575.99px) {
.mtt-heading { 
	display: none;
	visibility: hidden;
	}
.mtt-btn { 
	display: inline-flex;
	width: 100%;
	}
.mtt-btn > .btn { flex-grow: 1;}
}

.language-switch {
	position: fixed;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
	background: #000000;
	width: 240px;
	height: 64px;
	z-index: 1010;
	padding: 8px 16px 8px 64px ;
	background: #000000  url('data:image/svg+xml,<%3Fxml version="1.0"%3F><svg style="enable-background:new 0 0 48 48;" version="1.1" viewBox="0 0 48 48" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">.st0{fill:none;stroke:%23ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;}.st1{fill:none;stroke:%23ffffff;stroke-width:2;stroke-miterlimit:10;}</style><g id="_x34_8x48"/><g id="icons"><g><circle class="st0" cx="24" cy="24" r="21"/><ellipse class="st0" cx="24" cy="24" rx="10" ry="21"/><line class="st0" x1="24" x2="24" y1="3" y2="45"/><line class="st0" x1="45" x2="3" y1="24" y2="24"/><path class="st0" d="M40,10.5c-3.9,2.2-9.6,3.5-16,3.5c-6.4,0-12.1-1.4-16-3.5"/><path class="st0" d="M40,37.5c-3.9-2.2-9.6-3.5-16-3.5c-6.4,0-12.1,1.4-16,3.5"/></g></g></svg>') no-repeat center left; 
	background-size: 36px 36px;
	background-position: center left 16px;
	border-top-left-radius: 32px;
	border-bottom-left-radius: 32px;
	}
.btn-lang {
	padding-top: 4px;
	padding-bottom: 0; 
	text-transform: uppercase;
	--bs-btn-padding-x: 8px;
	--bs-btn-font-size: 12px;
	 --bs-btn-color: #fff; 
  --bs-btn-bg: #858585;
  --bs-btn-border-color: #858585;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #666666;
  --bs-btn-hover-border-color: #666666;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #666666;
  --bs-btn-active-border-color: #666666;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn.disabled {
  color:#fff;
  pointer-events:none;
  background-color:#000;
  border-color:#000;
  opacity:1
}


@media (max-width: 575.9999px) {
.language-switch {
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	flex-direction: row;
	justify-content: flex-start;
	width: auto;
	padding: 8px 8px 8px 64px;
	background-position: center left 16px;
	border-radius: 0px;
}
.btn-lang {
	margin: 0px 1rem;
}
}

@media (min-width: 1400px) {
.language-switch {
	height: 72px;
	border-top-left-radius: 36px;
	border-bottom-left-radius: 36px;
}
}




/* Meet the Teram 
--------------------------------------------- */
@media (min-width: 1200px) {
.ft-wrap {
	background: #000 url('data:image/svg+xml, <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg"><rect width="10" height="10" x="0" y="0" style="fill:rgb(255,255,255);"/></svg> ') no-repeat top left;
	background-size: 1px 140px;
	padding-left: 1rem;
}
}
@media (max-width:1199px) {
.ft-wrap {
	background: #000 url('data:image/svg+xml, <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg"><rect width="10" height="10" x="0" y="0" style="fill:rgb(255,255,255);"/></svg> ') no-repeat bottom left;
	background-size: 100% 1px;
}
}

#meetTheTeam  { --contactUnit: 24px; }

.meet-the-team .cont > span { display: none; font-size: 10px; } /* remove tel/email text to replace with icon */
.meet-the-team .cont { 
	margin: 0;
	/* font-weight: 700; */
	font-size: calc(var(--contactUnit) * 0.6);
}
@media (min-width: 768px) and (max-width:1199px) {
.meet-the-team {
	background: #000 url('data:image/svg+xml, <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg"><rect width="10" height="10" x="0" y="0" style="fill:rgb(255,255,255);"/></svg> ') no-repeat bottom left;
	background-size: 100% 1px;
}
}
	
	
	
/* Footer
--------------------------------------------------  */
footer {
	padding-bottom: 72px;
}


/* 
a.tt-link, a.breed-link, a.modo-link-footer {
	display: inline-block;
	height: 48px;
	width: 200px;
	text-align: left;
	text-indent: -9999px;
	overflow: hidden;
	background: transparent url(../img/modo-tt-breed-logo-wht_600x48x2.svg) no-repeat left top;
	background-size: 600px 96px;
	border: none !important;
 }
a.tt-link { background-position: -200px 0; width: 190px;  }
a.breed-link { background-position: -400px 0; width: 180px; }
a.modo-link-footer { background-position: 0 0; }
a.tt-link:hover { opacity: 0.7; 	border: none;}
a.breed-link:hover { background-position: -400px -48px; 	border: none;}
a.modo-link-footer:hover { background-position: 0 -48px; 	border: none;}
 */

.credits { padding-top: 1.5rem; }
@media (max-width:1199px) {
	.credits { padding-top: 0.5rem; }
}

a.tt-link, a.breed-link, a.modo-link-footer {
	display: inline-block;
	height: 40px;
	width: 180px;
	text-align: left;
	text-indent: -9999px;
	overflow: hidden;
	background: transparent url(../img/modo-tt-breed-logo-wht_720x48x2.svg) no-repeat left top;
	background-size: 600px 80px;
	border: none !important;
 }
a.tt-link { background-position: -200px 0;  }
a.breed-link { background-position: -400px 0; width: 170px; }
a.modo-link-footer { background-position: 0 0; }
a.tt-link:hover { opacity: 0.7; 	border: none;}
a.breed-link:hover { background-position: -400px -40px; 	border: none;}
a.modo-link-footer:hover { background-position: 0 -40px; 	border: none;}





/* SOCIAL NETWORK MENU -------------------- */

.social {
	display: inline-block;
	padding: 1rem 0 1rem 0;
}
ul.social-list {
    list-style: none;
	margin: 0;
	padding: 0;
	margin-left: -10px;
	margin-right: auto;
 }  
    
ul.social-list li {
    margin: 0 10px;
    display: inline-block;
}
ul.social-list li a {
	background: #000000 url(../img/social-icons-wht_48x480.svg) no-repeat 0 0;
	background-size: 360px 36px;
	text-indent: -9999px;
	width: 44px;
    line-height: 44px;
    display: inline-block;
    padding: 0;
	height: 44px;
	overflow: hidden;
	text-decoration: none;
	border: 4px solid #000000;
	border-radius: 22px; 
}

ul.social-list li.instagram a { background-position: 0px 0px; }
ul.social-list li.linkedin a { background-position: -36px 0px; }
ul.social-list li.pinterest a { background-position: -72px 0px; }
ul.social-list li.twitter a { background-position: -108px 0px; }
ul.social-list li.bluesky a { background-position: -252px 0px; }
ul.social-list li.youTube a { background-position: -144px 0px; }
ul.social-list li.facebook a { background-position: -180px 0px; }
ul.social-list li.tiktok a { background-position: -216px 0px; }

ul.social-list li a:hover {
	opacity: 70%;
  }

/* save space */
@media (max-width: 700px) {
a.modo-link-footer { display: none; visibility: hidden; }
}
@media (max-width: 575px) {
footer {
	padding-bottom: 94px; }
}









/* -- Special vinyl and Vinyl chart ----------------------------------------------- */


 /* .custom-img-wrap {
  overflow: hidden;
  position: absolute;
  inset: 0;
}
.custom-img-wrap > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
*/
.o-row {
	--ring-diameter: 72vw; 
	--ring-color: #000;
	}
	
/* only for the text col */
.o-col {

	}
.o-col > div { padding: 1rem 0; }


.o-ring {
	position: relative;
	overflow: hidden;
	margin-right: -15px;
	margin-left: -15px;
}
.o-ring  img {
	width: 100%;
	object-fit: cover;
}

/* special display headings same as global */

@media (min-width: 992px) {
.h2d2 h2 { font-size: 3.9vw; }
.h2d3 h2 { font-size: 2.9vw; }
}


@media (min-width: 768px) {
.custom-height { min-height: 40vw; }
/* .custom-img-wrap {
  overflow: hidden;
  position: absolute;
  inset: 0;
}
.custom-img-wrap > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	top: 0px;
}
*/
.o-row {
	--ring-diameter: 72vw; 
	--ring-color: #000;
	}
/* only for the text col */
.o-col {
	/* height: clamp(40vw, 40vw, 1000px); */
	min-height: 40vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	}
.o-col > div { padding: var(--padUnit) 1rem 3rem var(--padUnit); }
.o-ring {
	position: absolute;
	overflow: hidden;
	margin-right: 0px;
	margin-left: 0px;
	inset: 0;
}
.o-ring  img {
	position: absolute;
	background-color: #000;
	border: var(--ring-color) solid calc(var(--ring-diameter) * 0.1);
	border-radius: 50%;
	width: var(--ring-diameter);
	height: var(--ring-diameter);
	left: 0;
	top: calc((var(--ring-diameter) - 40vw) * -0.5);
	object-fit: cover;
}

.o-row.reverse {
	color: #ffffff;
	background-color: #000000;
	--ring-color: #fff;
}
.o-row.reverse  .o-ring  img {
	background-color: #fff;
}	
.o-row.swap > .o-col {
  -ms-flex-order: 2;
  order: 2;
}
.o-row.swap  .o-ring  img {
	right: 0;
	left: auto;
}

.custom-row .o-ring {
	position: absolute;
	overflow: hidden;
	margin-right: 0px;
	margin-left: 0px;
	inset: 0;
}

.custom-row .o-ring  img {
	border: none;
	border-radius: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	top: 0px
}
}

/* ===== */

.chart-options {
	padding-top: var(--padunit);
	padding-bottom: var(--padunit);
}


@media (min-width: 768px) and (max-width: 1199px) {

.chart-options {
	padding-right: 2rem;
	padding-left: 2rem;
}
}

.col-md-6.note {
	font-style: italic;
}

.fx-numbers  {
	display: flex;
	justify-content: space-around;
}

.fx-numbers.fx-2  { padding: 0 2%; }
.fx-numbers.fx-3  { padding: 0 14%; }
.fx-numbers.fx-4  { padding: 0 5%; }

.fx-numbers > div {
	display: inline-block;
	padding: 0.5rem;
}

.fx-txt {
	display: flex;
	justify-content: space-around;
}
.fx-txt.fx-2  { padding: 0 2%; }
.fx-txt.fx-3  { padding: 0 5%; }
.fx-txt.fx-4  { padding: 0 5%; }

.fx {
	text-align: center;
	text-transform: capitalize;
	display: inline-block;
}

@media  (max-width: 1199px) {
.fx-txt.fx-2, .fx-txt.fx-3, .fx-txt.fx-4  { padding: 2rem 0 0 4rem; }


.fx-txt {
	display: flex;
	flex-direction: column;
}
.fx {
	width: 100%;
	position: relative;
	text-align: left;
	display: block;
}
.fx > p:before {
	position: absolute;
	top: 0px;
	left: -2rem;
}
.fx:nth-child(1) > p:before { content: "1."; }
.fx:nth-child(2) > p:before { content: "2."; }
.fx:nth-child(3) > p:before { content: "3."; }
.fx:nth-child(4) > p:before { content: "4."; }
}

@media  (min-width: 1200px) {
.fx-numbers  { display: none; 
}

}













/* TERMS AND CONDITIONS FROM .CO.UK ------------------------------------ */

/* SIDE NAV DETAIL */

.navfade {
	opacity: 0;
}
/* .side-nav {
	position: static;
	top: auto;
	background-color: rgba(256,256,256,1);
}
.side-nav.navfix {
	position: fixed;
	top: 120px; 
	top: calc(7vw * 0.5625 + 84px); 
	z-index: 250;
} */

.side-nav {
	position: relative;
}
.side-nav.fix-nav {
	position: fixed;
	top: calc(var(--navbar-height) + 48px);  
	z-index: 250;
}





/* 
@media (min-width: 1680px) {
.side-nav.navfix {  top: calc(7vw * 0.5625 + 96px);  }
} /* /@media */


.side-nav .nav-link {
	color: #858585;
	display: block;
	padding: 0.2rem 0.4rem;
}
.side-nav .nav-link:hover, .side-nav .nav-link:focus {
    text-decoration: none;
    color: #000000
}
.side-nav .nav-link.active {
	color: #000000;
}

.side-nav .nav-link + .daughter {
	height: 0;
	overflow-y: hidden;
}
.side-nav .nav-link.active + .daughter {
	height: auto;
	overflow-y: inherit;
}
.mother > .nav-link {
	padding: 0.4rem 0.5rem;
}
.mother > .nav-link::after {
	display: inline-block;
    margin-left: 0.255em;
    content: " ";
    width: 1rem;
    height: 1rem;
    background: transparent  url(../img/arrow-dre-gry_24x16.svg) no-repeat right center;
    background-size: 12px 8px;
    transform: rotate(90deg);
}
.mother > .nav-link.active {
	font-weight: 400;
}
.mother > .nav-link.active:after { background-image: none; }
.daughter > .nav-link {
	padding: 0.4rem 0.5rem 0.4rem 1.5rem;
}
.daughter > .nav-link.active {
	background: transparent url(../img/arrow-dre-blk_24x16.svg) no-repeat 0.5rem center;
	background-size: 12px 8px;
}

.side-nav-btn { 
	display: none;
	border: 1px solid #000000;
	color: #ffffff;
	background-color: #000000;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: 0;
}
.side-nav > .side-nav-btn:before { 
	content: "Open";
	padding-right: 0.5rem;
}
.side-nav.slip > .side-nav-btn:before { content: "Close"; }

@media (max-width: 991px) {
.side-nav { 
	display: none;
	visibility: hidden;
}
}

/*
@media (max-width: 991px) {
.side-nav { 
	position: fixed;
	top: 120px;
	z-index: 500;
	border: solid 1px #000000;
	border-right: none;
	right: 0px;
	transition-property: transform;
	transition-duration: 0.5s;
	transition-timing-function: ease-in-out;
	transform: translateX(300px);
	opacity: 0;
}
.side-nav.navfix { opacity: 1; }
.side-nav.slip {
	transform: translateX(0px);
}

.side-nav-btn { 
	display: block;
	position: absolute;
	left: 0px;
	transform: rotate(270deg) translate(-38px, -78px);
}
}  */


table.cookie-id th:nth-child(1), table.cookie-id th:nth-child(2) {
	width: 25%;
}
table.cookie-id th, table.cookie-id td {
	padding: 4px 4px 8px 8px;
	vertical-align: top;
}
table.cookie-id td {  font-size: 90%; }
table.cookie-id td:nth-child(1) {
    color: #c7254e;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
table.cookie-id tr:nth-child(even) {
	background-color: #f6f6f6;
}
/*  Style guideline specific */

#style blockquote {
	color: #858585;
	font-size: 125%;
}
#style blockquote > p {
	border-left: 2px solid #858585;
	padding: 1rem;
}