/* 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;
*/


/* BS5 resets */





/* Global variables */

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



/* BS overides */

/* Set fluid containers below 1400px and extra margin*/
@media (min-width: 576px) and (max-width: 1399px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}


.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);
}









/* 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 { font-size: 2rem; }


.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_256x88.svg) no-repeat center center;
	background-size: 256px 88px;
	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-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; }

/* LANGUAGE NO FLAGS */

.language-switch {
	position: fixed;
	bottom: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	background: #000000;
	width: 200px;
	z-index: 100;
	padding-right: 60px;
	border: 8px solid #000;
	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 right; 
	background-size: 40px 40px;
	background-position: center right;
	}
.btn-lang {
	padding-top: .25rem;
	padding-bottom: 0; 
	text-transform: uppercase;
	--bs-btn-padding-x: .5rem;
	--bs-btn-font-size: .75rem;
	 --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-lang.uage {
  --bs-btn-bg: #000;
  --bs-btn-border-color: #000;
 }

.btn-lang:first-of-type { margin-bottom: 8px;}

/* LANGUAGE NAV WITH FLAGS */

.nav-item.language > span { display: none; }
ul.lang-menu {
	position: relative;
	display: flex;
	height: 100%;
	padding-left: 0;
	align-items: center;
	justify-content: center;
}
li.lang { 
	text-indent: -9999px;
	text-align: left;
	position: relative;
	display: block;
	width: 48px;
	height: 36px;
	margin-left: 0.5rem;
	background-size: 40px 30px;
	cursor: pointer;
}
li.lang * {
	position: absolute;
	inset: 2px;
	background: transparent;
	border: 2px solid #000;
} 
li.lang.en-gb { background: transparent url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="flag-uk" viewBox="0 0 640 480"><path fill="%23012169" d="M0 0h640v480H0z"/><path fill="%23FFF" d="m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z"/><path fill="%23C8102E" d="m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z"/><path fill="%23FFF" d="M241 0v480h160V0zM0 160v160h640V160z"/><path fill="%23C8102E" d="M0 193v96h640v-96zM273 0v480h96V0z"/></svg>') no-repeat center center; background-size: 40px 30px;}
li.lang.de { background: transparent url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="flag-de" viewBox="0 0 640 480"><path fill="%23fc0" d="M0 320h640v160H0z"/><path fill="%23000001" d="M0 0h640v160H0z"/><path fill="red" d="M0 160h640v160H0z"/></svg>') no-repeat center center; background-size: 40px 30px;}
li.lang.fr { background: transparent url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="flag-france" viewBox="0 0 640 480"><path fill="%23fff" d="M0 0h640v480H0z"/><path fill="%23000091" d="M0 0h213.3v480H0z"/><path fill="%23e1000f" d="M426.7 0H640v480H426.7z"/></svg>')) no-repeat center center; background-size: 40px 30px;}
li.lang.es { background: transparent url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="flag-spain" viewBox="0 0 640 480"><path fill="%23AA151B" d="M0 0h640v480H0z"/><path fill="%23F1BF00" d="M0 120h640v240H0z"/></svg>') no-repeat center center; background-size: 40px 30px;}
li.lang .active { border-color: #fff; }

/* 
@media (max-width: 1199.98px) {
li.nav-item {
	position: fixed;
	top: 20px;
	right: 100px;
}
}
*/

/* DROPDOWN HOVER - We set dropdown nav to hover for pointer screens above 992px width  ============ 
	
@media screen and (min-width: 992px) and (pointer: fine) {
	.navbar .dropdown-menu-end{ right:0; left: auto;  }
	.navbar .nav-item .dropdown-menu{  display:block; opacity: 0;  visibility: hidden; transition:.3s; margin-top:0;  }
	.navbar .nav-item:hover .nav-link{ --accent-color;  }
	.navbar .dropdown-menu.fade-down{ top:80%; transform: rotateX(-75deg); transform-origin: 0% 0%; }
	.navbar .dropdown-menu.fade-up{ top:180%;  }
	.navbar .nav-item:hover .dropdown-menu{ transition: .3s; opacity:1; visibility:visible; top:100%; transform: rotateX(0deg); }
}
*/














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

.img-wrap > 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
--------------------------------------------------  */


.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: calc(50vh - var(--navbar-height));
}



@media (min-width: 768px) {
.splash {
	height: calc(40vh - var(--navbar-height));
min-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: 32px;
}

.sticky-contact {
	width: 100%;
	opacity: 0;
}
.sticky-contact.fixit { 
	position: fixed;
	bottom: 0px;
	
}
.sticky-contact.seeit { 
	transition: opacity 0.5s;
	opacity: 1; 
}
.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.6);
/* padding-bottom: calc(var(--contactUnit) * 0.2); */
/* line-height: 1; */
}

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);
}

@media (max-width: 767px) {
	#stickyContact { --contactUnit: 24px; }
}

/* Footer
--------------------------------------------------  */
footer {
	padding-bottom: 70px;
}

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;  }
a.breed-link { background-position: -400px 0; }
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;}



/* 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: 448px) {
footer {
	padding-bottom: 94px; }
}