/* BODY STYLES
-------------------------------------------------- */
/* Colour Palatte
mid grey = #858585 = rgba(133, 133, 133, 1)
link blue = #0056b3 = rgba(0, 86, 179, 1)
Modo Green Original #00B259 - rgba(0,178,89,1)
Modo Green New #00AE42 - rgba(0,174,66,1)
Extra breakpoints for scaling above 1200px width
Body type, lists etc at 1200 > 1560 > 1920
Mid scales if required 1200 > 1440 > 1680 > 1920
Above 1920 do we go fully scalable ?
*/
/* FONTS - reference for font weights *
AvenirLTPro-Light 200
AvenirLTPro-Book 300
AvenirLTPro-Roman 400
AvenirLTPro-Medium 500
AvenirLTPro-Heavy 700
AvenirLTPro-Black 900
*/
/*
Extra small <576px
Small ≥576px
Medium ≥768px
Large ≥992px
Extra large ≥1200px
*/
/* Video Media queries for JS
--------------------------------------------------
*/
@media (orientation: portrait) { url("/site/templates/video/hv-720p-square.mp4")}
@media (orientation: landscape) and (max-width: 960px) { url("/site/templates/video/hv-480p-mobile.mp4")}
/* BODY
---------------------------------------------------- */
html {
scroll-behavior: smooth;
}
/* VARIABLES ------------------------------------- */
:root {
--modo-green: #00AE42;
--text-grey: #858585;
}
:root {
--navbar-height: 84px;
}
@media (max-width: 1056px){
:root {
--navbar-height: 73px;
}}
@media (min-width: 1680px){
:root {
--navbar-height: 96px;
}}
body {
color: #000000;
background-color: #ffffff;
/* For fixed nav Make the same as Navbar height - remove for transparent animated version */
padding-top: var(--navbar-height);
background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(0,0,0,1) 0px, rgba(0,0,0,1) 120px, rgba(255,255,255,1) 120px, rgba(255,255,255,1) 200px);
}
/* Only render when in viewport */
/*
picture img {
content-visibility: auto;
}
*/
/* TYPOGRAPHY
-------------------------------------------------- */
body {
font-family: 'AvenirLTPro', sans-serif;
font-weight: 200;
letter-spacing: 0.07em;
}
/*control bold and italics etc. */
b, strong {
font-weight: 700;
}
h1,h2,h5,.h1,.h2,.h5,.display-1,.display-2,.display-5 {
font-weight: 900;
color: inherit;
letter-spacing: 0.05em;
line-height: 1;
}
h3,h4,h6,.h3,.h4,.h6,
.display-3, .display-4 {
font-weight: 700;
color: inherit;
letter-spacing: 0.05em;
line-height: 1;
}
.weight-700 { font-weight: 700 !important; }
h1,h2,.h1,.h2 { margin-bottom: 1rem; } /* REMOVED H3 FROM THIS FOR KNOWLEDGE PAGE !!!!!!!!! */
.text-grey { color: #858585 !important; }
.caps {
text-transform: uppercase;
line-height: 1;
}
.display-0 {
font-weight: 900;
color: inherit;
letter-spacing: 0.05em;
line-height: 1;
}
.display-0 { font-size: 3.6rem; margin-bottom: 1rem; hyphens: none; }
.display-1 { font-size: 2.8rem; }
.display-2 { font-size: 1.8rem; }
.display-3 { font-size: 1.5rem; }
.display-4 { font-size: 1.5rem; }
.display-5 { font-size: 1.25rem; }
.display-0, .display-1, .display-2, .display-3, .display-4, .display-5 { letter-spacing: 0.07em; }
/* Responsive Display Headings */
/* small screen PROBLEM PAGES: CD MANUFACTURING, HOME (SUSTAINABILITY) */
@media (max-width: 520px) {
.display-0 { font-size: 2.4rem; hyphens: none; }
.display-1 { font-size: 2rem; }
} /* /@media */
@media (min-width: 519px) and (max-width: 719px) {
.display-0 { font-size: 3rem; hyphens: auto; }
.display-1 { font-size: 2.4rem; }
} /* /@media */
/* large screen */
@media (min-width: 992px) {
.display-0 { font-size: 5.5vw; } /* 120px @ 1920 */
.display-1 { font-size: 4.6vw; } /* 100px @ 1920 */
.display-2 { font-size: 3.9vw; } /* 75px @ 1920 */
.display-3 { font-size: 2.9vw; } /* 56px @ 1920 */
.display-4 { font-size: 2vw; } /* 40px @ 1920 */
.display-5 { font-size: 1.2vw; }
h1,h2,.h1,.h2, .display-0 { margin-bottom: 2.6vw; }
} /* /@media */
/* We need to reduce the kerning and font size for small phones */
@media (max-width: 719px) and (orientation: portrait) {
} /* /@media */
.display-text-shadow {
text-shadow: 2px 2px 2px #000000;
}
.bread {
position: relative;
/* overflow: auto; */
}
.crumbs {
position: absolute;
display: block;
min-width: 400px;
left: calc(7vw * 0.5625);/* The same as small padding */
top: -4rem;
}
@media (max-width: 767px) {
.crumbs {
left: 0;
top: 0;
min-width: 300px;
position: relative;
padding-left: 0;
padding-bottom: 2rem;
}
} /* @media */
h4, .h4, h5, .h5 {
color: #858585;
font-size: 0.9rem;
font-weight: 700;
text-transform: uppercase;
margin-top: 3rem;
}
span.h4-line {
display: inline-block;
color: #858585;
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1;
font-size: 0.9rem;
text-transform: uppercase;
background: transparent url(../img/h-line_6x6.png) no-repeat left center;
background-size: 60px 6px;
padding-left: 60px;
padding-left: 75px;
/* text-indent: 15px; */
}
h4.h-line {
background: transparent url(../img/h-line_6x6.png) no-repeat left center;
background-size: 60px 6px;
padding-left: 75px;
/* text-indent: 15px; */
margin-bottom: 2rem; /* MRLL ???????? */
margin-top: 0;
}
h4.h-line.h-spacer {
margin-bottom: 3rem;
}
h5 {
margin-top: 0;
margin-bottom: 1em;
}
@media (min-width: 1200px) {
h4, .h4 { margin-top: 3rem; }
h4.h-line, .h4-line { margin-bottom: 3rem; }
h4.h-line-spacer { margin-bottom: 3rem; }
} /* @media */
@media (max-width: 992px) and (max-aspect-ratio: 99/100) {
h4, .h4 { margin-top: 3rem; }
h4.h-line, .h4-line { margin-bottom: 1rem; }
h4.h-line-spacer { margin-bottom: 1rem; }
} /* @media */
/* Change type face for Playback logo */
.playback-type {
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Responsive Paragraph Styles
Add para-size classes to parent to us responsive paragraph font-size */
@media (min-width: 768px) {
.para-size p, .para-size ol > li { font-size: 1rem; }
}
@media (min-width: 992px) {
.para-size p, .para-size ol > li { font-size: 1.1rem; }
}
@media (min-width: 1200px) {
.para-size p, .para-size ol > li { font-size: 1.25rem; }
}
@media (min-width: 1680px) {
.para-size p, .para-size ol > li { font-size: 1.25rem; }
.para-size-lg p {
font-size: 1.25rem;
line-height: 1.25;
}
}
/* Add this to SVG img to fix IE10 bug */
.svg-fluid {
width: 100% \9;
}
/* REMOVE ALL ANCHOR UNDERLINES THEN ADD BACK WHEN REQUIRED */
a, a:visited, a:active, a:hover {
text-decoration: none;
color: #000000;
}
/* INLINE ANCHOR TAGS AHOY in paragraph, h5 or .inline class */
p a, p a:visited, p a:hover, p a:active, p a:focus, a.inline, a.inline:hover, a.inline:visited, a.inline:active, h5 > a, h5 > a:visited, h5 > a:active {
color: #000000;
text-decoration: underline;
}
.negative a, .negative a:hover, .negative a:visited, .negative a:active, .reverse a, .reverse a:hover, .reverse a:visited, .reverse a:active, .negative p a, .negative p a:hover, .negative p a:visited, .negative p > a:active, .negative a.inline, .negative a.inline:visited, .negative a.inline:active, .negative h5 > a, .negative h5 > a:visited, .negative h5 > a:active {
color: #ffffff;
text-decoration: underline;
}
p a:hover, a.inline:hover, h5 a:hover, .negative a:hover {
color: #858585;
}
a.modo-r, a.modo-r:visited, a.modo-r:active {
border-bottom: dotted #00AE42 2px;
}
a.modo-r:hover {
color: #00AE42;
border-bottom: solid #00AE42 2px;
text-decoration: none;
}
.modo-green {
color: #00AE42 !important;
}
/* Define default list style for body */
ul.list, ul.list ul {
list-style: none;
font-weight: 200;
margin-left: 0;
padding-left: 0;
font-size: 1.2rem;
margin-bottom: 2em;
}
ul.list > li {
line-height: 1.5;
}
/* NAVBAR
-------------------------------------------------- */
.navbar {
color: #ffffff;
font-size: 1rem;
letter-spacing: 0.1em;
background-color: rgba(0,0,0,1);
padding: 0;
}
/* Set X padding to equal content margin - toggle button right padding = 0.75rem */
.navbar { padding: 0 20px; }
@media (min-width: 720px) { .navbar { padding: 0 30px; } }
@media (min-width: 960px) { .navbar { padding: 0 calc(5vw * 0.5625); } }
@media (min-width: 1200px) { .navbar { padding: 0 calc(7vw * 0.5625); } }
.navbar-brand {
text-indent: -9999px;
display: block;
background: transparent url(../img/key-logo-wht_200x66.svg) no-repeat center center;
background-size: 200px 66px;
width: 200px;
height: 66px;
margin-top: 9px;
margin-right: 0;
margin-bottom: 9px;
transition: all 0.5s;
}
/* For very small screens we shrink the logo */
@media (max-width: 1056px){
.navbar-brand {
background-size: 167px 55px;
width: 167px;
height: 55px;
}
} /* /@media */
/* For large screens we increase the logo */
@media (min-width: 1680px){
.navbar-brand {
background-size: 236px 78px;
width: 236px;
height: 78px;
}
} /* /@media */
.navbar-nav .nav-link {
padding-right: 1.2rem;
padding-left: 1.2rem;
text-shadow: 2px 2px 2px #000000;
}
.dropdown-item {
padding-left: 1.2rem;
}
/* Align right-hand nav item with margin for top nav */
@media (min-width: 992px) {
.navbar-nav .nav-item:last-child > .nav-link { padding-right: 0; }
} /* /@media */
.navbar-nav .nav-link {
font-weight: 200;
color: rgba(255, 255, 255, 1);
border-bottom: none;
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus {
color: rgba(255, 255, 255, 0.75);
border-bottom: none;
}
.dropdown.show {
background-color: #000000;
}
/* Dropdown menu */
.dropdown-menu, .navbar-nav .dropdown-menu {
min-width: 10rem;
padding: 0 0 0.5rem 0;
margin: 0;
text-align: left;
list-style: none;
background-color: #000000;
background-clip: padding-box;
border: none;
border-radius: 0;
}
a.dropdown-item {
padding: 0.25rem 1.5rem;
padding-right: 2rem;
font-weight: 200;
font-size: inherit;
color: #ffffff;
text-align: inherit;
background-color: transparent;
border: 0;
}
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active, .dropdown-item:active {
color: #fff;
text-decoration: none;
background-color: #000000;
}
/* .dropdown-indicator::after {
display: inline-block;
margin-left: 0.255em;
content: "\2193";
transform: rotate(-30deg);
} */
.dropdown-indicator::after {
display: inline-block;
margin-left: 0.255em;
content: " ";
width: 1rem;
height: 1rem;
background: transparent url(../img/arrow-dre-wht_24x16.svg) no-repeat right center;
background-size: 12px 8px;
transform: rotate(90deg);
}
/* Sub Menu Hover - built on Menukit */
@media (hover: hover) and (min-width: 992px) {
.navbar .nav-item .dropdown-menu { display:block; opacity: 0; visibility: hidden; transition:.3s; margin-top:0; }
.navbar .dropdown-menu.fade-down{ top:80%; transform: rotateX(-75deg); transform-origin: 0% 0%; }
.navbar .nav-item:hover .dropdown-menu{ transition: .3s; opacity:1; visibility:visible; top:100%; transform: rotateX(0deg); }
.navbar .nav-item.dropdown:hover { background-color: #000000; }
.navbar .nav-item.dropdown:hover .dropdown-indicator::after { background-image: none; }
.dropdown-item.active, .dropdown-item:active, .dropdown.show { background-color: transparent; }
.dropdown-item:hover {
padding-left: 2.7rem;
background: transparent url(../img/arrow-dre-wht_24x16.svg) no-repeat 1.2rem center;
background-size: 12px 8px;
}
}/* /@media */
.navbar-toggler {
padding: 0.25rem 0.75rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: none;
border-radius: 0;
}
.navbar-toggler:hover, .navbar-toggler:focus {
text-decoration: none;
}
.navbar-toggler-icon {
display: inline-block;
width: 2.4rem;
height: 2.4rem;
vertical-align: middle;
content: "";
background: #000000 url(../img/burger-wht_24x18.svg) no-repeat center center;
background-color: rgba(0,0,0,0.5);
background-size: 24px 18px;
border-radius: 1.2rem;
}
/* ANIMATED BURGER */
.hamburger {
padding: 15px 15px;
display: inline-block;
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;
margin-right: -15px; /* align with right content whilst retaining hit area */
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: #ffffff; }
.hamburger-box {
width: 30px;
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: 30px;
height: 3px;
background-color: #ffffff;
border-radius: 0;
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; }
/* Squeeeze */
.hamburger--squeeze .hamburger-inner {
transition-duration: 0.075s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--squeeze .hamburger-inner::before {
transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
.hamburger--squeeze .hamburger-inner::after {
transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--squeeze.is-active .hamburger-inner {
transform: rotate(45deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--squeeze.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
.hamburger--squeeze.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
button.hamburger:focus { outline: none; }
/* MODO DESIGN LINK */
.navbar-nav .modo-nav-link {
color:rgba(0,174,66,1);
}
.navbar-nav .modo-nav-link:hover {
color:rgba(0,174,66,0.75);
}
/* Modo Navbar */
.modo .navbar:before {
content: " ";
display: block;
position: absolute;
left: 0;
bottom: -2px;
width: 2px;
height: 2px;
background-color: #00AE42;
animation-name: modoline;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
@keyframes modoline {
from {width: 2px;}
to {width: 100vw;}
}
.modo .navbar:after {
content: " ";
display: block;
position: absolute;
right: calc(7vw * 0.5625);
bottom: -3rem;
width: 192px;
height: 24px;
background: transparent url(../img/design-by-modo_256x32.svg) no-repeat center center;
background-size: 192px 24px;
/* filter: drop-shadow(0.05rem 0.05rem 0.07rem rgba(0, 0, 0, 0.7)); */
opacity: 0;
animation-name: modoby;
animation-duration: 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
@keyframes modoby {
from {opacity: 0;}
to {opacity: 1;}
}
/*
body.modo:after {
content: " ";
display: block;
position: fixed;
right: 1.5rem;
bottom: 1.5rem;
width: 80px;
height: 80px;
background: transparent url(../img/modo-hex_128x128.svg) no-repeat center center;
background-size: 80px 80px;
z-index: 2003;
filter: drop-shadow(0.2rem 0.2rem 0.25rem rgba(0, 0, 0, 0.5));
opacity: 0;
animation-name: modohex;
animation-duration: 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
} */
a.modo-hex {
display: none;
position: fixed;
right: 1.5rem;
bottom: 1.5rem;
width: 80px;
height: 80px;
background: transparent url(../img/modo-hex_128x128.svg) no-repeat center center;
background-size: 80px 80px;
z-index: 900;
filter: drop-shadow(0.2rem 0.2rem 0.25rem rgba(0, 0, 0, 0.5));
opacity: 0;
animation-name: modohex;
animation-duration: 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
@keyframes modohex {
from {opacity: 0;}
to {opacity: 1;}
}
body.modo .modo-hex { display: block; }
/* revised Modo Design animation and links */
.btn-modo {
border-color: #00AE42 !important;
color: #ffffff !important;
background-color: transparent !important;
}
.btn-modo:hover {
border-color: #00AE42 !important;
color: #00AE42 !important;
background-color: transparent !important;
}
/* MVPA Logo for BL */
a.mvpa-logo {
display: none;
position: fixed;
left: 1.5rem;
bottom: 1.5rem;
width: 80px;
height: 80px;
background: transparent url(../img/mvpa-logo_1024x1024.png) no-repeat center center;
background-size: 80px 80px;
z-index: 900;
filter: drop-shadow(0.2rem 0.2rem 0.25rem rgba(0, 0, 0, 0.5));
opacity: 0;
animation-name: mvpalogo;
animation-duration: 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
a.mvpa-logo:after {
content: "Award Winner";
position: absolute;
left: 90px;
top: 20px;
width: 250px;
font-weight: 900;
font-size: 2rem;
color: #fff;
animation-name: mvpafade;
animation-duration: 1s;
animation-delay: 3s;
animation-fill-mode: forwards;
}
@keyframes mvpalogo {
from {opacity: 0;}
to {opacity: 1;}
}
body.mvpa .mvpa-logo { display: block; }
@keyframes mvpafade {
from {opacity: 1;}
to {opacity: 0;}
}
/* Add text to work menu item */
.mvpa-award:after {
content: "Award Winner";
position: absolute;
display: block;
bottom: 4px;
right: 0px;
left: 0px;
text-align: center;
font-size 75%;
height: 1.5rem;
z-index: 101;
text-transform: capitalize;
}
/* GRAMMY NOM for BL */
a.grammy-nom {
display: none;
position: fixed;
left: 1.5rem;
bottom: 1.5rem;
width: 80px;
height: 80px;
border-radius: 40px;
background: transparent url(../img/grammy-nominated.jpg) no-repeat center center;
background-size: 80px 80px;
z-index: 900;
filter: drop-shadow(0.2rem 0.2rem 0.25rem rgba(0, 0, 0, 0.5));
opacity: 0;
animation-name: mvpalogo;
animation-duration: 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
a.grammy-nom:after {
content: "Case Study";
position: absolute;
left: 90px;
top: 20px;
width: 250px;
font-weight: 900;
font-size: 2rem;
color: #fff;
animation-name: grammyfade;
animation-duration: 1s;
animation-delay: 3s;
animation-fill-mode: forwards;
}
@keyframes grammynom {
from {opacity: 0;}
to {opacity: 1;}
}
body.alpha-wolf .grammy-nom { display: block; }
@keyframes grammyfade {
from {opacity: 1;}
to {opacity: 0;}
}
/* GRAMMY NOM for BL */
.grammy-stick {
display: none;
position: fixed;
left: 1.5rem;
bottom: 1.5rem;
width: 120px;
height: 120px;
border-radius: 60px;
background: transparent url(../img/grammy-nominated.jpg) no-repeat center center;
background-size: 120px 120px;
z-index: 900;
filter: drop-shadow(0.2rem 0.2rem 0.25rem rgba(0, 0, 0, 0.5));
opacity: 0;
animation-name: grammystick;
animation-duration: 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
@keyframes grammystick {
from {opacity: 0;}
to {opacity: 1;}
}
body.alpha-wolf-case-study .grammy-stick { display: block; }
@keyframes grammyfade {
from {opacity: 1;}
to {opacity: 0;}
}
/* PLAYBACK LINK */
.playback-type {
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* MenuKit Additions */
body.offcanvas-active {
overflow: hidden; }
.offcanvas-header {
display: none; }
body.offcanvas-active{
overflow:hidden;
}
.offcanvas-header{ display:none; }
/* Off-canvas Menu Styles */
@media (max-width: 991px) {
.offcanvas-header { display: block; }
.navbar-collapse {
position: fixed;
top: 72px;
bottom: 0;
left: 100%;
width: 100vw;
padding-right: 1rem;
padding-left: 1rem;
overflow-y: auto;
visibility: hidden;
background-color: #000000;
text-align: center;
transition: visibility .2s ease-in-out, transform .2s ease-in-out;
}
.navbar-collapse.show {
visibility: visible;
transform: translateX(-100%);
z-index: 1000;
}
.navbar-nav { padding-top: 5vh; }
.dropdown.show {
background-color: #000000;
}
.dropdown-menu, .navbar-nav .dropdown-menu {
background-color: #000000;
padding-top: 0;
margin-top: -0.5rem;
padding-bottom: 1rem;
text-align: center;
/* display: block; */
}
.dropdown-item {
display: block;
width: 100%;
padding: 0.25rem 1.5rem;
clear: both;
font-weight: 200;
font-size: inherit;
color: #ffffff;
text-align: center;
white-space: nowrap;
background-color: transparent;
border: 0;
}
.dropdown-item:hover, .dropdown-item:focus {
color: #ffffff;
text-decoration: none;
}
a.dropdown-item, a.dropdown-item:hover, a.dropdown-item:focus {
padding-right: 0;
padding-left: 0;
}
.dropdown.show .dropdown-indicator::after { opacity: 0.5; }
} /* /@media */
/* RESPONSIVE NAVBAR - Adjustments for all screen sizes and orientations */
@media (min-width: 992px) and (max-width: 1199px){
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 1rem;
padding-left: 1rem;
letter-spacing: 0.05em;
}
.dropdown-item {
padding-left: 1rem;
}
/* Compensate for hover increase in padding left to maintain width of list */
.dropdown-item:hover {
padding-right: 0.3rem;
}
} /* /@media */
@media (min-width: 1200px){
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 1.2rem;
padding-left: 1.2rem;
}
.dropdown-item {
padding-left: 1.2rem;
}
/* Compensate for hover increase in padding left to maintain width of list */
.dropdown-item:hover {
padding-right: 0.5rem;
}
} /* /@media */
@media (min-width: 1440px) and (max-width: 1679px) {
.navbar { font-size: 1.2rem; }
.dropdown-indicator::after { background-size: 15px 10px; }
} /* /@media */
@media (min-width: 1680px) {
.navbar { font-size: 1.4rem; }
.dropdown-indicator::after { background-size: 18px 12px; }
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 1.8rem;
padding-left: 1.8rem;
}
.dropdown-item { padding-left: 1.8rem; }
/* Compensate for hover increase in padding left to maintain width of list */
.dropdown-item:hover {
padding-right: 1.1rem;
}
} /* /@media */
/* Make room for dropdown on small phones */
@media (max-width: 991px) and (max-height: 799px) {
.navbar-nav .nav-link { font-size: 1.4rem; }
.dropdown-indicator::after { background-size: 18px 12px; }
a.dropdown-item { font-size: 1rem; }
} /* /@media */
@media (max-width: 991px) and (min-height: 800px) {
.navbar-nav { padding-top: 10vh; }
.navbar-nav .nav-link { font-size: 1.8rem; }
.dropdown-indicator::after { background-size: 18px 12px; }
a.dropdown-item { font-size: 1rem; }
} /* /@media */
@media (max-width: 991px) and (min-height: 900px) {
.navbar-nav .nav-link { font-size: 2rem; }
.dropdown-indicator::after { background-size: 21px 14px; }
a.dropdown-item { font-size: 1.2rem; }
} /* /@media */
/* BUTTONS
--------------------------------------------------- */
.btn, .btn:visited {
display: inline-block;
font-weight: 200;
text-transform: uppercase;
color: #000000;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #000000;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
letter-spacing: 0.05em; /* additional */
}
.btn:hover, .btn:active {
color: #ffffff;
background-color: #000000;
}
.btn:hover, .btn:focus, .btn:active {
color: #000000;
background-color: #eeeeee;
}
/* Negative versions */
.btn-negative, .btn-negative:visited, .negative .btn, .negative .btn:visited {
color: #ffffff;
background-color: #000000;
border: 1px solid #ffffff;
}
.btn-negative:hover, .btn-negative:focus, .btn-negative:active, .negative .btn:hover, .negative .btn:active {
color: #000000;
background-color: #ffffff;
}
.btn-negative:focus, .negative .btn:focus {
color: #ffffff;
background-color: #171717;
}
.btz, .btz:visited, a.btz, a.btz:visited {
display: inline-block;
text-decoration: none;
font-weight: 200;
color: #ffffff;
text-align: left;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #000000;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0;
letter-spacing: 0.05em; /* additional */
}
.btz:hover, .btz:focus, .btz:active {
color: #ffffff;
background-color: #000000;
border-bottom: 1px solid #000000;
}
/* Negative versions
.btz.negative, .btz.negative:visited, .negative .btz, .negative .btz:visited {
color: #ffffff;
background-color: #000000;
}
.btz.negative:hover, .btz.negative:focus, .btz.negative:active, .negative .btz:hover, .negative .btz:focus, .negative .btz:active {
color: #000000;
background-color: #ffffff;
}
*/
/* alternatating versions for home page */
.feature .btn {
margin-top: 2rem;}
/*
.feature:nth-child(even) {
color: #ffffff;
background: #000000;
border: 1px solid #ffffff;
}
*/
@media screen and (min-width:1200px) {
.btn-outline-key {
font-size: 1.2rem;
}
} /* @media */
/* arrow button &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&. */
p.arrw-wrap {
margin-top: 1.5rem;
}
.arrw-btn {
position: relative;
}
a.arrw-btn, a.arrw-btn:hover {
text-decoration: none !important;
border-bottom: none;
}
.arrw {
position: relative;
display: inline-block;
line-height: 1.2;
padding: 0px 1em 7px 0px;
font-size: 1rem;
box-sizing: border-box;
margin: 0px;
pointer-events: all;
color: #000000;
}
.arrw::before, .arrw::after {
content: " ";
position: absolute;
display: block;
width: 1.2rem;
height: 1.2rem;
top: 0;
right: -1px;
background: transparent url(../img/arrow-dre-blk_24x16.svg) no-repeat right center;
background-size: 12px 8px;
transform: translate(0%, 0%);
will-change: transform, opacity;
}
.arrw-btn:hover .arrw::after {
animation-name: arrw1;
animation-duration: 250ms;
animation-delay: 0ms;
animation-fill-mode: both;
animation-timing-function: linear;
}
.arrw-btn:hover .arrw::before {
animation-name: arrw2;
animation-duration: 250ms;
animation-delay: 200ms;
animation-fill-mode: both;
animation-timing-function: ease-out;
}
.under {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 1px;
background-color: #000000;
overflow: hidden;
}
.under::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
background-color: #ffffff;
height: 1px;
width: 100%;
transform: scaleX(0);
transform-origin: bottom left;
/* transition: transform ease-in-out 2500ms; */
}
.arrw-btn:hover .under::before {
animation-name: underline;
animation-duration: 500ms;
animation-delay: 0s;
animation-fill-mode: both;
animation-timing-function: ease-out;
}
/* text preceding CTA */
.call {
font-size: 1rem;
line-height: 1.2;
}
/* Negative for reverse out */
.negative .arrw, .arrw.neg { color: #ffffff; }
.negative .arrw::before, .negative .arrw::after, .arrw.neg::before, .arrw.neg::after { background: transparent url(../img/arrow-dre-wht_24x16.svg) no-repeat right center; background-size: 12px 8px; }
.negative .under, .under.neg { background-color: #ffffff; }
.negative .under::before, .under.neg::before { background-color: #000000; }
/* Modo Version ??? */
.negative .arrw.grn { color: #ffffff; }
.negative .arrw.grn::before, .negative .arrw.grn::after { background: transparent url(../img/arrow-dre-grn_24x16.svg) no-repeat right center; background-size: 12px 8px; }
.negative .arrw.grn .under { background-color: #00AE42; }
.negative .arrw.grn .under::before { background-color: #858585; }
/* Alternate for reverse out */
.negative .arrw, .arrw.neg { color: #ffffff; }
.negative .arrw::before, .negative .arrw::after, .arrw.neg::before, .arrw.neg::after { background: transparent url(../img/arrow-dre-wht_24x16.svg) no-repeat right center; background-size: 12px 8px; }
.negative .under, .under.neg { background-color: #ffffff; }
.negative .under::before, .under.neg::before { background-color: #000000; }
/* Increase button size for larger screens */
@media (min-width: 1200px) {
.arrw, .call {
line-height: 1.5;
font-size: 1.25rem;
}
.arrw::before, .arrw::after {
width: 1.5rem;
height: 1.5rem;
top: 0.2rem;
right: -3px;
background-size: 18px 12px;
}
.under { height: 2px; }
.under::before { height: 2px; }
.negative .arrw::before, .negative .arrw::after, .negative .arrw.grn::before, .negative .arrw.grn::after, .arrw.neg::before, .arrw.neg::after { background-size: 18px 12px; }
} /* /@media */
/* Arrw Button animatiions*/
@-webkit-keyframes underline {
0% { transform: scaleX(0); transform-origin: bottom left;}
49% { transform: scaleX(1); transform-origin: bottom left; }
50% { transform: scaleX(1); transform-origin: bottom right; }
51% { transform: scaleX(1); transform-origin: bottom right; }
100% { transform: scaleX(0); transform-origin: bottom right; }
}
@keyframes underline {
0% { transform: scaleX(0); transform-origin: bottom left;}
49% { transform: scaleX(1); transform-origin: bottom left; }
50% { transform: scaleX(1); transform-origin: bottom right; }
51% { transform: scaleX(1); transform-origin: bottom right; }
100% { transform: scaleX(0); transform-origin: bottom right; }
}
@-webkit-keyframes arrw1 { from
{opacity:1;-webkit-transform:translate(0%,0%);-ms-transform:translate(0%,0%);transform:translate(0%,0%);}to{opacity:0;-webkit-transform:translate(75%,0%);-ms-transform:translate(75%,0%);transform:translate(75%,-0%);}
}
@keyframes arrw1 { from
{opacity:1;-webkit-transform:translate(0%,0%);-ms-transform:translate(0%,0%);transform:translate(0%,0%);}to{opacity:0;-webkit-transform:translate(75%,0%);-ms-transform:translate(75%,0%);transform:translate(75%,-0%);}
}
@-webkit-keyframes arrw2 { from
{opacity:0;-webkit-transform:translate(-75%,0%);-ms-transform:translate(-75%,0%);transform:translate(-75%,0%);}to{opacity:1;-webkit-transform:translate(0%,0%);-ms-transform:translate(0%,0%);transform:translate(0%,0%);}
}
@keyframes arrw2 { from
{opacity:0;-webkit-transform:translate(-75%,0%);-ms-transform:translate(-75%,0%);transform:translate(-75%,0%);}to{opacity:1;-webkit-transform:translate(0%,0%);-ms-transform:translate(0%,0%);transform:translate(0%,0%);}
}
/* REVERSE Arrow Buttons &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
.wrra-btn {
position: relative;
}
a.wrra-btn, a.wrra-btn:hover {
text-decoration: none !important;
border-bottom: none;
}
.wrra {
position: relative;
display: inline-block;
line-height: 1.2;
padding: 0px 0em 7px 1em;
font-size: 1rem;
box-sizing: border-box;
margin: 0px;
pointer-events: all;
color: #000000;
}
.wrra::before, .wrra::after {
content: " ";
position: absolute;
display: block;
width: 1.2rem;
height: 1.2rem;
top: 0;
left: -7px;
background: transparent url(../img/arrow-dre-blk_24x16.svg) no-repeat left center;
background-size: 12px 8px;
transform: translate(0%, 0%) rotate(180deg);
will-change: transform, opacity;
}
.wrra-btn:hover .wrra::after {
animation-name: wrra1;
animation-duration: 250ms;
animation-delay: 0ms;
animation-fill-mode: both;
animation-timing-function: linear;
}
.wrra-btn:hover .wrra::before {
animation-name: wrra2;
animation-duration: 250ms;
animation-delay: 200ms;
animation-fill-mode: both;
animation-timing-function: ease-out;
}
.wunder {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 1px;
background-color: #000000;
overflow: hidden;
}
.wunder::before {
content: "";
position: absolute;
right: 0;
bottom: 0;
background-color: #ffffff;
height: 1px;
width: 100%;
transform: scaleX(0);
transform-origin: bottom right;
/* transition: transform ease-in-out 2500ms; */
}
.wrra-btn:hover .wunder::before {
animation-name: wunderline;
animation-duration: 500ms;
animation-delay: 0s;
animation-fill-mode: both;
animation-timing-function: ease-out;
}
/* text preceding CTA */
.call {
font-size: 1rem;
line-height: 1.2;
}
/* Increase button size for larger screens */
@media (min-width: 1200px) {
.wrra, .call {
line-height: 1.5;
font-size: 1.25rem;
}
.wrra::before, .wrra::after {
width: 1.5rem;
height: 1.5rem;
top: 0.2rem;
left: -7px;
background-size: 18px 12px;
}
.wunder { height: 2px; }
.wunder::before { height: 2px; }
} /* /@media */
/* Arrw Button animatiions*/
@-webkit-keyframes wunderline {
0% { transform: scaleX(0); transform-origin: bottom right;}
49% { transform: scaleX(1); transform-origin: bottom right; }
50% { transform: scaleX(1); transform-origin: bottom left; }
51% { transform: scaleX(1); transform-origin: bottom left; }
100% { transform: scaleX(0); transform-origin: bottom left; }
}
@keyframes wunderline {
0% { transform: scaleX(0); transform-origin: bottom right;}
49% { transform: scaleX(1); transform-origin: bottom right; }
50% { transform: scaleX(1); transform-origin: bottom left; }
51% { transform: scaleX(1); transform-origin: bottom left; }
100% { transform: scaleX(0); transform-origin: bottom left; }
}
@-webkit-keyframes wrra1 { from
{opacity:1;-webkit-transform:translate(0%,0%) rotate(180deg);-ms-transform:translate(0%,0%) rotate(180deg);transform:translate(0%,0%) rotate(180deg);}to{opacity:0;-webkit-transform:translate(-75%,0%) rotate(180deg);-ms-transform:translate(-75%,0%) rotate(180deg);transform:translate(-75%,-0%) rotate(180deg);}
}
@keyframes wrra1 { from
{opacity:1;-webkit-transform:translate(0%,0%) rotate(180deg);-ms-transform:translate(0%,0%) rotate(180deg);transform:translate(0%,0%) rotate(180deg);}to{opacity:0;-webkit-transform:translate(-75%,0%) rotate(180deg);-ms-transform:translate(-75%,0%) rotate(180deg);transform:translate(-75%,-0%) rotate(180deg);}
}
@-webkit-keyframes wrra2 { from
{opacity:0;-webkit-transform:translate(75%,0%) rotate(180deg);-ms-transform:translate(75%,0%) rotate(180deg);transform:translate(75%,0%) rotate(180deg);}to{opacity:1;-webkit-transform:translate(0%,0%) rotate(180deg);-ms-transform:translate(0%,0%) rotate(180deg);transform:translate(0%,0%) rotate(180deg);}
}
@keyframes wrra2 { from
{opacity:0;-webkit-transform:translate(75%,0%) rotate(180deg);-ms-transform:translate(75%,0%) rotate(180deg);transform:translate(75%,0%) rotate(180deg);}to{opacity:1;-webkit-transform:translate(0%,0%) rotate(180deg);-ms-transform:translate(0%,0%) rotate(180deg);transform:translate(0%,0%) rotate(180deg);}
}
/* FORMS
------------------------------------------------------------------------------------------------------------- */
/* original based on Boot4
.form-control {
display: block;
width: 100%;
height: calc(1.5em + 0.75rem + 4px);
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: none;
border-radius: 0;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
*/
label {
display: inline-block; /* default */
margin-bottom: 0.5rem; /* default */
/* style like h4 */
color: #858585;
color: #ffffff;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
}
label.radio-wrap { font-size: 0.9rem; }
span.form-text {
font-size: 0.8rem;
color: #858585;
}
.form-control {
display: block;
width: 100%;
height: calc(1.5em + 0.75rem + 4px);
padding: 0.375rem 0.75rem;
/* font-size: 1.75rem; */
font-size: 1.2rem;
font-weight: 200;
line-height: 1.2;
color: #ffffff;
background-color: #111111;
background-clip: padding-box;
border: none;
border-bottom: #858585 solid 1px;
border-radius: 0;
transition: background-color 0.15s ease-in-out, border-bottom 0.15s ease-in-out;
}
.form-control::-ms-expand {
background-color: transparent;
border: 0;
}
.form-control:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #858585;
}
.form-control:focus {
color: #ffffff;
background-color: #171717;
outline: 0;
border-bottom: #ffffff solid 1px;
box-shadow: 0 0 0 0.2rem rgba(123, 123, 123, 0.25);
box-shadow: none;
}
.form-control::-webkit-input-placeholder {
color: #ffffff;
opacity: 1;
}
.form-control::-moz-placeholder {
color: #858585;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #6c757d;
opacity: 1;
}
.form-control::-ms-input-placeholder {
color: #858585;
opacity: 1;
}
.form-control::placeholder {
color: #858585;
opacity: 1;
}
.form-control:disabled, .form-control[readonly] {
background-color: #141414;
opacity: 1;
}
/* MAILCHIMP form additions */
form input .email {
background: #858585;
border: none;
}
/* CUSTOM RADIO BUTTON - Convert selection to checkboxes for negative and positive */
/* Customize the label container */
.radio-wrap {
display: block;
position: relative;
padding-left: 24px;
margin-bottom : 0.3rem;
cursor: pointer;
text-transform: capitalize;
color: #000000;
font-weight: 400;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default radio button */
.radio-wrap input {
position: absolute;
opacity: 0;
cursor: pointer;
width: 100%;
height: 24px;
top: 0;
left: 0;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 3px;
left: 0;
height: 16px;
width: 16px;
background-color: #ffffff;
border: 2px solid #000000;
z-index: -1;
/* border-radius: 50%; */
}
/* On mouse-over, add a grey background color */
.radio-wrap:hover input ~ .checkmark {
background-color: #a5a5a5;
}
/* When the radio button is checked, add a solid background */
.radio-wrap input:checked ~ .checkmark {
background-color: #000000;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.radio-wrap input:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) for a radio button
.radio-wrap .checkmark:after {
top: 3px;
left: 3px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #000000;
} */
/* Reverse Items - Add .reverse class to .radio-wrap to invert check boxes */
.reverse .radio-wrap { color: #ffffff; }
.reverse .checkmark {
background-color: #000000;
border-color: #ffffff;
z-index: 1;
}
.reverse .radio-wrap input:checked ~ .checkmark {
background-color: #ffffff;
}
/* CUSTOM RADIO BUTTON - Convert selection to checkboxes for negative and positive */
/* Customize the label container */
.check-wrap {
display: block;
position: relative;
padding-left: 24px;
margin-bottom : 0.3rem;
cursor: pointer;
text-transform: capitalize;
color: #000000;
font-weight: 400;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default radio button */
.check-wrap input {
position: absolute;
opacity: 0;
cursor: pointer;
width: 100%;
height: 24px;
top: 0;
left: 0;
}
/* Create a custom radio button */
.checkboxx {
position: absolute;
top: 3px;
left: 0;
height: 16px;
width: 16px;
background-color: #ffffff;
border: 2px solid #000000;
/* border-radius: 50%; */
}
/* On mouse-over, add a grey background color */
.check-wrap:hover input ~ .checkboxx {
background-color: #a5a5a5;
}
/* When the radio button is checked, add a solid background */
.check-wrap input:checked ~ .checkboxx {
background-color: #000000;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkboxx:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.check-wrap input:checked ~ .checkboxx:after {
display: block;
}
/* Reverse Items - Add .reverse class to .radio-wrap to invert check boxes */
.reverse .check-wrap { color: #ffffff; }
.reverse .checkboxx {
background-color: #000000;
border-color: #ffffff;
}
.reverse .check-wrap input:checked ~ .checkboxx {
background-color: #ffffff;
}
/* For use as radio button
.radio-wrap .checkmark:after {
top: 3px;
left: 3px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #ffffff;
} */
form.inline input {
margin-right: 20px;
}
form.inline label {
display: inline-block;
margin-bottom : 0.4rem;
margin-right: 30px;
padding-top: 2px;
}
/* Scale labels as per prices page */
@media (min-width: 1440px) {
form.inline label {
font-size: 1.1rem;
margin-bottom : 0.5rem;
margin-right: 40px;
padding-top: 0px;
}} /* /@media */
@media (min-width: 1680px) {
form.inline label {
font-size: 1.2rem;
margin-bottom : 0.6rem;
margin-right: 50px;
}} /* /@media */
/* CUSTOM SELECT DROPDOWN - Used for smaller screens to saver space
We don't style options due to browser limitations */
/* GLOBAL
--------------------------------------------------- */
.negative {
color: #ffffff;
background-color: #000000;
}
.green {
color: #ffffff;
background-color: #00AE42;
}
.shadow {
box-shadow: 2px 2px 2px #000000;
}
.text-shadow {
text-shadow: 2px 2px 2px #000000;
}
.circle-img { }
.circle-img > img {
width: 100%;
height: auto;
border-radius: 50%;
}
/* SPLASH SETTINGS
Extra setting may be found in individual sections ----------------------------- */
.body { --navbar-height: 84px; }
.splash {
position: relative;
display: block;
}
/* Set the height of the splash screen */
.splash-110 { height: calc(110vh - var(--navbar-height)); }
.splash-100 { height: calc(100vh - var(--navbar-height)); }
.splash-80 { height: calc(80vh - var(--navbar-height)); }
.splash-50 { min-height: 28.125vw; } /* half the screen height expands to fit text */
.splash-33 { min-height: 33vh; } /* expands to fit text */
.splash-16-9 { height: calc(56.25vw - var(--navbar-height)); } /* 16:9 Ratio manintained */
.splash-study { height: 60vh; } /* SEE MODO DESIGN SECTION FOR RWD */
@media (max-width: 1056px) {
body { --navbar-height: 73px; }
} /* /.@media */
@media (min-width: 1680px) {
body { --navbar-height: 96px; }
} /* /.@media */
.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;
font-size: 0.75rem;
content: "IMAGE: Key Production support the CommuniTree reforestation project in Nicaragua";
}
@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);
}
}
/* Allow the splash content to extend down on some pages */
@media (max-width: 1199px) {
.splash.auto {
height: auto;
padding-bottom: 3rem;
}
} /* /@media */
.row-splash {
padding-top: calc(21vw * 0.5625);
}
/* OVERIDE COLUMN WIDTH FOR SPLASH AREA FOR EXTREMES */
/* L A N D S C A P E */
@media (min-aspect-ratio: 2/1) {
.splash-100.service-splash {
height: auto;
min-height: calc(100vh - var(--navbar-height));
}
.row-splash {
padding-top: calc(21vw * 0.5625);
padding-top: 20vh;
}
.crumbs { top: -10vh;}
.nobreak {display: none; }
}/* /@media */
.cover {
position: absolute;
display: block;
overflow: hidden;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.cover img, .cover picture {
width: 100%;
height: 100%;
object-fit: cover;
}
.cover-img {
width: 100%;
object-fit: cover;
}
.cover-img-sq {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Specific Image Ratios used on MODO, */
.img-5x4 {
width: 100%;
height: 80%;
object-fit: cover;
}
/* Specific Image Ratios used on MODO, */
.cover-img-10x4, .cover-img-5x4l, .cover-img-5x4r {
position: absolute;
display: block;
overflow: hidden;
}
.cover-img-10x4 { top: 0; right: 0; bottom: 40%; left: 0; }
.cover-img-5x4l { top: 60%; right: 50%; bottom: 0; left: 0;}
.cover-img-5x4r { top: 60%; right: 0; bottom: 0; left: 50%;}
.cover-img-10x4 img, .cover-img-5x4l img, .cover-img-5x4r img {
width: 100%;
height: 100%;
object-fit: cover;
}
.capt {
position: absolute;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(256,256,256,0.5);
padding: 0 1rem;
z-index: 200;
}
.capt p {
line-height: 1.1;
font-size: 80%;
padding: 2px 0;
margin: 0;
}
.cover-overlay, z-100 {
z-index: 100;
}
@media (min-aspect-ratio: 100/99) {
.dragon-wrap {
height: calc(100vh - 84px);
width: calc((100vh - 84px) * 1.778);
margin-left: auto;
margin-right: auto;
overflow-x: hidden;
transform: translateX(20vw);
}
} /* /@media */
@media (max-aspect-ratio: 99/100) and (max-width: 991px) {
.dragon-wrap { margin-top: 33vh; }
} /* /@media */
@media (max-aspect-ratio: 99/100) and (min-width: 992px) {
.dragon-wrap { margin-top: 27vh; }
} /* /@media */
@media (max-aspect-ratio: 99/100) and (max-width: 575px) {
.dragon {
margin-left: -15vw;
margin-right: -15vw; }
} /* /@media */
/* Column heights with fixed proportions */
.square-col > .col-md-6 { height: 50vw; }
.col-5x4 > .col-md-6 { min-height: 40vw; }
.col-16x9 > .col-md-5, .col-16x9 > .col-md-6, .col-16x9 > .col-md-7 { min-height: 28.125vw; }
/* Single Column Widths */
@media ( max-width: 767px) {
.col-5x4 > .col-md-6.fix-ratio-txt { height: auto; }
.col-16x9 > .col-md-5, .col-16x9 > .col-md-6, .col-16x9 > .col-md-7 { min-height: 56.25vw; }
.col-5x4 > .col-md-6.case-img { height: 80vw; }
.col-16x9 > .col-md-5, .col-16x9 > .col-md-6, .col-16x9 > .col-md-7 { min-height: 56.25vw; }
} /* /@media */
.splash-overlay {
z-index: 100;
text-shadow: 2px 2px 2px #000000;
}
.splash-nav {
position: absolute;
display: block;
text-align: center;
z-index: 999;
}
/* ANDREA'S ARROW */
.splash-nav a {
text-transform: uppercase;
color: #000000;
font-size: 1rem;
line-height: 1;
padding-bottom: 3rem;
position: relative;
background-image: none;
}
.splash-nav a:hover {
text-decoration: none;
}
.splash-nav a:after {
position: absolute;
display: block;
content: " ";
bottom: 0;
left: calc(50% - 30px);
width: 60px;
height: 40px;
background: transparent url(../img/arrow-sml-blk_60x40.svg) no-repeat center bottom;
background-size: 45px 30px;
}
.negative .splash-nav a { color: #ffffff; }
.negative .splash-nav a:after {
background: transparent url(../img/arrow-sml-wht_60x40.svg) no-repeat center bottom;
}
.splash-down {
bottom: 4rem;
left: 35vw;
width: 30vw;
}
.img-wrap, figure {
overflow: hidden;
}
.img-wrap > img, .img-wrap img, figure > img /* , .img-wrap > picture, */ {
width: 100%;
height: auto;
}
/* TAKEN FROM NEW EVC STANDARDS */
.img-wrap {
display: block;
position: relative;
width: 100%;
}
/* .img-wrap > img {
width: 100%;
height: auto;
}
*/
/* fixed aspect ratio img */
.img-wrap.square {
padding-bottom: 100%;
overflow: hidden;
}
.img-wrap.rat-16x9 {
padding-bottom: 56.25%;
overflow: hidden;
}
.img-wrap.rat-8x3 {
padding-bottom: 37.5%;
overflow: hidden;
}
.img-wrap.square img, .img-wrap.rat-16x9 img, .img-wrap.rat-8x3 img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
background-color: #dddddd;
border: none;
}
figcaption {
font-size: 80%;
font-weight: 400;
padding-left: 30px;
margin-top: 0.5rem;
margin-bottom: 2rem;
background: transparent url(../img/h-line_6x6.png) no-repeat left center;
background-size: 20px 6px;
}
span.contact-box {
display: block;
}
span.contact-box a {
margin-right: 2rem;
}
.pak-title span {
line-height: 1.2;
}
/* CUSTOM COLUMNs ------------------------------ */
/* Get rid of big margins */
@media (min-width: 576px) and (max-width: 767px) {
.container {
max-width: 100%;
}
}
.col-xxl-8 {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
@media (min-width: 1420px) {
.col-xxl {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
min-width: 0;
max-width: 100%;
}
.row-cols-xxl-1 > * {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.row-cols-xxl-2 > * {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.row-cols-xxl-3 > * {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.row-cols-xxl-4 > * {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.row-cols-xxl-5 > * {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
.row-cols-xxl-6 > * {
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-xxl-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
max-width: 100%;
}
.col-xxl-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.col-xxl-4 {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-xxl-5 {
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-xxl-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.col-xxl-7 {
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-xxl-8 {
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.offset-xxl-1 {
margin-left: 8.333333%;
}
.offset-xxl-2 {
margin-left: 16.666667%;
}
.offset-xxl-3 {
margin-left: 25%;
}
}
/* Create class for reducing number of columns incrementally by vw */
/* ADDING THE .cut CLASS WILL REMOVE ORPHANS */
.col-lg-4321, .col-md-4321 {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
/* Create a variable to hold the square height */
:root { --squareHeight: 33; } /* Less than 468 we create an oblong */
@media (min-width: 468px) {
.col-lg-4321, .col-md-4321 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
:root { --squareHeight: 50; }
} /* /@media */
/* was 720 */
@media (min-width: 860px) {
.col-lg-4321, .col-md-4321 {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
:root { --squareHeight: 33.333333; }
} /* /@media */
/*
@media (min-width: 720px) and (max-width: 1079px) {
.col-lg-4321:nth-child(4), .col-md-4321:nth-child(4) {
display: none;
}
} */
/* /@media */
@media (min-width: 1200px) {
.col-lg-4321, .col-md-4321 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
:root { --squareHeight: 25; }
} /* /@media */
@media (min-width: 1900px) {
.col-lg-4321, .col-md-4321 {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
:root { --squareHeight: 20; }
} /* /@media */
@media (min-width: 860px) and (max-width: 1199px) { .col-md-4321.cut:nth-child(4) { display: none; } } /* /@media */
@media (min-width: 468px) and (max-width: 1899px) { .col-md-4321.cut:nth-child(5) { display: none; } } /* /@media */
/* THE COLUMN OPTIONS CLASS USES THE FOLLOWING BREAK POINTS
@media (min-width: 640px) 50%
@media (min-width: 968px) 33%
@media (min-width: 1280px) 25%;
@media (min-width: 1900px) 20%;
*/
/* COLOURED VINYL OPTIONS */
/* PLAYBACK COLS -------- */
.col-lg-321, .col-md-321 {
position: relative;
width: 100%;
padding-right: 0;
padding-left: 0;
}
@media (min-width: 520px) {
.col-lg-321, .col-md-321 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
} /* /@media */
@media (min-width: 720px) {
.col-lg-321, .col-md-321 {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
} /* /@media */
/* CUSTOM PADDING ---------------------------------------------
/* ORIGINAL VALUES AS PER LARGE */
/*
.pad-xs { padding: 10px; }
.pad-sm { padding: 20px; }
.pad-md { padding: 40px; }
.pad-lg { padding: 60px; }
.pad-00smsmsm { padding: 0 20px 20px 20px ; }
.pad-00sm { padding: 0 20px; }
.pad-sm00 { padding: 20px 0; }
.pad-smmd { padding: 20px 40px ; }
.pad-smlgsmmd { padding: 20px 60px 20px 40px ; }
.pad-smlg { padding: 20px 30px; }
.pad-t-xs { padding-top: 8px; }
.pad-r-xs { padding-right: 8px; }
.pad-b-xs { padding-bottom: 8px; }
.pad-l-xs { padding-left: 8px; }
.pad-t-sm { padding-top: 20px; }
.pad-r-sm { padding-right: 20px; }
.pad-b-sm { padding-bottom: 20px; }
.pad-l-sm { padding-left: 20px; }
.pad-t-md { padding-top: 40px; }
.pad-r-md { padding-right: 40px; }
.pad-b-md { padding-bottom: 40px; }
.pad-l-md { padding-left: 40px; }
.pad-t-lg { padding-top: 60px; }
.pad-r-lg { padding-right: 30px; }
.pad-b-lg { padding-bottom: 60px; }
.pad-l-lg { padding-left: 30px; }
.pad-t-xl { padding-top: 80px; }
*/
/* SET A UNIVERSAL PADDING FOR SMALL SCREENS */
.pad-xs, .pad-sm, .pad-md, .pad-lg { padding: 20px; }
.pad-00smsmsm, .pad-00sm, .pad-sm00, .pad-smmd, .pad-smlgsmmd, .pad-smlg, .pad-mdlg, .pad-smxl { padding: 20px; }
.pad-t-xs, .pad-t-sm, .pad-t-md, .pad-t-lg { padding-top: 20px; }
.pad-r-xs, .pad-r-sm, .pad-r-md, .pad-r-lg { padding-right: 20px; }
.pad-b-xs, .pad-b-sm, .pad-b-md, .pad-b-lg { padding-bottom: 20px; }
.pad-l-xs, .pad-l-sm, .pad-l-md, .pad-l-lg { padding-left: 20px; }
.pad-t-xl { padding-top: 40px; }
:root {
--padUnit: 20px;
}
@media (min-width: 576px) {
.pad-xs, .pad-sm, .pad-md, .pad-lg { padding: 30px; }
.pad-00smsmsm, .pad-00sm, .pad-sm00, .pad-smmd, .pad-smlgsmmd, .pad-smlg, .pad-mdlg, .pad-smxl { padding: 30px; }
.pad-t-xs, .pad-t-sm, .pad-t-md, .pad-t-lg { padding-top: 30px; }
.pad-r-xs, .pad-r-sm, .pad-r-md, .pad-r-lg { padding-right: 30px; }
.pad-b-xs, .pad-b-sm, .pad-b-md, .pad-b-lg { padding-bottom: 30px; }
.pad-l-xs, .pad-l-sm, .pad-l-md, .pad-l-lg { padding-left: 30px; }
.pad-t-xl { padding-top: 60px; }
:root {
--padUnit: 30px;
}
}/* /@media */
@media (min-width: 768px) {
.pad-nav { padding-top: 84px; }
.pad-xs { padding: 15px; }
.pad-sm { padding: 30px; }
.pad-md { padding: 60px; }
.pad-lg { padding: 90px; }
.pad-00smsmsm { padding: 0 30px 30px 30px ; }
.pad-00sm { padding: 0 30px; }
.pad-sm00 { padding: 30px 0; }
.pad-smmd { padding: 30px 60px ; }
.pad-smlgsmmd { padding: 30px 90px 30px 60px ; }
.pad-smlg { padding: 30px 90px; }
.pad-mdlg { padding: 60px 90px; }
.pad-smxl { padding: 30px 120px; }
.pad-t-xs { padding-top: 15px; }
.pad-r-xs { padding-right: 15px; }
.pad-b-xs { padding-bottom: 15px; }
.pad-l-xs { padding-left: 15px; }
.pad-t3, .pad-t-sm { padding-top: 30px; }
.pad-r3, .pad-r-sm { padding-right: 30px; }
.pad-b3, .pad-b-sm { padding-bottom: 30px; }
.pad-l3, .pad-l-sm { padding-left: 30px; }
.pad-t-md { padding-top: 60px; }
.pad-r-md { padding-right: 60px; }
.pad-b-md { padding-bottom: 60px; }
.pad-l-md { padding-left: 60px; }
.pad-t-lg { padding-top: 90px; }
.pad-r-lg { padding-right: 90px; }
.pad-b-lg { padding-bottom: 90px; }
.pad-l-lg { padding-left: 90px; }
.pad-t-xl { padding-top: 120px; }
/* equal to pad-sm */
}/* /.@media */
/* padding relative to screen width above 960px */
@media (min-width: 840px) {
.pad-xs { padding: calc(3.5vw * 0.5625); }
.pad-sm { padding: calc(7vw * 0.5625); }
.pad-md { padding: calc(14vw * 0.5625); }
.pad-lg { padding: calc(21vw * 0.5625); }
.pad-00smsmsm { padding: 0 calc(7vw * 0.5625) calc(7vw * 0.5625) calc(7vw * 0.5625); }
.pad-00sm { padding: 0 calc(7vw * 0.5625); }
.pad-sm00 { padding: calc(7vw * 0.5625) 0; }
.pad-smmd { padding: calc(7vw * 0.5625) calc(14vw * 0.5625); }
.pad-smlgsmmd { padding: calc(7vw * 0.5625) calc(21vw * 0.5625) calc(7vw * 0.5625) calc(14vw * 0.5625); }
.pad-smlg { padding: calc(7vw * 0.5625) calc(21vw * 0.5625); }
.pad-mdlg { padding: calc(14vw * 0.5625) calc(21vw * 0.5625); }
.pad-smxl { padding: calc(7vw * 0.5625) calc(28vw * 0.5625); }
.pad-t-xs { padding-top: calc(3.5vw * 0.5625); }
.pad-r-xs { padding-right: calc(3.5vw * 0.5625); }
.pad-b-xs { padding-bottom: calc(3.5vw * 0.5625); }
.pad-l-xs { padding-left: calc(3.5vw * 0.5625); }
.pad-t-sm { padding-top: calc(7vw * 0.5625); }
.pad-r-sm { padding-right: calc(7vw * 0.5625); }
.pad-b-sm { padding-bottom: calc(7vw * 0.5625); }
.pad-l-sm { padding-left: calc(7vw * 0.5625); }
.pad-t-md { padding-top: calc(14vw * 0.5625); }
.pad-r-md { padding-right: calc(14vw * 0.5625); }
.pad-b-md { padding-bottom: calc(14vw * 0.5625); }
.pad-l-md { padding-left: calc(14vw * 0.5625); }
.pad-t-lg { padding-top: calc(21vw * 0.5625); }
.pad-r-lg { padding-right: calc(21vw * 0.5625); }
.pad-b-lg { padding-bottom: calc(21vw * 0.5625); }
.pad-l-lg { padding-left: calc(21vw * 0.5625); }
.pad-t-xl { padding-top: calc(28vw * 0.5625); }
/* equal to pad-sm */
:root {
--padUnit: calc(7vw * 0.5625);
}
}/* /.@media */
/* HOME
-------------------------------------------------------------------------- */
.home-top-col {
padding-top: 17vh;
/* position: relative;
padding-right: 15px;
padding-left: 15px;
width: 75%;
margin-left: 8.333333%;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75% */
}
h1.h4-line {
display: inline-block;
position: relative;
color: #858585;
font-weight: 700;
letter-spacing: 0.1em;
line-height: 1.1;
font-size: 0.9rem;
z-index: 100;
margin-bottom: 3rem;
text-transform: uppercase;
background: transparent url(../img/h-line_6x6.png) no-repeat left center;
background-size: 60px 6px;
padding-left: 75px;
/* text-indent: 15px; */
}
span.xtra-space {
word-spacing: 1em;
}
@media (min-width: 768px) and (max-width: 1300px) { span.xtra-space {display: block; width: 100%;} }
@media (max-width: 900px) { h1.h4-line {margin-bottom: 2rem;} }
@media (max-width: 767px) { h1.h4-line {margin-bottom: 1.2rem;} }
@media (max-width: 575px) { h1.h4-line {background-image: none; padding-left: 0px;} }
.home-splash .display {
font-weight: 900;
font-size: 4.2rem;
line-height: 1;
position: relative;
z-index: 100;
letter-spacing: 0.05em;
color: #ffffff;
mix-blend-mode: difference;
margin-bottom: 6rem; /* to force centred row upwards */
}
@media (min-width: 1200px) {.home-splash .display { font-size: 6vw; } } /* /@media */
@media (max-width: 900px) {.home-splash .display { font-size: 3.6rem; } } /* /@media */
@media (max-width: 767px) {.home-splash .display { font-size: 2.8rem; } } /* /@media */
@media (orientation: portrait) and (min-width: 576px) {
.home-splash .display { font-size: 8vw; }
} /* /@media */
/* Splash Area in Head ------------- */
/* Features ------------- */
/* Rings for Features
.ring {
position: relative;
display: inline-block;
width: 25vw;
height: 25vw;
overflow: hidden;
}
.ring > img {
border-radius: 50%;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.ring > img.vector {
z-index: 50;
}
.ring.vinyl-ring > img.vector { transform: rotate(315deg); }
.ring.cd-ring > img.vector { transform: rotate(45deg); }
.ring.bd-ring > img.vector { transform: rotate(225deg); }
*/
.half-ring {
position: relative;
display: inline-block;
height: 25vw;
}
.half-ring > img.raster {
height: 100%;
width: auto;
position: relative;
display: inline-block;
}
.half-ring > img.vector {
height: 100%;
width: 50%;
position: absolute;
top: 0;
left: 100%;
z-index: 50;
}
.bespoke-ring > .vector {
transform: rotate(180deg);
}
/* .half-ring.mc-ring > img.vector { transform: rotate(315deg); } */
/* ODD black BG - EVEN wht BG */
.feature:nth-of-type(odd) {
color: #ffffff;
background-color: #000000;
}
.feature:nth-of-type(even) {
color: #000000;
background-color: #ffffff;
}
.feature .col-md-5 {
text-align: center;
}
.feature h2.display {
font-size: 3rem;
margin-top: 3rem;
margin-bottom: 1.5rem;
}
a.tmm {
font-style: italic;
font-size: 1.25rem;
}
/* Special Feature */
.feature.special {
background-image: url(../assets/playback-cover_3600x2025.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
height: 40%;
}
.feature .btn { margin-top: 2vw; }
.feature:nth-of-type(odd) .btn, .feature:nth-of-type(odd) .btn:visited {
color: #ffffff;
background-color: #000000;
border: 1px solid #ffffff;
}
.feature:nth-of-type(odd) .btn:hover, .feature:nth-of-type(odd) .btn:focus, .feature:nth-of-type(odd) .btn:active {
color: #000000;
background-color: #ffffff;
}
.img-square {
display: block;
width: 100%;
}
.img-square > img {
width: 100%;
height: auto;
}
/* FINAL HOME OVERIDE */
.ring-grnd {
background-color: #000000;
/*background: #000000 url(/site/templates/img/key-ring-wht-crop_104x104.svg) repeat center 4vw;
background-size: 24vw 24vw;*/
}
.ring-spacer {
display: block;
width: 50%;
height: 10vw;
}
.home-splash {
overflow-x: hidden;
overflow: hidden;
}
/* RINGS FOR SPLASH AREA OF HOME PAGE
------------------------------------------------- */
.splash-ring-box {
position: absolute;
} /* IS THIS USED ???? */
#hometext-1 {
transform: translateX(99vw);
animation-name: hardright;
animation-duration: 0.5s;
animation-timing-function: ease-in;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
@keyframes hardright {
from { transform: translateX(99vw); }
to { transform: translateX(0); }
}
.splash-ring-box.tr {
right: -15vw;
top: -46vh;
width: 44vw;
height: 45vw;
}
.splash-ring-box.bl {
left: -12vw;
top: 60vh;
width: 45vw;
height: 45vw;
}
.splash-ring {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.splash-ring > img {
border-radius: 22vw;
width: 44vw;
height: 44vw;
position: absolute;
}
.tr .splash-ring > img {
bottom: 0;
left: 0;
}
.tr .splash-ring > img.vector {
z-index: 50;
}
.bl .splash-ring > img {
top: 0;
right: 0;
}
.bl .splash-ring > img.vector {
z-index: 50;
transform: rotate(180deg);
}
.splash-ring > .empty-ring {
display: block;
border-radius: 22vw;
width: 44vw;
height: 44vw;
position: absolute;
background-color: transparent;
border: 1vw solid #ffffff;
border-width: calc(0.096 * 44vw);
}
/* HOME PAGE SPLASH LAYOUT FOR PORTRAIT */
@media (orientation: portrait) {
.splash-ring-box.tr {
right: -10vw;
top: -33vh;
width: 60vw;
height: 60vw;
}
.splash-ring-box.bl {
left: -12vw;
top: 70vh;
width: 60vw;
height: 60vw;
}
.splash-ring > .empty-ring {
display: block;
border-radius: 30vw;
width: 60vw;
height: 60vw;
position: absolute;
background-color: transparent;
border: 1vw solid #ffffff;
border-width: calc(0.096 * 60vw);
}
.col-md-9.home-top-col {
padding-top: 25vh;
-ms-flex: 0 0 85%;
flex: 0 0 85%;
max-width: 85%;
/* margin-left: 8.33333%; */
}
} /* /@media */
@media (orientation: portrait) and (max-width: 576px) {
.col-md-9.home-top-col {
padding-top: 22vh;
-ms-flex: 0 0 95%;
flex: 0 0 95%;
max-width: 95%;
/* margin-left: 15px; */
}
.splash-ring-box.tr {
right: -10vw;
top: -23vh;
width: 60vw;
height: 60vw;
}} /* /@media */
@media (max-aspect-ratio: 5/9) and (max-width: 576px) {
.splash-ring-box.tr {
top: -13vh;
}}
/* The Years */
.years-wrap {
position: absolute;
display: block;
width: 90%;
height: 50%;
bottom: 0;
right: 0;
font-size: 4vw;
color: #ffffff;
}
.years-wrap:after {
position: absolute;
font-size: 5vh;
font-weight: 700;
color: #ffffff;
content: "1990";
right: 7vw;
bottom: 1vh;
mix-blend-mode: difference;
animation-name: thirtyears;
animation-duration: 6s;
animation-timing-function: linear;
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
@keyframes thirtyears {
1% { content: "1990"; }
2% { content: "1991"; }
4% { content: "1992"; }
6% { content: "1993"; }
8% { content: "1994"; }
10% { content: "1995"; }
12% { content: "1996"; }
14% { content: "1997"; }
16% { content: "1998"; }
18% { content: "1999"; }
20% { content: "2000"; }
22% { content: "2001"; } 24% { content: "2002"; } 26% { content: "2003"; } 28% { content: "2004"; } 30% { content: "2005"; } 32% { content: "2006"; }
34% { content: "2007"; } 36% { content: "2008"; } 38% { content: "2009"; } 40% { content: "2010"; } 42% { content: "2011"; }
44% { content: "2012"; } 46% { content: "2013"; } 48% { content: "2014"; } 50% { content: "2015"; } 52% { content: "2016"; }
54% { content: "2017"; } 56% { content: "2018"; } 58% { content: "2019"; } 60% { content: "2020"; } 62% { content: "2021"; } 64% { content: "2022"; } 66% { content: "2023"; } 68% { content: "2023"; } 72% { content: "2025"; }
73% { content: "3"; } 74% { content: "35"; } 75% { content: "35"; } 76% { content: "35 "; } 77% { content: "35 Y"; } 78% { content: "35 Ye"; } 79% { content: "35 Yea"; } 80% { content: "35 Year"; } 81% { content: "35 Years"; } 100% { content: "35 Years"; }
}
/*
.feature:nth-child(odd) {
color: #ffffff;
background-color: #000000;
}
*/
/* Flip the order */
@media (min-width: 768px) {
.feature:nth-child(even) .feat-txt {
-ms-flex-order: 2;
order: 2;
}}
.ring-frame {
position: relative;
display: block;
width: 100%;
padding-top: 80%; /* 5x4 ratrio image */
height: 0;
overflow: hidden;
}
@media (min-width: 768px) and (max-width: 1080px) {
.ring-frame {
padding-top: 0%; /* 5x4 ratrio image */
height: 100%;
}} /* /@media */
@media (max-width: 767px) {
.ring-frame {
padding-top: 45%; /* 5x4 ratrio image */
height: 0;
}} /* /@media */
.ring-frame img, .ring-frame > picture {
position: absolute;
display: block;
top: 0; right: 0; bottom: 0; left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ring-frame > div {
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
.feature:nth-child(odd) .ring-frame:after {
content: "";
position: absolute;
display: block;
top: 0; right: 0; bottom: 0; left: 0;
background: transparent url(/site/templates/img/demi-ring-wht_122x240.svg) no-repeat -2px center;
background-size: auto 150%;
background-position: left 70%;
}
.feature:nth-child(even) .ring-frame:after {
content: "";
position: absolute;
display: block;
top: 0; right: 0; bottom: 0; left: 0;
background: transparent url(/site/templates/img/demi-ring-blk_122x240.svg) no-repeat right center;
background-size: auto 150%;
background-position: right 30%;
}
/* Reverse Out arrow buttons */
/* Negative for reverse out */
.feature:nth-child(odd) .arrw { color: #ffffff; }
.feature:nth-child(odd) .arrw::before, .feature:nth-child(odd) .arrw::after { background: transparent url(../img/arrow-dre-wht_24x16.svg) no-repeat right center; background-size: 12px 8px; }
.feature:nth-child(odd) .under { background-color: #ffffff; }
.feature:nth-child(odd) .under::before { background-color: #000000; }
@media (min-width: 1200px) { .feature:nth-child(odd) .arrw::before, .feature:nth-child(odd) .arrw::after { background-size: 18px 12px;} }
@media (max-width: 767px) {
.feature:nth-child(odd) .feat-img { border-left: solid 16px #000000; }
.feature:nth-child(even) .feat-img { border-right: solid 16px #ffffff; }
}
/* VIDEO JS */
.vjs-fluid {
padding-top: 100vh !important;
}
.vjs-fluid video {
object-fit: cover;
}
.cover-video {
position: absolute;
display: block;
top: 0; right: 0; bottom: 0; left: 0;
background-color: transparent;
}
.home-video-wrap { opacity: 0; }
.home-video-wrap.play { opacity: 1; }
.video-bg {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* EDITS FOR BESPOKE PACKAGING VIDEO */
.cover-video video {
object-fit: cover;
}
.home-splash .display.d3 {
color: #fff;
mix-blend-mode: normal;
text-shadow: 4px 4px 10px rgba(0,0,0,1);
}
.addtext {
display: block;
position: relative;
font-size: 2vw;
margin-bottom: 0.5vw;
color: #fff;
text-shadow: 2px 2px 5px rgba(0,0,0,1);
z-index: 100;
}
/* EDITS FOR AIM INDORESMENT */
/* replace BS col-md-9 and offset-md-9 with styles for .home-col for greater flexibility */
.home-col {
position: relative;
padding-right: 15px;
padding-left: 15px;
width: 75%;
margin-left: 8.333333%; /* offset 1 */
-ms-flex: 0 0 83.333333%; /* col-9 */
flex: 0 0 83.333333%;
max-width: 83.333333%;
padding-top: 17vh;
}
.home-splash .display-aim {
font-weight: 900;
font-size: 5vw; /* was 4.2 */
line-height: 1;
margin-bottom: 0px;
position: relative;
z-index: 100;
letter-spacing: 0.05em;
color: #ffffff;
mix-blend-mode: normal;
text-shadow: 4px 4px 10px rgba(0,0,0,1);
}
.aim-attribution {
position: relative;
display: inline-block;
color:#fff;
font-size: 1.6vw;
margin-top: 1vw;
text-shadow: 2px 2px 5px rgba(0,0,0,1);
z-index: 100;
/* margin-bottom: 6rem; to force centred row upwards */
}
@media (min-width: 1200px) {
.home-col {
-ms-flex: 0 0 75%; /* col-9 */
flex: 0 0 75%;
max-width: 75%;
}
} /* /@media was 6vw */
@media (max-width: 900px) {
.home-splash .display-aim { font-size: 5vw; }
} /* /@media */
@media (max-width: 767px) {
.home-splash .display-aim { font-size: 5vw; }
} /* /@media */
/* .pad-sm = calc(7vw * 0.5625) = 4% */
@media (orientation: portrait) and (max-width: 575px) {
.home-splash .display-aim {
font-size: 10vw;
margin-top: 5vh;
}
.home-col {
-ms-flex: 0 0 100%; /* col-9 */
flex: 0 0 100%;
max-width: 100%;
padding-left: 20px;
padding-right: 20px;
margin-left: 0px;
}
.aim-attribution {
font-size: 4vw;
margin-top: 3vw;
}
.years-wrap:after {
right: 20px;
}
} /* /@media */
@media (orientation: portrait) and (min-width: 576px) {
.home-splash .display-aim { font-size: 10vw; }
.home-col {
-ms-flex: 0 0 92%; /* col-9 */
flex: 0 0 92%;
max-width: 92%;
margin-left: 4%;
}
.aim-attribution {
font-size: 2.8vw;
margin-top: 1.4vw;
}
.years-wrap:after {
right: 4vw;
}
} /* /@media */
/* SUSTAINABILITY PAGE
----------------------------------------------------------------------------------------- */
/* body.sustainable {
padding-top: 0px;
} Now placed in new sustainability section */
.sustain-splash {
/* margin-top: var(--navbar-height); */
position: relative;
overflow: hidden;
}
.chart-wrap {
position: relative;
}
.chart-wrap .year {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
text-align: center;
font-weight: 700;
font-size: 2rem;
padding-top: calc(50% - 1rem);
}
.emissions-table {
font-size: 1rem;
line-height: 1.2rem;
border-collapse: separate;
border-spacing: 0.6rem;
}
.emissions-table td, .emissions-table thead th {
padding: 0.4rem;
vertical-align: middle;
border: none;
border-color: #ffffff;
}
.emissions-table tr {
text-align: center;
}
@media (max-width: 500px) {
.chart-wrap .year {
font-size: 1.4rem;
padding-top: calc(50% - 0.7rem);
}
.emissions-table {
font-size: 0.8rem;
line-height: 1rem;
border-spacing: 0.3rem;
}
.emissions-table td, .emissions-table th {
padding: 0.2rem;
}} /* /@media */
.emissions-table tr:nth-child(1) { color: rgba(45, 163, 219, 1); }
.emissions-table tr:nth-child(2) { color: rgba(90, 177, 99, 1); }
.emissions-table tr:nth-child(3) { color: rgba(225, 187, 32, 1); }
.emissions-table tr:nth-child(4) { color: rgba(233, 38, 94, 1); }
.emissions-table tr:nth-child(5) { color: rgba(236, 92, 34, 1); }
.emissions-table tr:nth-child(6) { color: rgba(0, 119, 219, 1); }
.emissions-table tr:nth-child(7) { color: rgba(128, 72, 127, 1); }
.emissions-table tr:nth-child(1) td:nth-child(1), .emissions-table tr:nth-child(1) td:nth-child(3) { background-color: rgba(45, 163, 219, 1); }
.emissions-table tr:nth-child(2) td:nth-child(1), .emissions-table tr:nth-child(2) td:nth-child(3) { background-color: rgba(90, 177, 99, 1); }
.emissions-table tr:nth-child(3) td:nth-child(1), .emissions-table tr:nth-child(3) td:nth-child(3) { background-color: rgba(225, 187, 32, 1); }
.emissions-table tr:nth-child(4) td:nth-child(1), .emissions-table tr:nth-child(4) td:nth-child(3) { background-color: rgba(233, 38, 94, 1); }
.emissions-table tr:nth-child(5) td:nth-child(1), .emissions-table tr:nth-child(5) td:nth-child(3) { background-color: rgba(236, 92, 34, 1); }
.emissions-table tr:nth-child(6) td:nth-child(1), .emissions-table tr:nth-child(6) td:nth-child(3) { background-color: rgba(0, 119, 219, 1); }
.emissions-table tr:nth-child(7) td:nth-child(1), .emissions-table tr:nth-child(7) td:nth-child(3) { background-color: rgba(128, 72, 127, 1); }
.emissions-table tr td:nth-child(1), .emissions-table tr td:nth-child(3) { border-radius: 3rem;}
.emissions-table tr td:nth-child(1), .emissions-table tr td:nth-child(3) { color: #ffffff; }
.emissions-table td:nth-child(2) { font-weight: 700; }
.emissions-table tr:nth-child(8) { color: #000000; }
.emissions-table thead th, .emissions-table tfoot td { color: #000000; }
.emissions-table tfoot tr:nth-child(1) td:nth-child(1), .emissions-table tfoot tr:nth-child(1) td:nth-child(3) { color: #000000; font-weight: 700; background-color: #ffffff; }
@-webkit-keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.ticker-row {
background-color: #000000;
position: relative;
height: 6.5vw;
padding: 0 1vw;
overflow: hidden;
}
.ticker-wrap {
position: absolute;
top: 0;
width: 100%;
overflow: hidden;
height: 6.5vw;
padding-left: 100%;
box-sizing: content-box;
}
.ticker {
display: inline-block;
height: 6.5vw;
line-height: 6.5vw;
white-space: nowrap;
padding-right: 100%;
box-sizing: content-box;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: ticker;
animation-name: ticker;
-webkit-animation-duration: 15s;
animation-duration: 15s;
}
.ticker-item {
display: inline-block;
padding: 1.7vw 3vw 0 3vw;
font-weight: 900;
text-transform: uppercase;
font-size: 3.7vw;
color: #ffffff;
line-height: 1;
text-shadow: 0.2vw 0.2vw 0 rgba(0,0,0,1);
}
@media (max-aspect-ratio: 9/10) {
.ticker-row, .ticker-wrap { height: 13vw; }
.ticker {
height: 13vw;
line-height: 13vw;
}
.ticker-item {
padding: 3.2vw 5vw 0 5vw;
font-size: 7.4vw;
}}
/* Edit pills to look like other buttons - Used in products */
.nav-pills.sus-btn .nav-item {
width: 50%;
}
.nav-pills.sus-btn .nav-item > .nav-link {
color: #000000;
font-size: 1rem;
line-height: 1.2;
border: none;
border-radius: 0;
display: block;
position: relative;
padding: 1.9rem 1.4rem 1.4rem 0;
text-align: left;
/* background: #ffffff url(../assets/sus-plastic.jpg) no-repeat left top; */
background-repeat: no-repeat;
background-size: cover;
}
/*. ORIGINAL STYLES
#what-we-0 { background-image: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%), url(../assets/sus-plastic.jpg); background-position: 0 1.2rem, 0 0; }
#what-we-1 { background-image: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%), url(../assets/sus-paper.jpg); background-position: 0 1.2rem, 0 0; }
#what-we-2 { background-image: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%), url(../assets/sus-shrink.jpg); background-position: 0 1.2rem, 0 0; }
#what-we-3 { background-image: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%), url(../assets/sus-emissions.jpg); background-position: 0 1.2rem, 0 0; }
#what-you-0 { background-image: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%), url(../assets/sus-vinyl-mix.jpg); background-position: 0 1.2rem, 0 0; }
#what-you-1 { background-image: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%), url(../assets/sus-slimline.jpg) ; background-position: 0 1.2rem, 0 0; }
#what-you-2 { background-image: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%), url(../assets/sus-card.jpg); background-position: 0 1.2rem, 0 0; }
#what-you-3 { background-image: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%), url(../assets/sus-forklift.jpg); background-position: 0 1.2rem, 0 0; }
#what-you-0:before {
content: " ";
position: absolute;
display: block;
height: 1.2rem;
width: 100%;
top: 0px;
left: 0px;
background: #ffffff url("/site/assets/files/13131/c-level.jpg") no-repeat center center;
background-size: cover;
}
img.nav-strip { display: none; }
*/
/* ALTERNATIVE APPROACH USING IMAGE IN THE HTML */
.nav-strip {
position: absolute;
display: block;
height: 1.2rem;
width: 100%;
top: 0px;
left: 0px;
overflow: hidden;
object-fit: cover;
}
.nav-pills.sus-btn .nav-link span { position: relative; }
.nav-pills.sus-btn .nav-link span:after {
content: " ";
position: absolute;
display: block;
width: 1.2rem;
height: 1.2rem;
top: 0;
right: -1.2rem;
background: transparent url(../img/arrow-dre-blk_24x16.svg) no-repeat right center;
background-size: 12px 8px;
/*transform: translate(0%, 0%); */
will-change: transform, opacity;
}
/*
.nav-pills.sus-btn .nav-link:before {
content: "";
display: block;
position: absolute;
bottom: 3rem;
left: 0;
width: 100%;
height: 1.2rem;
background: transparent url(../assets/sus-plastic.jpg) no-repeat center center;
background-size: cover;
}
*/
.nav-pills.sus-btn .nav-link.active {
background-color: #ffffff;
}
.nav-pills.sus-btn .show > .nav-link {
background-color: transparent;
}
.sus-btn { margin-top: 3rem; }
.img-wrap-sus {
display: block;
position: relative;
width: 100%;
}
.img-wrap-sus img {
display: block;
position: relative;
width: 100%;
height: auto;
}
@media (max-width: 768px) { .img-wrap-sus { display: none; } }
@media (min-width: 992px) {
.nav-pills.sus-btn .nav-item {
width: 25%;
}
/* .nav-pills.sus-btn .nav-link:before {
bottom: 2.2rem;
} */
.nav-pills.sus-btn .nav-item > .nav-link {
padding-bottom: 0.7rem;
}
}
@media (min-width: 1200px) {
.nav-pills.sus-btn .nav-item > .nav-link {
font-size: 1.25rem;
line-height: 1.5;
padding: 1.6rem 2rem 1rem 0;
}
/* .nav-pills.sus-btn .nav-link:before {
content: "";
display: block;
position: absolute;
bottom: 3.5rem;
height: 1.5rem;
}*/
}/* /@media */
/* HISTORY PAGE
----------------------------------------------------------------------------------------- */
.history-splash {
background: #ffffff url(../assets/karen-history-2400x2400.jpg) no-repeat right center;
background-size: 100vw auto;
min-height: calc(100vh - var(--navbar-height));
height: auto;
}
@media (max-aspect-ratio: 1/1) {
.history-splash {
/* background: #ffffff url(../assets/karen-history-768x1648.jpg) no-repeat right center; */
background-size: auto 100%;
}}
@media (max-width: 767px) and (max-aspect-ratio: 1/1) {
.history-splash {
background: #ffffff url(../assets/karen-history-768x1648.jpg) no-repeat center center;
}}
@media (max-width: 575px) and (max-height: 767px) and (max-aspect-ratio: 1/1) {
.history-splash {
background: #ffffff url(../assets/karen-no-history.jpg) no-repeat center center;
background-size: cover;
}}
.awards { margin-top: 2rem;}
.awards p { font-size: 1rem;}
/*
@media (max-aspect-ratio: 8/5) and (orientation: landscape) {
.history-splash { background-position: right -5vw top 0px; }
}
@media (max-aspect-ratio: 7/5) and (orientation: landscape) {
.history-splash { background-position: right -10vw top 0px; }
}
@media (max-aspect-ratio: 6/5) and (orientation: landscape) {
.history-splash { background-position: right -20vw top 0px; }
}
@media (orientation: portrait) {
.history-splash {
background-position: right -10vw bottom -10vh;
background-size: auto 84%;
}
}
@media (max-aspect-ratio: 16/9) and (orientation: portrait) {
.history-splash {
background-position: left -10vw bottom -10vh;
background-size: 110vw auto;
}
}
*/
span.number-ring {
display: inline-block;
text-align: center;
letter-spacing: normal;
border: solid 0.4rem #000000;
font-weight: 900;
line-height: 1;
border-radius: 50%;
font-size: 2rem;
padding-top: 0.9rem;
height: 4rem;
width: 4rem;
margin-bottom: 1rem;
}
body {
--vwunit: 0.9vw;
}
span.number-ring {
border-width: calc(var(--vwunit) * 0.8);
font-size: calc(var(--vwunit) * 4);
padding-top: calc(var(--vwunit) * 1.7);
height: calc(var(--vwunit) * 8);
width: calc(var(--vwunit) * 8);
margin-bottom: calc(var(--vwunit) * 2);
}
.alternate:nth-child(1) span.number-ring::before { content: "1"; }
.alternate:nth-child(2) span.number-ring::before { content: "2"; }
.alternate:nth-child(3) span.number-ring::before { content: "3"; }
.alternate:nth-child(4) span.number-ring::before { content: "4"; }
.alternate:nth-child(5) span.number-ring::before { content: "5"; }
.alternate:nth-child(6) span.number-ring::before { content: "6"; }
.alternate:nth-child(even) span.number-ring { border-color: #ffffff; }
/* large screen */
@media (min-width: 768px) and (max-width: 991px) {
body {
--vwunit: 0.5vw;
}
} /* /@media */
/* See timeline at end of this doc */
/* PLAYBACK
--------------------------------------------------------------------------------------------------------------------------------- */
/* Index Page */
.pb-link {
padding-left: 0;
padding-right: 0;
margin-bottom: 3rem;
}
.pb-link a, .pb-link a:hover, .pb-link a:visited {
color: #ffffff;
text-decoration: none;
}
.pb-link img {
width: 100%;
height: auto;
transition: transform .2s; /* Animation */
}
.pb-link p {
font-size: 1.5rem;
font-weight: 700;
padding-right: 1.5rem;
}
pb-link img:hover {
transform: scale(1.2);
}
/* ARTICLES
--------------------------------------------------------------------------------------------------------------------------------- */
/* Index Page */
.art-link {
padding-left: 0;
padding-right: 0;
margin-bottom: 3rem;
}
.art-link a, .art-link a:hover, .art-link a:visited {
color: #ffffff;
text-decoration: none;
}
.art-link p {
padding-right: 1.5rem;
}
.art-grafik {
position: absolute;
display: block;
inset: 10px;
background-color: transparent;
background-position: center center;
background-size: cover;
}
.art-text {
display: flex;
position: absolute;
display: block;
inset: 0px;
background-color: transparent;
padding: 1rem;
font-size: 1.5rem;
line-height: 1.2;
font-weight: 900;
text-transform: uppercase;
text-align: center;
align-content: center;
}
.art-text > div {
display: inline-block;
color: #000000;
background-color: #ffffff;
padding-left: 0.25rem;
padding-right: 0.25rem;
margin-bottom: 0.25rem;
}
.art-wrap {
display: block;
position: relative;
width: 100%;
overflow: hidden;
}
.art-wrap img {
width: 100%;
height: auto;
transition: transform .2s; /* Animation */
}
.art-link:hover .art-wrap img {
transform: scale(1.2);
}
/* Post pages */
.pbp-cover {
background-color: #000000;
}
.pbp-cover > img {
opacity: 0.5;
}
.pbp-img {
max-width: 60vh;
display: inline-block;
}
.pbp-img > img {
width: 100%;
height: auto;
}
.pbp h3 {
color: var(--text-grey);
}
.pbp blockquote {
margin-bottom: 2rem;
}
.pbp blockquote p {
color: var(--text-grey);
font-style: italic;
font-size: 1.75rem;
font-weight: 700;
padding: 1rem 0 0.5rem 0;
line-height: 1.25;
margin-bottom: 0;
}
.pbp blockquote span {
line-height: 1;
padding-bottom: 1rem;
}
.blog-image-sm {
max-width: 50%;
float:right;
padding-left: 20px;
}
.blog-image-sm > img {
width: 100%;
height: auto;
max-width: 100%;
}
.blog-images {
max-width: 100%;
margin: 10px 0;
}
.blog-images > img {
width: 100%;
height: auto;
max-width: 100%;
}
.blog-carousel { margin: 20px 0; }
.blog-carousel > ol.carousel-indicators > li {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.blog-carousel > ol.carousel-indicators {
display: none;
}
.blog-wrap figcaption {
border-left: 4px solid #ebebeb;
margin: 5px 0 50px 0;
padding: 0px 16px;
}
.pagiwrap {
margin-top: 2rem;
text-align: center;
}
.pagiwrap > div {
display: inline-block;
margin-left: 1rem;
margin-right: 1rem;
}
/* PRESS RELEASES
--------------------------------------------------------------------------------------------------------------------------------- */
/* Press Page */
.press-date {
background-color: #fff;
color: #000;
padding: 0px 0px 0px 0.5rem;
margin-top: 1rem;
line-height: 1;
padding-top: 4px;
}
.press-link h4 {
margin-top: 1rem;
line-height: 1.1;
}
/* Press Release Page */
/* slight differenced to php-cover items. to be amalgamated. */
.pr-img {
height: calc(60vh - var(--navbar-height));
width: auto;
}
.pr-img > div {
height: 100%;
width: auto;
}
.pr-img > div > img {
height: 100%;
width: auto;
}
/* Based on figcaption L2039 */
.pr-caption {
font-size: 80%;
font-weight: 400;
padding-left: 30px;
margin-top: 0.5rem;
/* margin-bottom: 2rem; */
background: transparent url(../img/h-line_6x6.png) no-repeat left center;
background-size: auto;
background-size: 20px 6px;
}
.pr-bullets li {
color: #858585;
font-size: 200%;
font-weight: 700;
margin-bottom: 0.5rem;
}
/* TEAM PAGE
----------------------------------------------------------------------------------------- */
.team-member {
padding-top: 100px; /* offset for fixed menu */
}
.team-video-wrap { margin-bottom: 1rem; }
.team-video {
width: 100%;
overflow: hidden;
}
.team-video:hover { cursor: pointer; }
.team-img {
width: 100%;
height: auto;
}
@media (min-width: 992px) {
.team-video-wrap { padding-left: 4vw; }
} /* /@media */
@media (max-width: 991px) and ( min-aspect-ratio: 3/2 ) {
.team-video-wrap { max-width: calc((100vh - 150px) * 1.75); }
}
/* Positioned at top of page */
.off-canvas {
position: relative;
display: block;
z-index: 500;
width: 100%;
transition: width 2s, height 2s;
}
/* Positioned off-canvas with button */
.off-canvas.off {
position: fixed;
top: 100px;
right: 0;
width: 260px;
}
.off-canvas .off-menu {
color: #ffffff;
background-color: #000000;
}
.off-canvas.off .off-menu {
color: #ffffff;
background-color: #000000;
padding: 1rem;
/* border: 1px solid #ffffff;
border-right: none; */
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
transform: translateX(260px);
}
.off-canvas.off .off-menu.slip {
transform: translateX(0px);
}
.off-canvas .off-btn {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 100px;
text-align: right;
border: 1px solid #ffffff;
color: #000000;
background-color: #ffffff;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0;
transform-origin: 0% 0%;
transform: translate(-38px, 99px) rotate(270deg) ;
}
.off-canvas.off .off-btn { display: block; }
.off-menu .off-btn:before {
content: "Team";
padding-right: 0.5rem;
}
.off-menu.slip .off-btn:before { content: "Close"; }
.off-canvas .team-list { column-count: 3; }
.off-canvas.off .team-list { column-count: 2; }
.team-list a, .team-list a:visited, .team-list a:active {
color: #ffffff;
text-decoration: none;
font-size: 1rem;
line-height: 1.2rem;
}
.team-list a:hover {
padding-left: 1.2rem;
background: transparent url(../img/arrow-dre-wht_24x16.svg) no-repeat left center;
background-size: 12px 8px;
text-decoration: none;
}
/* Responsive Cols for Team Menu */
@media (min-width: 576px) { .off-canvas .team-list { column-count: 4; } }
@media (min-width: 768px) { .off-canvas .team-list { column-count: 5; } }
@media (min-width: 992px) { .off-canvas .team-list { column-count: 6; } }
@media (min-width: 1200px) { .off-canvas .team-list { column-count: 7; } }
@media (min-width: 1400px) { .off-canvas .team-list { column-count: 8; } }
@media (min-width: 1600px) { .off-canvas .team-list { column-count: 9; } }
@media (min-width: 1800px) { .off-canvas .team-list { column-count: 10; } }
@media (min-width: 2000px) { .off-canvas .team-list { column-count: 11; } }
/* Add an extra column if screen height is below 750px */
@media (max-height: 860px) {
.off-canvas.off { width: 280px; }
.off-canvas.off .off-menu { transform: translateX(280px); }
.off-canvas.off .team-list { column-count: 3; }
} /* /@media */
/* Remove menu for mobile */
@media (max-width: 991px) {
.off-canvas { display: none; }
} /* /@media */
@media (orientation: portrait) {
.off-canvas { display: none; }
} /* /@media */
/* PROJECTs MENU PAGE
----------------------------------------------------------------------------------------- */
/* !!! Includes syles for Modo design links */
@media (max-width: 800px) {
.projects-splash {
}
} /* /@media */
.project-link, .modo-link {
padding: 0;
padding-bottom: 2rem;
}
.project-link a, .project-link a:hover, .project-link a:visited {
color: #ffffff;
text-decoration: none;
}
img.color-pak {
background-color: #858585;
border: transparent solid 3rem;
background-clip: border-box;
}
.project-link .color-pak {
transition: border-width .2s ease-in-out;
}
.project-link > a:hover .color-pak {
border-width: 2rem;
}
img.modo-pak {
background-clip: border-box;
}
.modo-link .modo-pak {
transform: scale(1);
transform-origin: center;
transition: transform .2s ease-in-out;
}
.modo-link > a:hover .modo-pak {
transform: scale(1.2);
}
.pak-title { /* margin-top:*/ padding-top: 0.75rem; }
/* .project-link*/
.pak-title > p {
background-image: none;
padding-right: 1rem;
}
@media (min-width: 1200px) {
/*
.projects-splash .container-fluid {
padding-top: calc(25vw * 0.5625);
padding-left: calc(7vw * 0.5625);
} */
.project-link, .modo-link {
padding-bottom: calc(7vw * 0.5625);
}
img.color-pak {
border-width: calc(7vw * 0.5625);
}
.project-link > a:hover .color-pak {
border-width: calc(3.5vw * 0.5625);
}
} /* /@media */
/* DESIGN PAGE + Case studies
----------------------------------------------------------------------------------------- */
h1.modo-design {
background: transparent url(../img/design-outline-green_560x160.svg) no-repeat 19.2px 28.8px;
background-size: 302.383px 86.383px;
height: 120px;
}
/* prevent cut off design outline */
@media (min-width: 768px) and (max-width: 868px) and (min-aspect-ratio: 7/11) { h1.modo-design { width: 120%; }}
@media (max-width: 575px) {
.design .crumbs .h4-line, .modo-case-studies .crumbs .h4-line {
text-indent: -999px;
background-image: none;
}}
/* prevent text wrap */
@media (max-aspect-ratio: 99/100) and (min-width: 768px) and (max-width: 991px) {
.dragon-splash .display-0 { width: 70vw; }
} /* /@media */
.modo-art {
background-color: #00AE42;
}
.modo-link a, .modo-link a:hover, .modo-link a:visited {
color: #ffffff;
text-decoration: none;
}
.modo-link img {
width: 100%;
height: auto;
transition: transform .2s; /* Animation */
}
/* Variable size for 1200 upwards */
@media (min-width: 1200px) {
h1.modo-design {
background: transparent url(../img/design-outline-green_560x160.svg) no-repeat 1.6vw 2.4vw;
background-size: calc(0.9 * 28vw) calc(0.9 * 8vw);
height: 10vw;
}
}/* /@media */
.splash-study { height: 60vh; }
/* Styles for single column layout and portrait */
@media (max-aspect-ratio: 9/10) {
.splash-study { height: 56.25vw; }
}
.splash-dragon {
width: 100%;
height: 56.25vw;
}
.case-txt { overflow: hidden; }
.case-txt > div {
width: 100%;
height: 100%;
overflow-y: scroll;
}
/* PROJECT
----------------------------------------------------------------------------------------- */
@media (orientation: landscape) {
} /* /@media */
@media (orientation: portrait) {
} /* /@media */
.project-splash h3.display-5 {
font-weight: 900;
line-height: 1;
margin-top: 0.5rem ;
margin-bottom: 1.5rem ;
letter-spacing: 0.15em;
}
.project-splash h1.display-1 {
font-weight: 700;
line-height: 1;
position: relative;
z-index: 100;
letter-spacing: 0.1em;
}
/* Set spacing for whole page */
.project-info {
letter-spacing: 0.1em;
}
ul.production-list > li {
color: #858585;
text-transform: uppercase;
font-size: 0.8rem;
margin-bottom: 3rem;
}
ul.production-list > li:last-child {
margin-bottom: 3rem;
}
.img-color-wrap {
}
.color-max {
width: 34vw;
max-width: 400px;
height: auto;
}
@media (max-width: 599px) {
.color-max {
width: 50vw;
height: auto;
}
} /* /@media */
@media (max-width: 1199px) {
.project-info ul {
font-size: 1rem;
}
} /* /@media */
@media (min-width: 1200px) {
.project-splash h1.display-1 {
font-size: 4.6vw;
}
.project-splash h3.display-5 {
font-size: 1.2vw;
margin-top: calc(4.4vw * 0.5625);
margin-bottom: calc(4.4vw * 0.5625);
}
.project-info ul {
font-size: 1.25rem;
}
} /* /@media */
/* GALLERY and CTA MODAL STYLES - Including general modal
------------------------------------------------------------ */
.gallery > .row {
background-color: #000000;
}
.gallery-call {
position: absolute;
top: 0;
left: 0;
background-color: #000000;
padding: 1rem 1rem 1rem 2rem;
z-index: 1001;
}
/* create always square thumbnail */
.img-wrap-square {
display: block;
position: relative;
width: 100%;
padding-bottom: 100%;
overflow: hidden;
}
.img-wrap-square > img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
cursor: pointer;
}
.img-wrap-square:after {
content: "";
position: absolute;
left: 0.75rem;
bottom: 0.75rem;
z-index: 10;
display: block;
width: 24px;
height: 24px;
background: transparent url(../img/video-zoom-key_64x64.svg) no-repeat -24px 0;
background-size: 48px 48px;
cursor: pointer;
}
/* Place + centrally for small screens */
@media (max-width: 575px) {
.img-wrap-square:after {
left: 50%;
top: 50%;
transform: translate(-12px, -12px);
}
} /* /@media */
/* .modal-dialog class replaced by .modal-gallery class for gallery specific styles */
.modal.show .modal-gallery {
-webkit-transform: none;
transform: none;
}
.modal.fade .modal-gallery {
transition: -webkit-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
/* -webkit-transform: translate(0, -50px);
transform: translate(0, -50px); */
}
.modal-dialog.modal-gallery {
width: 90vw;
height: 90vh;
margin: 5vh 5vw;
}
.modal-dialog.modal-cta {
z-index: 2051;
max-width: 800px !important;
padding: 3rem;
background-color: #000;
}
.modal-contact {
}
/* Overide of B4 for portrait */
@media (min-width: 576px) {
.modal-dialog {
max-width: 90vw;
}
}
.modal-header { border: none; padding: 0; position: relative; }
.modal-dialog.modal-tech {
padding: 1rem;
}
/* the colour of the modal overlay */
.modal-backdrop.show {
opacity: 0.8;
}
.modal-content {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
height: 100%;
pointer-events: auto;
color: #ffffff;
background-color: #000;
background-clip: padding-box;
border: none;
border-radius: 0;
outline: 0;
}
modal-gallery .modal.content {
padding: 1rem;
}
.modal-body {
position: relative;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 0;
}
/* remove generic padding then add for gallery */
modal-gallery .modal-body {
padding: 1rem;
}
.close.close-gallery {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 1080;
}
.close.shut {
float: right;
font-size: 2rem;
font-weight: 700;
line-height: 1;
color: #fff;
opacity: 1;
}
.cta {margin-top: 3rem;}
.cta p:first-of-type {margin-top: 3rem; }
.close.shutcta, .close.shuttech {
position: absolute;
top: 1px;
right: 1px;
font-size: 2rem;
font-weight: 700;
line-height: 1;
color: #fff;
opacity: 1;
}
.carousel-item {
}
.img-wrap-slide {
display: block;
position: relative;
width: 100%;
margin-top: 1rem;
height: calc(90vh - 2rem);
}
.img-wrap-slide img {
height: calc(100% - 4rem);
width: calc(100% - 2rem);
margin-left: 1rem;
object-fit: contain;
}
.slide-title {
display: block;
text-align: center;
padding: 0.7rem 3rem 0 3rem;
line-height: 1.2;
}
@media (max-width: 992px) {
.slide-title {
font-size: 0.75rem;
line-height: 1;
padding: 0.5rem 1rem 0 1rem;
}
}
/* Carousel stles from B4
----------- REMOVE ALL BUT MRLL EDITS FOR PUBLISHING */
.carousel-control-prev,
.carousel-control-next {
position: absolute;
top: 30%;
bottom: 30%;
z-index: 1900;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
width: 5vw; /* MRLL */
color: #fff;
text-align: center;
opacity: 0.7;
transition: opacity 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
.carousel-control-prev,
.carousel-control-next {
transition: none;
}
}
.carousel-control-prev:hover, .carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
color: #fff;
text-decoration: none;
outline: 0;
opacity: 1;
}
.carousel-control-prev {
left: -5vw; /* MRLL */
}
.carousel-control-next {
right: -5vw; /* MRLL */
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
display: inline-block;
width: 20px;
height: 20px;
background: no-repeat 50% / 100% 100%;
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}
/* Render video section */
.cover-video > video {
width: 100%;
height: auto;
}
.ratio-16x9 {
position: relative;
display: block;
width: 100%;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
}
/* RINGS RING
-------------------------------------------------- */
/* Containing box */
.ring-box {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 50%;
}
.ring {
position: relative;
width: 100%;
height: 112%;
overflow: hidden;
}
.ring div {
border-radius: 30vw;
border: solid 4vw #ffffff;
border-width: calc(0.096 * 60vw);
width: 60vw;
height: 60vw;
position: absolute;
background-color: #ffffff;
overflow: hidden;
left: 0;
bottom: 0;
}
.ring div img {
width: 100%;
height: 100%;
/* border-radius: 50%; */
object-fit: cover;
transform: scale(1);
transform-origin: top right;
}
/* landscape */
@media (max-width: 991px) and (min-aspect-ratio: 1/1) { .ring-box { width: 43%; } }
@media (min-width: 1200px) and (min-aspect-ratio: 1/1){ .ring-box { width: 48%; } }
@media (min-aspect-ratio: 2/1) { .ring-box.recruit { right: -10vw; } }
@media (min-aspect-ratio: 12/5) { .ring-box.recruit { right: -20vw; } }
/* portrait */
@media (min-width: 768px) and (min-aspect-ratio: 8/13) and (max-aspect-ratio: 1/1) {
.ring-box { width: 75%; }
.ring div {
border-radius: 42vw;
border-width: calc(0.096 * 84vw);
width: 84vw;
height: 84vw;
}
} /*/@media */
@media (max-width: 767px) and (min-aspect-ratio: 8/13) and (max-aspect-ratio: 1/1) {
.ring {
height: 144%;
min-height: 900px;
}
.ring-box { width: 80%; }
.ring div {
border-radius: 40vh;
border-width: calc(0.096 * 80vh);
width: 80vh;
height: 80vh;
}
} /*/@media */
@media (max-width: 767px) and (max-aspect-ratio: 8/13) {
.ring {
height: 124%;
min-height: 900px;
}
.ring-box { width: 90%; }
.ring div {
border-radius: 55vw;
border-width: calc(0.096 * 110vw);
width: 110vw;
height: 110vw;
}
} /*/@media */
/* VIDEO RINGS TO BE RATIONALISED HERE */
/* Combine with Other ring CSS ???????????????????????????????????????????????????????????????????? */
.ring-box.video {
position: absolute;
right: 0;
top: 0;
width: 54%;
height: 100%;
}
.video-ring {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.ring-video-wrap {
border-radius: 30vw;
border: solid 4vw #ffffff;
border-width: calc(0.096 * 60vw);
width: 60vw;
height: 60vw;
position: absolute;
left: 0;
bottom: 0;
overflow: hidden;
}
.video-globe {
width: 100%;
height: 100%;
}
/* Position ring for different screens */
@media (max-width: 991px) and (min-aspect-ratio: 1/1) { .ring-box.video { width: 45%; } }
@media (min-width: 1200px) and (min-aspect-ratio: 1/1){ .ring-box.video { width: 55%; } }
/* @media (min-aspect-ratio: 2/1) { .ring-box.video { right: -10vw; } } */
/* @media (min-aspect-ratio: 12/5) { .ring-box.video { right: -20vw; } } */
/* portrait */
@media (min-width: 768px) and (max-aspect-ratio: 1/1) {
.ring-box.video { width: 75%; }
.ring-video-wrap {
border-radius: 45vw;
border: solid 4vw #ffffff;
border-width: calc(0.096 * 90vw);
width: 90vw;
height: 90vw;
}}
@media (max-width: 768px) and (min-aspect-ratio: 4/6) and (max-aspect-ratio: 1/1) {
.ring-box.video { width: 75%; }
.ring-video-wrap {
border-radius: 45vw;
border-width: calc(0.096 * 90vw);
width: 90vw;
height: 90vw;
transform: translateY( 30vw);
}}
@media (max-width: 768px) and (min-aspect-ratio: 1/6) and (max-aspect-ratio: 4/6) {
.ring-box.video { width: 85%; }
.ring-video-wrap {
border-radius: 45vw;
border-width: calc(0.096 * 90vw);
width: 90vw;
height: 90vw;
}
.video-ring { min-height: 800px; }
}
@media (max-width: 768px) and (max-height: 640px) and (max-aspect-ratio: 4/6) {
/* .ring-box.video { display: none; } */
}
.ring-box.sustain.video {
height: 110%; /* IMPORTANT - THIS HAS TO BE DIFFERENT and equal the splash height for the knowledge page */
}
/* Image version for new suss page */
.ring-video-wrap img {
width: 100%;
height: auto;
}
/* Service
-------------------------------------------------- */
.service-splash {
position: relative;
overflow: hidden;
}
.service-image {
height: 100%;
width: 100%;
}
.service-image > img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (min-width: 1200px) {
.service .splash h1.display, .type-heading h2.display {
font-size: 4.6vw;
}
} /* /@media */
/* Bespoke packaging */
.bespoke-img {
padding: 0;
overflow: hidden;
}
.bespoke-img > img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (min-width: 768px) {
.bespoke-img {
min-height: 40vw;
}
.bespoke-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
/* PRODUCT PRICES SECTION
---------------------------------------------------------------------------- */
/* Edit pills to look like other buttons - Used in products */
.nav-pills.pill-btn .nav-link {
border-radius: 0;
}
.nav-pills.pill-btn .nav-item > .nav-link {
color: #000000;
background-color: #ffffff;
border: 1px solid #000000;
}
.nav-pills.pill-btn > .nav-item { margin-right: 10px; }
.nav-pills.pill-btn > .nav-item:last-child { margin-right: 0; }
.nav-pills.pill-btn .nav-link.active,
.nav-pills.pill-btn .show > .nav-link {
color: #fff;
background-color: #000000;
}
.product {
padding-top: var(--navbar-height);
}
.package {
border-top: 2px solid #000000;
padding-top: 1rem;
}
h3.package-heading {
font-size: 36px;
}
ul.package-description {
list-style: square inside;
margin-bottom: 0;
font-weight: 900;
font-size: 1.5rem;
color: inherit;
letter-spacing: 0.05em;
}
ul.package-description li {
padding: 0.1rem 0;
line-height: 1;
}
/* PRODUCT FORM - CUSTOM CONTROLS */
/* Master colours */
.custom-control-input:checked ~ .custom-control-label::before {
color: #fff;
border-color: #05bf15;
background-color: #05bf15;
}
.custom-control-input:focus ~ .custom-control-label::before {
box-shadow: none; /* Remove focus outline */
}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
border-color: #858585;
}
.custom-control-input:active ~ .custom-control-label::before {
background-color: #858585;
border-color: #858585;;
}
.custom-control-label::before {
position: absolute;
top: 0.25rem;
left: -1.5rem;
display: block;
width: 1rem;
height: 1rem;
pointer-events: none;
content: "";
background-color: #858585;
border: #858585 solid 1px;
}
/* Removes grey focus border */
.custom-control-label::after {
position: absolute;
top: 0.25rem;
left: -1.5rem;
display: block;
width: 1rem;
height: 1rem;
content: "";
background: no-repeat 50% / 50% 50%;
}
.custom-switch .custom-control-label::after {
top: calc(0.25rem + 2px);
left: calc(-2.25rem + 2px);
width: calc(1rem - 4px);
height: calc(1rem - 4px);
background-color: #ffffff;
border-radius: 0.5rem;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
}
.custom-switch {
position: relative;
}
.custom-switch:before {
content: " ";
color: #858585;
font-size: 0.75rem;
position: absolute;
right: 2.5rem;
top: 0.3rem;
}
.custom-switch:before { content: "vat";}
.select-select { margin-bottom: 1rem; }
.custom-select {
display: inline-block;
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 1.75rem 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #000000;
vertical-align: middle;
background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23000000' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
border: 1px solid #000000;
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* PRICES TABLE */
ul.includes-list {
list-style: square inside;
margin-bottom: 0;
}
ul.includes-list li {
/* border-bottom: solid 2px #858585; */
padding: 0.1rem 0;
}
ul.includes-list li:last-child {
/* border-bottom: none; */
}
.border-2px {
border: solid #838383 2px;
padding: 15px;
}
.prices-table {
font-weight: 700;
font-size: 1rem;
text-align: right;
}
.prices-table th {
padding: 0.3rem 0 0.3rem 0;
border-bottom: solid 2px #ffffff;
border-top: none;
}
.prices-table td {
padding: 0.3rem 0 0.2rem 0;
border-bottom: solid 2px #858585;
border-top: none;
vertical-align: bottom;
}
.prices-table th:first-child, .prices-table td:first-child {
text-align: left;
position: relative;
}
.prices-table th.inc, .prices-table th.ex {
text-align: center;
}
/* Add the @ sign */
.prices-table td.quantity:after {
content: "@";
color: #858585;
position: absolute;
right: 4px;
}
/* Remove the @ sign for footer */
.prices-table tfoot td.quantity:after { content: ""; }
.prices-table th {
text-transform: uppercase;
color: #858585;
font-size: 0.9rem;
}
.prices-table td.pounds:before {
content: "£";
}
.prices-table td.pence:before {
content: "£";
}
.prices-table td.pence {
/* display: none; */
}
.prices-table thead th {
border-bottom: 2px solid #ffffff;
}
/* Rewrite for BUY button */
.btn-buy {
/* padding: 0.25rem 0.5rem; */
font-size: 1rem;
line-height: 1;
border-radius: 0;
color: #000000;
background-color: #ffffff;
text-transform: uppercase;
border: 1px solid #000000;
}
.btn-buy:hover, .btn-buy:focus, .btn-buy:active {
color: #ffffff;
background-color: #000000;
border: 1px solid #000000;
}
.prices-table, .choose-form label, ul.includes-list {
font-size: 1rem;
}
/* Remove the @ sign for footer */
/* .prices-table tfoot { display: none; } */
.prices-table tfoot td.goto {
text-align: left;
font-size: 1rem;
font-weight: 200;
}
a.breedlink { color: #2faade; font-weight: 700; }
.prices-table tfoot td.quantity:after { content: ""; display: none; }
/* reduce price size to fit table */
@media (min-width: 900px) and (max-width: 1667px) {
.prices-table .btn {
padding: 0.3rem 0.6rem;
font-size: 1rem;
line-height: 1.2;
}
}
@media (min-width: 768px) and (max-width: 899px) {
.prices-table, .prices-table th {
font-size: 0.8rem;
}
.prices-table .btn {
padding: 0.2rem 0.4rem;
font-size: 0.8rem;
line-height: 1.2;
}
}
@media (max-width: 399px) {
.prices-table, .prices-table th {
font-size: 0.8rem;
}
.prices-table .btn {
padding: 0.2rem 0.4rem;
font-size: 0.8rem;
line-height: 1.2;
}
}
/* PACKSHOTS AND VIDEO */
.packshot-wrap {
width: 100%;
padding: 0;
}
/* Obscure modal window clink to disable */
.packshot-wrap:after {
}
.package-packshot {
margin-bottom: 1rem;
}
/* this markup is the same as img-wrap-square used on the work gallery */
.package-packshot {
display: block;
position: relative;
width: 100%;
padding-bottom: 100%;
overflow: hidden;
cursor: default;
}
/* Obscure modal window clink to disable */
/* .packshot-wrap .package-packshot { cursor: default; }
.packshot-wrap .package-packshot:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
z-index: 100;
display: block;
width: 100%;
height: 100%;
background-color: transparent;
cursor: default;
} */
.packshot-wrap.plus .package-packshot, .packshot-wrap .package-packshot { cursor: pointer; }
.packshot-wrap.plus .package-packshot:after, .packshot-wrap .package-packshot:after {
content: "";
position: absolute;
left: 0.75rem;
bottom: 0.75rem;
z-index: 10;
display: block;
width: 24px;
height: 24px;
background: transparent url(../img/video-zoom-key_64x64.svg) no-repeat -24px 0;
background-size: 48px 48px;
cursor: pointer;
}
.package-packshot > img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
.video-btn {
width: 100%;
}
/* Additions to Modal Gallery */
@media (orientation: landscape) {
.pak-wrap {
display: block;
position: relative;
width: 100%;
height: 90vh;
text-align: center;
}
.pak-wrap img {height: 100%; width: auto; }
.vid-wrap {
display: block;
position: relative;
width: 100%;
height: 90vh;
text-align: center;
}
.vid-wrap > video {
width: 100%;
height: auto;
}
.modal-dialog { max-height: 90vh; max-width: 90vw; }
} /* /@media */
@media (orientation: portrait) {
.modal-content > video {
width: 90vw;
height: 90vw;
max-width: 90vw;
}
.modal-dialog.modal-video { max-width: 90vw; max-height: 90vw; }
} /* /@media */
.modal-content { width: auto; }
@media (orientation: landscape) {
.modal-content > video {
height: 90vh;
width: 90vh;
max-height: 90vh;
}
.modal-dialog { max-height: 90vh; max-width: 90vw; }
} /* /@media */
@media (orientation: portrait) {
.modal-content > video {
width: 90vw;
height: 90vw;
max-width: 90vw;
}
.modal-dialog.modal-video { max-width: 90vw; max-height: 90vw; }
} /* /@media */
.modal-dialog-video {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
/* max-width: 90vh; */
margin-top: 5vh;
margin-right: auto;
margin-bottom: 5vh;
margin-left: auto;
text-align: center;
}
.modal-dialog-video::before {
display: block;
height: 100vh;
content: "";
}
.close-video {
position: absolute;
top: 0;
right: 0;
display: block;
width: 100px;
height: 100px;
padding: 25px;
}
/* SCALE AND ORIENTATION FOR B.O.L. */
@media (max-width: 575px) {
.custom-select {
width: calc(100% - 120px) ;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.25rem 1.75rem 0.25rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
margin-bottom: 0.5rem;
}
} /* /@media */
@media (max-width: 400px) {
.nav-pills.pill-btn .nav-item > .nav-link {
padding: 0.4rem 0.6rem;
font-size: 0.8rem;
line-height: 1;
}
.custom-select { font-size: 0.8rem; }
} /* /@media */
@media (min-width: 768px) {
h3.package-heading {
position: absolute;
top: -68px; /* Font-size plus 2 rem */
left: 0;
}
} /* /@media */
@media (max-width: 767px) {
/* Inline list for small screens - Uses B4 inline list styles */
ul.includes-list { padding-left: 0; list-style: none;}
ul.includes-list li { display: inline-block; }
ul.includes-list li:after { content: ",";}
ul.includes-list li:not(:last-child) { margin-right: 0.5rem; }
h3.package-heading { margin-top: 1rem;}
.package-includes {margin-bottom: 1rem; }
/* Remove from flow and place at bottom of window */
.package-select > .cta {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #ffffff;
padding: 0 20px;
z-index: 2000;
transform: translateY(100%);
}
.package-select > .cta.on {
transform: translateY(0px);
}
.cta.on p:first-of-type { margin-top: 1rem;}
} /* /@media */
/* Additional styles for space saving */
.h4-before {
display: inline-block;
width: 110px;
}
/* Classes for VAT toggle */
.prices-table.inc-vat th.ex, .prices-table.inc-vat td.ex {display: none; }
.prices-table.ex-vat th.inc, .prices-table.ex-vat td.inc {display: none; }
@media (max-width: 991px) {
h3.package-heading { font-size: 30px; }
ul.package-description { font-size: 1.2rem; }
.package-select > .radio-button-select { display: none; }
/* Classes for VAT toggle */
/*
.prices-table.inc-vat th.ex, .prices-table.inc-vat td.ex {display: none; }
.prices-table.ex-vat th.inc, .prices-table.ex-vat td.inc {display: none; }
*/
/* .prices-table.ex-vat th.ex, .prices-table.ex-vat td.ex {display: inline; }
.prices-table.inc-vat th.inc, .prices-table.inc-vat td.inc {display: inline; } */
} /* /@media */
@media (min-width: 992px) {
.packshot-wrap {
width: 100%;
padding: 0px 2rem;
}
.package-select > .select-select { display: none; }
} /* /@media */
@media (min-width: 1200px) {
.packaging-heading {
top: -66px;
font-size: 50px;
}
} /* /@media */
/* Scale Forms and table text at regular break points */
@media (min-width: 1440px) {
.prices-table, .package-select label { font-size: 1.1rem; }
.check-box-select label { margin-bottom : 0.5rem; }
} /* /@media */
@media (min-width: 1680px) {
.prices-table, .package-select label { font-size: 1.2rem; }
.check-box-select label { margin-bottom : 0.6rem; }
} /* /@media */
@media (min-width: 720px) and (orientation: portrait) {
/* .product-prices, .product-includes { padding: 0 30px 30px 30px; } */
} /* /@media */
@media (min-width: 992px) and (orientation: portrait) {
} /* /@media */
@media (min-width: 1200px) and (orientation: portrait) {
} /* /@media */
/* LINKS TO YOUTUBE */
.cd-manufacturing .youtube-link, .dvd-replication .youtube-link {
display: none;
}
a.youtube-link {
text-decoration: none !important;
font-weight: 400;
font-size: 1.2rem;
border-bottom: solid #ffffff 2px;
}
a.youtube-link:hover, a.youtube-link:active, a.youtube-link:visited {
text-decoration: none !important;
}
/* Service Options */
.option {
padding: 0;
padding-bottom: 2rem;
}
.coloured-vinyl { padding: 3rem; }
.coloured-vinyl > img {
width: 100%;
height: auto;
border-radius: 50%;
box-shadow: 0px 0px 25px 15px rgba(0,0,0,0.3);
}
.option-item { }
.option-item > img {
width: 100%;
height: auto;
}
.vinyl-pressing .option-item { padding: 3rem; }
.vinyl-pressing .option-item > img {
width: 100%;
height: auto;
border-radius: 50%;
box-shadow: 0px 0px 25px 15px rgba(0,0,0,0.3);
}
.option-title {
margin-top: 0.75rem;
padding-right: 1.5rem;
}
/* .project-link*/
.option-title > span {
font-size: 1.5rem;
font-weight: 700;
}
.option-description {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1rem ;
background-color: rgba(0,0,0,0.4) ;
top: 0;
right: 0;
left: 0;
height: calc(100% - 4.5rem);
}
.option-description > p {
text-align: justify;
margin-top: 0;
}
.option-description.bp-description { background-color: transparent; }
.option-description.bp-description > p {
text-align: center;
background-color: rgba(0,0,0,0.4);
font-size: 1.2rem;
margin-right: -1rem;
margin-left: -1rem;
padding-left: 1rem;
padding-right: 1rem;
}
.bespoke-packaging .option-description, .cassette .option-description { background-color: transparent; }
.bespoke-packaging .option-description > p, .cassette .option-description > p {
text-align: center;
background-color: rgba(0,0,0,0.4);
font-size: 1.2rem;
margin-right: -1rem;
margin-left: -1rem;
padding-left: 1rem;
padding-right: 1rem;
}
/* Create class for reducing number of columns incrementally by vw */
.col-options {
position: relative;
width: 100%;
}
@media (min-width: 480px) and (max-width: 639px) {
.col-options {
max-width: 440px;
margin-right: auto;
margin-left: auto;
}
} /* /@media */
@media (min-width: 640px) {
.col-options {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
} /* /@media */
@media (min-width: 968px) {
.col-options {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
} /* /@media */
@media (min-width: 1280px) {
.col-options {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
} /* /@media */
@media (min-width: 1900px) {
.col-options {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
} /* /@media */
.alternate:nth-child(odd) {
color: #ffffff;
background-color: #000000;
}
.reverse.alternate:nth-child(even) {
color: #ffffff;
background-color: #000000;
}
.reverse.alternate:nth-child(odd) {
color: #000000;
background-color: #ffffff;
}
@media (min-width: 768px) {
.alternate:nth-child(even) div:nth-child(1) {
-ms-flex-order: 2;
order: 2;
}
.alternate:nth-child(even) div:nth-child(2) {
-ms-flex-order: 1;
order: 1;
}
} /* /@media */
/* alternate water on Modo Design page */
@media (min-width: 768px) {
.row.green:nth-child(even) div:nth-child(1) {
-ms-flex-order: 2;
order: 2;
}
.row.green:nth-child(even) div:nth-child(2) {
-ms-flex-order: 1;
order: 1;
}
} /* /@media */
/* NEW SERVICE PAGE ------------------------------------------------------------- */
.btn-acc {
border: none;
width: 100%;
font-weight: 700;
font-size: 1.5rem;
}
.img-wrap.pak-shot {
margin-bottom: 1rem;
}
/* Testimonials
--------------------------------------------------------------------------------------------------------------------------------- */
/* Staff quote variant used on Recruitment page */
.block-wrap {
background-color: #ffffff;
}
.blockquote { text-align: center; }
.times-quote, .staff-quote {
background: transparent url(../img/times-quote_75x50.svg) no-repeat center top;
background-size: 75px 50px;
padding-top: 75px;
text-align: center;
}
.staff-quote {
background-size: 33px 22px;
padding-top: 33px;
}
/* .times-asterisk {
background: transparent url(../img/times-asterisk_75x50.svg) no-repeat center top;
background-size: 75px 50px;
padding-top: 75px;
text-align: center;
} */
.negative .times-quote, .negative .staff-quote {
background-image: url(../img/times-quote-wht_75x50.svg);
}
/* .negative .times-asterisk {
background-image: url(../img/times-asterisk-wht_75x50.svg);
} */
.blockquote > p {
font-weight: 700;
margin-bottom: 0;
}
.blockquote-footer {
font-size: 0.9rem; /* Same as H4 */
font-weight: 700;
color: #858585;
margin-top: 2rem;
text-transform: uppercase;
}
.blockquote-footer::before {
content: none; /* TO REMOVE BOOTSTRAP 4 DEFAULT */
}
.blockquote-footer span {
text-transform: uppercase;
}
.blockquote-footer span:nth-child(2):before, .blockquote-footer span:nth-child(3):before {
content: "\2014";
padding-left: 10px;
padding-right: 10px;
}
/* span.name, span.org, span.date are in the HTML if required */
.project img.max {
max-width: 380px;
}
.block-wrap:nth-child(even) {
color: #ffffff;
background-color: #000000;
}
.block-wrap:nth-child(even) .times-quote {
background: transparent url(../img/times-quote-wht_75x50.svg) no-repeat center top;
background-size: 75px 50px;
padding-top: 75px;
}
.block-wrap:nth-child(even) {
color: #ffffff;
background-color: #000000;
}
.block-wrap:nth-child(even) .times-quote {
background: transparent url(../img/times-quote-wht_75x50.svg) no-repeat center top;
background-size: 75px 50px;
padding-top: 75px;
}
@media (max-width: 719px) {
.times-quote {
background-size: 60px 40px;
padding-top: 60px;
}
.times-quote > p {
font-size: 1.6rem;
}
.staff-quote {
background-size: 30px 20px;
padding-top: 30px;
}
/* .staff-quote > p {
font-size: 0.8rem;
}*/
}
@media (min-width: 720px) and (max-width: 1199px) {
}
@media (min-width: 1200px) {
.times-quote, .block-wrap:nth-child(even) .times-quote, .negative .times-quote {
background-size: 99px 66px;
padding-top: 99px;
}
.staff-quote {
background-size: 51px 34px;
padding-top: 51px;
}
/* For full splash
.negative .times-quote {
background-size: 120px 80px;
padding-top: 120px;
}
*/
} /* /@media
/* Contact
--------------------------------------------------------------------------------------------------------------------------------- */
/* larger point size equal to H3 point size */
.contact-details, .contact-details p {
font-size: 1.2rem;
font-weight: 200;
letter-spacing: 0.075em;
}
/* Google Map */
.map-wrap {
position: relative;
width: 100%;
height: 62vw;
overflow: hidden;
}
.map-out {
border-radius: 30vw;
width: 60vw;
height: 60vw;
position: absolute;
top: 0;
left: calc(7vw * 0.5625) ;
}
.map {
border-radius: 50%;
width: 100%;
height: 100%;
position: relative;
}
/* Extra padding right to expand gutter and een column widths */
/* .signup-col { padding-right: 30px; } */
/* special extra padding to compensate for map */
/* .enquiry-col { padding-right: calc(7vw * 0.1875 + 30px) ; } */
/* pop-up box ?? */
.gm-style .gm-style-iw-c {
background-color: #ffffff;
border-radius: 50%;
padding: 0;
border: 8px solid #ffffff;
box-shadow:0 2px 7px 1px rgba(0,0,0,0.3);
}
button.gm-ui-hover-effect {
background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%;
display: block; /* appears inline */
position: absolute; /* appears inline */
top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important ;
width: 100% !important;
height: 0 !important;
padding-top: 100% !important;
margin: 0;
}
@media (min-width: 992px) {
.map-wrap {
transform: translateY(-25vw);
}
}
@media (max-width: 991px) {
.map-wrap {
position: relative;
display: block;
width: 100%;
height: 94vw;
overflow-x: auto;
overflow-y: visible;
}
.map {
border-radius: 45vw;
width: 90vw;
height: 90vw;
position: relative;
top: 0;
left: 0 ;
}
}
/* TIME LINE
-------------------------------------------------------- */
#timeLine {
position: relative;
}
.timeline-outer {
display: block;
position: relative;
background: #ffffff ;
height: 550px;
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
}
.timeline-inner {
/* width: calc(320px * 32); */
/* width set via PHP or jQuery ? */
z-index: 40;
}
.timeline-year {
float: left;
height: 550px;
width: 320px;
margin: 0;
padding: 0px 30px;
text-align: center;
overflow: hidden;
background: transparent url(../img/hrz-line-blk-2px.png) repeat-x 0px 55px;
}
.timeline-year h3 {
margin-top: 6px;
}
.time-tech {
display: block;
height: 24px;
}
.time-tech > .btn {
width: 100%;
padding: 3px 0 1px;
line-height: 18px;
border-width: 2px;
}
.time-event {
display: block;
margin: 10px 0;
line-height: 19px;
height: 38px;
overflow: hidden;
}
.time-pak { margin: 0 0 10px 0 }
.time-pak > img {
width: 100%;
height: auto;
}
span.artist, span.title, span.time-staff {
display: block;
line-height: 1;
}
span.title {
font-weight: 700;
padding-bottom: 10px;
}
span.time-staff {
font-size: 80%;
letter-spacing: 0;
}
/* Tech Info Modal Window */
.modal-dialog.modal-tech {
width: 90vw;
margin: 5vh auto;
max-width: 800px;
}
.modal-tech .modal-content {
padding: 2rem;
text-align: left;
}
.modal-tech p {
text-align: justify;
}
/* FAQ - Knowledge Base - Art guidlines etc.
-------------------------------------------------- */
.faq-section {
padding-top: 12vw;
position: relative;
}
.faq-section ul {
list-style: none;
padding-left: 1.5rem;
}
.faq-section ul li {
position: relative;
margin-bottom: 0.5em;
}
.faq-section ul li::before {
content: "";
background: transparent url(../img/key-ring_128x128.svg) no-repeat center center;
background-size: contain;
position: absolute;
width: 1em;
height: 1em;
left: -1.4rem;
top: 2px;
}
.sub-section { padding-top: 84px; }
.sub-section img, .faq-section img {
width: 100%;
height: auto;
}
/* Lead para */
/* .artwork-guide ??? */ .faq-section > p {
font-size: 125%;
}
/* Creates Tip! and Important boxes */
.faq-section blockquote.tip, .faq-section blockquote.important {
border: 2px solid #858585;
padding: 1rem 1rem 0 1rem;
}
.faq-section blockquote.tip:before, .faq-section blockquote.important:before {
display: block;
content: "TIP!";
background-color: #858585;
color: #ffffff;
padding-left: 1rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.faq-section blockquote.tip:before {
content: "TIP!";
}
.faq-section blockquote.important:before {
content: "IMPORTANT!";
background-color: #ff0000;
}
.faq-section blockquote p {
font-size: 125%;
font-style: italic;
}
.faq-section .display-2 {
margin-bottom: 0;
}
/* restrict size of barcode image */
.bc-wrap {
max-width: 500px;
}
.bc {
display: inline-block;
width: 40%;
border: solid 10px #ffffff;
--bcRed: #ff0000;
--bcBlue: #0000ff;
--bcWhite: #ffffff;
--bcGreen: #008500;
--bcBlack: #000000;
--bcBrown: #582900;
--bcYellow: #ffea2f;
}
.bg-white { background-color: var(--bcWhite); }
.bg-red { background-color: var(--bcRed); }
.bg-blue { background-color: var(--bcBlue); }
.bg-black { background-color: var(--bcBlack); }
.bg-green { background-color: var(--bcGreen); }
.bg-brown { background-color: var(--bcBrown); }
.bg-yellow { background-color: var(--bcYellow); }
.bc-white .cls-1 { fill: var(--bcWhite); }
.bc-red .cls-1 { fill: var(--bcRed); }
.bc-blue .cls-1 { fill: var(--bcBlue); }
.bc-black .cls-1 { fill: var(--bcBlack); }
.bc-green .cls-1 { fill: var(--bcGreen); }
.bc-brown .cls-1 { fill: var(--bcBrown); }
.bc-yellow .cls-1 { fill: var(--bcYellow); }
/* Custom styles for specific images */
#printersPairs img { width: 75%; }
#maxInk img { width: 65%; }
#minInk img { width: 65%; }
/* Sustainability Long Form Page custom styles */
.sustainability-in-music-manufacturing .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-in-music-manufacturing .faq-splash:after {
position: absolute;
left: calc(7vw * 0.5625);
bottom: 10px;
color: #ffffff;
font-size: 0.75rem;
content: "IMAGE: Key Production support the CommuniTree reforestation project in Nicaragua";
background-color: rgba(0,0,0,0.5);
z-index: 101;
}
@media (max-width: 767px) {
.sustainability-in-music-manufacturing .faq-splash {
background-image: url(../img/key-ring-wht_240x240.svg), url(../img/forest-cloud-skyline-hero.jpg);
background-position: 56vw 66vw, left top;
background-size: 72vw 72vw, cover;
}
}
#vinyl-manufacturing-carbon-footprint-report img {
width: 60%;
height: 60%;
margin: 1rem auto 1rem 20%;
}
#vinyl-manufacturing-carbon-footprint-report ul li::before { background-image: url('data:image/svg+xml,'); }
#vinyl-manufacturing-carbon-footprint-report ul li:nth-child(2):before { background-image: url('data:image/svg+xml,'); }
#vinyl-manufacturing-carbon-footprint-report ul li:nth-child(3):before { background-image: url('data:image/svg+xml,'); }
#vinyl-manufacturing-carbon-footprint-report ul li:nth-child(4):before { background-image: url('data:image/svg+xml,'); }
#vinyl-manufacturing-carbon-footprint-report ul li:nth-child(5):before { background-image: url('data:image/svg+xml,'); }
/* --keytone: #eb008b;
--breedtone: #2FAADE;
--grouptone: #f6931e;
--modotone: #00AE42;
*/
/* 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); /* nav height plus pad-sm */
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 {
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);
}
} /* /@media */
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;
}
/* Resource menu
---------------------------------------------- */
:root {
--ratio5x4: calc(50vw * 0.4); /* Sets the boxes at a 5/4 ratio as used in history*/
--ratio5x5: calc((50vw - var(--padUnit)) * 0.5); /* Sets the boxes square for 2 columns with padding removed */
--ratio10x5: calc(50vw - var(--padUnit)); /* Sets the boxes square for 1 columns with padding removed */
--altHeight: 30vw; /* for intermediate (rectangular) version */
}
/* (min-width: 840px) */
.resource-splash {
position: relative;
overflow: hidden;
}
.resource-grid {
padding-top: calc(2 * var(--padUnit));
padding-right: var(--padUnit);
padding-left: var(--padUnit);
background-color: #000;
}
.resource-link {
position: relative;
height: var(--ratio5x5);
padding-left: 0;
padding-right: 0;
margin-bottom: var(--padUnit);
}
.resource-link a {
text-decoration: none;
display: inline-block;
padding-left: 50%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.resource-link a:hover {
color: #fff;
text-decoration: none;
}
.thumbhole {
position: absolute;
display: block;
width: var(--ratio5x5);
height: var(--ratio5x5);
border-radius: 50%;
background-color:#6B6F72;
left: calc(0.95 * var(--ratio5x5));
top: 0;
transition: transform 0.3s ease;
}
.resource-link a h3, .resource-link a p {
padding: 0 2rem 0 1rem;
z-index: 100;
}
.resource-link .img-wrap {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 50%;
overflow: hidden;
}
.resource-link .img-wrap img {
object-fit: cover;
transition: transform 0.3s ease;
}
.resource-link:hover img {
transform: scale(110%);
transform-origin: center;
}
.resource-link:hover .thumbhole {
transform: translateX( calc(-0.05 * var(--ratio5x5)));
}
.resource-list {
padding-left: 36px;
}
.resource-list li {
position: relative;
margin-bottom: 1rem;
list-style: none;
width: auto;
}
.resource-list li:before {
content: " ";
position: absolute;
display: block;
width: 16px;
height: 16px;
top: 4px;
left: 0;
background-color: #fff;
border-radius: 8px;
transform: translateX(-36px);
}
a.dart {
font-weight: 700;
color: #fff;;
letter-spacing: 0.05em;
line-height: 1;
font-size: 1.75rem;
position: relative;
text-decoration: none;
padding-right: 80px;
display: inline-block;
}
.dart::before, .dart::after {
content: " ";
position: absolute;
display: block;
width: 36px;
height: 24px;
top: 0;
right: 0;
background: transparent url(../img/arrow-dre-wht_24x16.svg) no-repeat right center;
background-size: 36px 24px;
transform: translate(0%, 0%);
opacity: 1;
will-change: transform, opacity;
}
a.dart:hover {
color: #fff;
text-decoration: none;
}
.resource-list li:hover .dart::after {
animation-name: dart1;
animation-duration: 250ms;
animation-delay: 0ms;
animation-fill-mode: both;
animation-timing-function: linear;
}
.resource-list li:hover .dart::before {
animation-name: dart2;
animation-duration: 250ms;
animation-delay: 200ms;
animation-fill-mode: both;
animation-timing-function: ease-out;
}
@keyframes dart1 { from
{opacity:1;-webkit-transform:translate(0%,0%);-ms-transform:translate(0%,0%);transform:translate(0%,0%);}to{opacity:0;-webkit-transform:translate(75%,0%);-ms-transform:translate(75%,0%);transform:translate(75%,-0%);}
}
@keyframes dart2 { from
{opacity:0;-webkit-transform:translate(-75%,0%);-ms-transform:translate(-75%,0%);transform:translate(-75%,0%);}to{opacity:1;-webkit-transform:translate(0%,0%);-ms-transform:translate(0%,0%);transform:translate(0%,0%);}
}
@media (min-width: 768px) and (max-width: 1199px) {
.resource-link {
height: var(--altHeight);
}
.thumbhole {
left: calc(0.95 * var(--ratio10x5));
width: var(--altHeight);
height: var(--altHeight);
}
.resource-link:hover .thumbhole {
transform: translateX( calc(-0.05 * var(--ratio10x5)));
}
.resource-list {
padding-left: 24px;
}
.resource-list li:before {
width: 12px;
height: 12px;
top: 3px;
border-radius: 6px;
transform: translateX(-24px);
}
a.dart {
font-size: 1.25rem;
padding-right: 60px;
}
.dart::before, .dart::after {
width: 30px;
height: 20px;
top: 0;
right: 0;
background: transparent url(../img/arrow-dre-wht_24x16.svg) no-repeat right center;
background-size: 30px 20px;
}
} /* /@media */
@media (max-width: 767px) {
.resource-link {
position: relative;
height: var(--ratio10x5);
}
.thumbhole {
width: var(--ratio10x5);
height: var(--ratio10x5);
left: calc(0.95 * var(--ratio10x5));
}
.resource-link:hover .thumbhole {
transform: translateX( calc(-0.05 * var(--ratio10x5)));
}
.resource-list {
padding-left: 18px;
}
.resource-list li:before {
width: 8px;
height: 8px;
top: 5px;
border-radius: 4px;
transform: translateX(-18px);
}
a.dart {
font-size: 1rem;
padding-right: 40px;
}
.dart::before, .dart::after {
width: 18px;
height: 12px;
top: 0;
right: 0;
background: transparent url(../img/arrow-dre-wht_24x16.svg) no-repeat right center;
background-size: 18px 12px;
}
} /* /@media */
@media (max-width: 575px) {
.resource-link a h3 { font-size: 1.25rem; }
.resource-link a p { font-size: 0.8rem; line-height: 1.25; }
.resource-link a h3, .resource-link a p {
padding: 0 1rem 0 1rem;
}
} /* /@media */
@media (max-width: 478px) {
.resource-link {
position: relative;
height: var(--ratio10x5);
}
.resource-link a { padding-left: 33%; }
.resource-link .img-wrap { width: 33%; }
.resource-link .img-wrap > img {
width: 100%;
height: 100%;
}
.thumbhole {
width: var(--ratio10x5);
height: var(--ratio10x5);
left: calc(0.55 * var(--ratio10x5));
}
.resource-link:hover .thumbhole {
transform: translateX( calc(-0.05 * var(--ratio10x5)));
}
} /* /@media */
@media (max-width: 378px) {
.resource-link {
height: auto;
}
.resource-link a h3 { padding-top: 1rem; }
.thumbhole {
width: 50%;
height: 100%;
left: calc(0.55 * var(--ratio10x5));
}
}
/* VIDEO HELP ---- */
.video-wrap {
position: relative;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
max-width: 100%;
}
.video-wrap > iFrame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Info box under video */
.video-description {
margin-top: 0.75rem;
/* padding-right: 1.5rem; */
padding-bottom: var(--padUnit);
}
.video-description > span {
font-size: 1.5rem;
font-weight: 700;
}
/* These styles are for the circular design - USE FOR ANT AND BEE !!!!!
.resources {
--smPad: calc(14vw * 0.5625);
--baseLink: calc( (100vw - var(--smPad)) / 4)
}
.base-link { padding: 0; }
.base-link p {
text-align: center;
padding-top: 1rem;
padding-left: 20%;
padding-right: 20%;
}
.base-link-outer {
display: block;
position: relative;
width: var(--baseLink);
height: 0;
padding-bottom: 100%;
background: transparent url(../img/artwork-guide.svg) no-repeat right bottom;
background-size: contain;
transition: transform 0.2s ease-out;
}
.base-link-outer:hover {
transform: rotate(-40deg);
transform-origin: center;
}
.base-link-outer.artwork { background-image: url(../img/artwork-guide.svg); }
.base-link-outer.glos { background-image: url(../img/glossary.svg); }
.base-link-outer.vid { background-image: url(../img/video.svg); }
.base-link-outer.nov { background-image: url(../img/novice.svg); }
.base-link-outer.vinyl { background-image: url(../img/vinyl-cd-dvd.svg); }
.base-link-outer.text-images { background-image: url(../img/text-images.svg); }
.base-link-outer.nov { background-image: url(../img/novice.svg); }
.base-link-inner {
position: absolute;
inset: 15%;
border: solid #fff 28px;
border-radius: 50%;
border-width: 1.7vw;
overflow: hidden;
transition: border-color 1s ease-out, transform 0.2s ease-out;
}
.base-link-outer:hover .base-link-inner {
transform: rotate(40deg);
transform-origin: center;
border-color: #858585;
}
.base-link-inner > img {
width: 100%;
height: 100%;
object-fit: cover
}
*/
/* ----------------------------------- */
/* Branding Page
-------------------------------------------------- */
.flexi-img {
}
.branding-margin {
padding-bottom: 1rem;
border-bottom: solid #000000 4px;
margin-bottom: 2rem;
}
.logo-pack {
display: inline-block;
padding: 10px 0 10px 40px;
background: transparent url(../img/zip-folder_950x950.svg) no-repeat left center;
background-size: 28.5px 28.5px;
}
/* GLOSARY
--------------------------------------------------------- */
:root { --alphabet-height: 76px; }
.gloss {
/* Adjust padding to create space for navbar plus aphabet */
padding-top: calc(var(--navbar-height) + var(--alphabet-height) + 2rem);
}
.alphabet {
background: #000000;
color: #ffffff;
position: absolute;
top: calc(100vh - var(--navbar-height));
}
.alphabet.fix {
position: fixed;
top: var(--navbar-height);
z-index: 999;
}
ul.alphabet-list {
margin: 0;
padding: 1vw 0;
}
ul.alphabet-list li {
text-transform: uppercase;
display: inline-block;
width: calc(99%/24);
text-align: center;
font-weight: 900;
font-size: 2rem;
}
ul.alphabet-list li a, ul.alphabet-list li a:hover, ul.alphabet-list li a:visited, ul.alphabet-list li a:active {
text-decoration: none;
}
p.big-letter{
color: #858585;
font-size: 25vw;
line-height: 1;
font-weight: 900;
text-align: center;
}
dl > li {
margin-bottom: 1rem;
}
@media (max-width: 677px) {
ul.alphabet-list li {
width: calc(99%/12);
}
:root { --alphabet-height: 85px; }
} /* /.@media */
@media (max-width: 1056px) {
ul.alphabet-list li {
font-size: 1.5rem;
}
:root { --alphabet-height: 50px; }
} /* /.@media */
@media (max-width: 991px) {
p.big-letter {
display:none;
}
} /* /.@media */
/* Footer
-------------------------------------------------- */
@media (max-width: 1199px) {
.projects-menu-mini {
border-top: 3rem solid #000000;
}
} /* /@media */
/* 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%;
}
/* We need to repeat the bg styles to achieve instagram gradient background */
/* ul.social-list li.instagram a:hover {
background: #d6249f;
background: url(../img/social-icons-wht_48x480.svg), radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
background-position: 0 0, 0 0;
background-repeat: no-repeat, no-repeat;
background-size: 360px 36px, 100% 100%;
} */
/*
ul.social-list li.linkedin a:hover { background-color: #0077B5; }
ul.social-list li.pinterest a:hover { background-color: #BD081C; }
ul.social-list li.twitter a:hover { background-color: #1DA1F2; }
ul.social-list li.youTube a:hover { background-color: #FF0000; }
ul.social-list li.facebook a:hover { background-color: #1877F2; }
*/
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;}
ul.footer-nav {
padding: 0;
list-style: none;
list-style-position: inside;
}
ul.footer-nav > li > a, ul.footer-nav > li > a:hover { text-decoration: none; }
ul.footer-nav > li > a:hover { color: #858585; }
@media (max-width: 459px) {
ul.social-list li {
margin: 0;
}
} /* /@media */
/*
a.bcorp, a.eoa, a.lwe, a.gbc {
display: inline-block;
text-align: left;
width: 128px;
height: 128px;
background: transparent url(..img/lw-employer-logo_1024x1024.png) no-repeat center center;
background-size: 128px 128px;
text-indent: -9999px;
}
*/
a.eoa {
display: inline-block;
text-align: left;
width: 182px;
height: 128px;
background: transparent url(../img/eoa-logo-wht_510x216.svg) no-repeat left center;
background-size: auto 76px;
text-indent: -9999px;
}
a.bcorp {
display: inline-block;
text-align: left;
width: 86px;
height: 128px;
background: transparent url(../img/b-corp-logo-wht-128x216.svg) no-repeat center center;
background-size: auto 108px;
text-indent: -9999px;
margin: 0 60px;
}
a.gbc {
display: inline-block;
text-align: left;
width: 92px;
height: 128px;
background: transparent url(../img/gbc-accredited-wht_256x256.svg) no-repeat right center;
background-size: 90px 90px;
text-indent: -9999px;
}
/*
a.lwe {
background-image: url(../img/lwe-logo_1024x1024.png);
margin-left: 1.2rem;
}
*/
@media (max-width: 540px) {
a.eoa, a.bcorp, a.gbc {
width: 90%;
height: 128px;
background-position: left center;
margin: 0;
}
}
@media (max-width: 991px) {
a.bcorp { width: 64px; }
a.gbc { margin-left: 0; }
}
@media (max-width: 1399px) {
.accred {
flex-direction: row-reverse; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
.accred {
flex: 0 0 100%;
max-width: 100%;
}
}
@media (min-width: 1400px) {
.accred {
text-align: right !important;
-ms-flex-order: 13;
order: 13;
}
}
/* -- RECRUITMENT --------------------------------------------------------------------- */
.recruit-splash {
position: relative;
overflow: hidden;
}
a.lwe {
display: inline-block;
text-align: left;
width: 128px;
height: 128px;
background: transparent url(../img/lwe-logo_760x760.png) no-repeat left center;
background-size: 128px 128px;
text-indent: -9999px;
}
.recruit-image {
height: 100%;
width: 100%;
}
.recruit-image > img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (min-width: 1200px) {
.recruit .splash h1.display, .type-heading h2.display {
font-size: 4.6vw;
}
} /* /@media */
.ticker-container {
display: block;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
.benefits {
background-color: #2b152b;
padding-bottom: calc(var(--squareHeight) * 1%);
height: 0;
}
.benefits > .cover {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 2rem;
}
.benefits > .cover > p, .benefits > .cover > span {
text-align: center;
line-height: 1.1;
}
.benefits > .cover > span {
font-weight: 700;
font-size: calc(var(--squareHeight) * 0.1vw);
letter-spacing: 0.05em;
line-height: 1;
margin-bottom: 1rem;
width: 100%;
}
@media (max-width: 467px) {
.benefits {
padding: 0;
height: auto;
}
.benefits > .cover {
display: block;
position: relative;
text-align: center;
padding: 1rem 1rem 0 1rem;
height: auto;
}
.benefits > .cover > span {
font-size: calc(var(--squareHeight) * 0.2vw);
margin-bottom: 0.5rem;
}
} /* @media */
.benefits:nth-child(1) { background-color: #2b152b; }
.benefits:nth-child(2) { background-color: #78341d; }
.benefits:nth-child(3) { background-color: #693d84; }
.benefits:nth-child(4) { background-color: #585720; }
.benefits:nth-child(5) { background-color: #35509b; }
.benefits:nth-child(6) { background-color: #487945; }
.benefits:nth-child(7) { background-color: #c35845; }
.benefits:nth-child(8) { background-color: #2d4121; }
.benefits:nth-child(9) { background-color: #be3435; }
.benefits:nth-child(10) { background-color: #5d202a; }
.benefits:nth-child(11) { background-color: #cd6c25; }
.benefits:nth-child(12) { background-color: #467f9f; }
.benefits:nth-child(1n+12) { background-color: #2b152b; }
.benefits:nth-child(2n+12) { background-color: #78341d; }
.benefits:nth-child(3n+12) { background-color: #693d84; }
.benefits:nth-child(4n+12) { background-color: #585720; }
.benefits:nth-child(5n+12) { background-color: #35509b; }
.benefits:nth-child(6n+12) { background-color: #487945; }
.benefits:nth-child(7n+12) { background-color: #c35845; }
.benefits:nth-child(8n+12) { background-color: #2d4121; }
.benefits:nth-child(9n+12) { background-color: #be3435; }
.benefits:nth-child(10n+12) { background-color: #5d202a; }
.benefits:nth-child(11n+12) { background-color: #cd6c25; }
.benefits:nth-child(12n+12) { background-color: #467f9f; }
.position {
padding-bottom: 1rem;
}
.position-title {
cursor: pointer;
}
.position-title > h3:after {
content: "";
display: inline-block;
width: 36px;
height:36px;
background: transparent url(../img/arrow-dre-blk_24x16.svg) no-repeat right bottom;
background-size: 24px 16px;
}
.position-title > p.lead {
margin-bottom: 0 !important; /* gets rid of jolt casued by height recalculation */
}
.position-detail {
padding-top: 1rem;
border-bottom: 2px solid #858585;
}
/* Customise the height transition */
.collapsing {
transition: height 1s ease;
}
/* -- PARTNERS
--------------------------------------------------------------------- */
.party {
display: inline-block;
color: #858585;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1;
text-transform: uppercase;
padding-bottom: 1rem;
margin-top: 0;
}
@media (min-width: 1200px) {
.party {
font-size: 1.25rem;
padding-bottom: 1.25rem;
}
}
.alter:nth-of-type(odd) {
color: #ffffff;
background-color: #000000;
}
@media (min-width: 992px) {
.alter:nth-of-type(even) div:nth-child(1) {
-ms-flex-order: 2;
order: 2;
}
.alter:nth-of-type(even) div:nth-child(2) {
-ms-flex-order: 1;
order: 1;
}
.col-16x9 > .col-lg-5, .col-16x9 > .col-lg-7 { min-height: 28.125vw; }
} /* /@media */
/* Single Column Widths */
@media ( max-width: 991px) {
.col-16x9 > .col-lg-5 { min-height: 56.25vw; }
} /* /@media */
/* Reverse Out arrow buttons - This taken from line 2673 */
.alter:nth-of-type(odd) .arrw { color: #ffffff; }
.alter:nth-of-type(odd) .arrw::before, .alter:nth-of-type(odd) .arrw::after { background: transparent url(../img/arrow-dre-wht_24x16.svg) no-repeat right center; background-size: 12px 8px; }
.alter:nth-of-type(odd) .under { background-color: #ffffff; }
.alter:nth-of-type(odd) .under::before { background-color: #000000; }
@media (min-width: 1200px) { .alter:nth-of-type(odd) .arrw::before, .alter:nth-of-type(odd) .arrw::after { background-size: 18px 12px;} }
/* -- 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;
}
}
/* -- SMART OVERIDES ----------------------------------------------- */
/* -- Case Study ALPHA WOLF ----------------------------------------------- */
.cs-ratio-16x9 {
position: relative;
display: block;
width: 100%;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
}
.cs-ratio-30x9 {
position: relative;
display: block;
width: 100%;
height: 0;
padding-bottom: 30%;
overflow: hidden;
}
.cs-ratio-16x9 > img {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
object-fit: cover;
}
/* ORGANISATION TREE */
/* -- GENERAL STYLES FOR KEY ORGANISATION ----------------------------------------------- */
.key-tree {
letter-spacing: 0; /* Reset letter spacing */
color: #ffffff;
background-color: #000000;
/* Variables */
/* --divisions: 7.1%; */ /* 14 columns */
/* --divisions: 6.666%; */ /* 15 columns */
--divisions: 6.25%; /* 16 columns */
--modotone: #00AE42;
--keytone: #eb008b;
--piastone: #652d90;
--grouptone: #f6931e;
--breedtone: #2FAADE;
--tttone: #FBED23;
--linetone: #858585;
--grey777: #777777;
--greymid: #333333;
--smttm: #141414;
}
/* -- STYLES FOR KEY TREE DIAGRAM ----------------------------------------------- */
@media (min-width: 640px) {
.key-tree {
font-size: 0.8rem;
position: relative;
text-align: center;
}
.crumble {
position: absolute;
top: calc((21vw * 0.5625) - 58px);
}
/* custom row for each generation */
.generation {
margin: 0; /*remove BS4 negative margins */
padding: 2rem 0; /* 0.5% padding to compensate for 15 cols of 6.6 */
}
.gen-a > .col, .gen-b > .col, .gen-c > .col, .gen-d > .col, .gen-e > .col, .gen-f > .col {
-ms-flex: 0 0 var(--divisions);
flex: 0 0 var(--divisions);
max-width: var(--divisions);
width: var(--divisions);
}
/* Senior management & Team managers */
.gen-c, .gen-e {
position: relative;
}
.gen-b {
padding-top: 2rem;
padding-bottom: 2rem;
}
.gen-c {
padding-bottom: 1rem;
}
.generation > .col {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
padding-right: 0;
padding-left: 0;
}
/* offset positions */
.col.karen { margin-left: calc(var(--divisions) * 7.5 ); }
.col.robyn { margin-left: calc(var(--divisions) * 3 ); }
.col.coo { margin-left: calc(var(--divisions) * 7 ); }
.col.cfo { margin-left: calc(var(--divisions) * 5 ); }
.col.tim { margin-left: calc(var(--divisions) * 0.5 ); }
.col.john { margin-left: calc(var(--divisions) * 1 ); }
.col.sue { margin-left: calc(var(--divisions) * 1.5 ); }
.col.paul { margin-left: calc(var(--divisions) * 2 ); }
.col.lisa { margin-left: calc(var(--divisions) * 1 ); }
.col.michelle { margin-left: calc(var(--divisions) * 1 ); }
.col.matt { margin-left: calc(var(--divisions) * 1 ); }
/* .op20 { opacity: 0.2; } */
.staff {
display: flex;
box-sizing: border-box;
position: relative;
align-items: center;
justify-content: center;
width: 64px;
height:64px;
border-radius: 32px;
border: solid 4px #858585;
border-color: var(--grouptone);
/* background-color: #ffffff; */
z-index: 10;
transition: border-color 1.6s, background-color 1.6s;
}
.robyn > .staff {
transform: translateY(-64px);
}
/* .gen-e > .col {
flex-direction: column;
align-items: center;
}*/
/* Create centre point to attach svg lines to. */
.point {
position: absolute;
top: 27px;
left: 27px;
display: block;
width: 2px;
height: 2px;
z-index: 11;
background-color: transparent;
}
.name {
overflow: hidden;
align-content: center;
z-index: 12;
opacity: 1;
transition: opacity 1.6s;
}
.post {
font-weight: 700;
text-transform: uppercase;
overflow: visible;
display: block;
opacity: 1;
transition: opacity 1.6s;
}
.nom { display: none; } /* Special use case for Mike */
.group .staff { border-color: var(--grouptone); }
.key .staff { border-color: var(--keytone); }
.pias .staff { border-color: var(--piastone); }
.breed .staff { border-color: var(--breedtone); }
.modo .staff { border-color: var(--modotone); }
.tt .staff { border-color: var(--tttone); }
.node {
display: flex;
box-sizing: border-box;
position: relative;
border: none;
background-color: var(--linetone);
width: 32px;
height:32px;
border-radius: 16px;
}
.node > .point {
position: absolute;
top: 15px;
left: 15px;
display: block;
width: 2px;
height: 2px;
background-color: var(--linetone);
}
.staff { background-color: #ffffff; }
.staff.headless { background-color: var(--smttm); }
.blob {
display: flex;
box-sizing: border-box;
position: relative;
align-items: center;
justify-content: center;
border-width: 4px;
border-style: solid;
width: 24px;
height:24px;
/* font-size: 80%; */
margin: 6px 0;
border-radius: 12px;
z-index: 10;
overflow: hidden;
cursor: default;
transition: width 0.4s, color 0.4s, background-color 0.4s, border-color 0.4s;
transition-timing-function: ease-in;
}
.group .blob { background-color: var(--grouptone); border-color: var(--grouptone); color: var(--grouptone); }
.key .blob { background-color: var(--keytone); border-color: var(--keytone); color: var(--keytone);}
.pias .blob { background-color: var(--piastone); border-color: var(--piastone); color: var(--piastone);}
.breed .blob { background-color: var(--breedtone); border-color: var(--breedtone); color: var(--breedtone);}
.modo .blob { background-color: var(--modotone); border-color: var(--modotone); color: var(--modotone);}
.tt .blob { background-color: var(--tttone); border-color: var(--tttone); color: var(--tttone);}
/* Set space above first blob */
.blob:nth-child(2) { margin-top: 32px; }
.blob.trans:nth-child(1) { margin-top: 32px; }
.blob.trans:nth-child(2) { margin-top: 6px; }
/* Centre sales staff between columns */
.trans-right {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
left: 0;
top: 64px; /* Equal to staff circle diameter */
width: 200%;
}
.blob:hover {
background-color: #ffffff;
width: 64px;
color: #000;
z-index: 20;
}
/* make sure svg lines are behind */
.leader-line { z-index: 5; }
/* BLOB ANIMATION */
.blob {
--bulgeDelay: 4.2s;
--bulgeInterval: 0.3s;
--bulgeDuration: 0.6s;
}
.group .blob { animation-name: bulgeGroup; animation-duration: var(--bulgeDuration); animation-timing-function: ease-in; animation-iteration-count: 1; }
.key .blob { animation-name: bulgeKey; animation-duration: var(--bulgeDuration); animation-timing-function: ease-in; animation-iteration-count: 1; }
.pias .blob { animation-name: bulgePias; animation-duration: var(--bulgeDuration); animation-timing-function: ease-in; animation-iteration-count: 1; }
.breed .blob { animation-name:bulgeBreed; animation-duration: var(--bulgeDuration); animation-timing-function: ease-in; animation-iteration-count: 1; }
.modo .blob { animation-name: bulgeModo; animation-duration: var(--bulgeDuration); animation-timing-function: ease-in; animation-iteration-count: 1; }
.tt .blob { animation-name: bulgeTt; animation-duration: var(--bulgeDuration); animation-timing-function: ease-in; animation-iteration-count: 1; }
/* .blob:nth-child(1) { animation-delay: var(--bulgeDelay); } */
.blob:nth-child(2) { animation-delay: var(--bulgeDelay); }
.blob:nth-child(3) { animation-delay: calc( var(--bulgeDelay) + var(--bulgeInterval) ); }
.blob:nth-child(4) { animation-delay: calc( var(--bulgeDelay) + (2 * var(--bulgeInterval)) ); }
.blob:nth-child(5) { animation-delay: calc( var(--bulgeDelay) + (3 * var(--bulgeInterval)) ); }
.blob:nth-child(6) { animation-delay: calc( var(--bulgeDelay) + (4 * var(--bulgeInterval)) ); }
.blob:nth-child(7) { animation-delay: calc( var(--bulgeDelay) + (5 * var(--bulgeInterval)) ); }
/* Special case for sales blobs */
.trans-right .blob:nth-child(1) { animation-delay: var(--bulgeDelay); }
.trans-right .blob:nth-child(2) { animation-delay: calc( var(--bulgeDelay) + var(--bulgeInterval) ); }
@keyframes bulgeGroup {
0% { width: 24px; background-color: var(--grouptone); border-color: var(--grouptone); color: var(--grouptone); }
50% { width: 64px; background-color: #FFFFFF; color: #000; }
100% { width: 24px; background-color: var(--grouptone); border-color: var(--grouptone); color: var(--grouptone); }
}
@keyframes bulgeKey {
0% { width: 24px; background-color: var(--keytone); border-color: var(--keytone); color: var(--keytone); }
50% { width: 64px; background-color: #FFFFFF; color: #000; }
100% { width: 24px; background-color: var(--keytone); border-color: var(--keytone); color: var(--keytone); }
}
@keyframes bulgePias {
0% { width: 24px; background-color: var(--piastone); border-color: var(--piastone); color: var(--piastone); }
50% { width: 64px; background-color: #FFFFFF; color: #000; }
100% { width: 24px; background-color: var(--piastone); border-color: var(--piastone); color: var(--piastone); }
}
@keyframes bulgeBreed {
0% { width: 24px; background-color: var(--breedtone); border-color: var(--breedtone); color: var(--breedtone); }
50% { width: 64px; background-color: #FFFFFF; color: #000; }
100% { width: 24px; background-color: var(--breedtone); border-color: var(--breedtone); color: var(--breedtone); }
}
@keyframes bulgeModo {
0% { width: 24px; background-color: var(--modotone); border-color: var(--modotone); color: var(--modotone);}
50% { width: 64px; background-color: #FFFFFF; color: #000; }
100% { width: 24px; background-color: var(--modotone); border-color: var(--modotone); color: var(--modotone);}
}
@keyframes bulgeTt {
0% { width: 24px; background-color: var(--tttone); border-color: var(--tttone); color: var(--tttone); }
50% { width: 64px; background-color: #FFFFFF; color: #000; }
100% { width: 24px; background-color: var(--tttone); border-color: var(--tttone); color: var(--tttone); }
}
} /* /. @media ============================================================= */
/* ---- FULL DISPLAY ABOVE 1280PX ------------------------------------- */
@media (min-width: 1520px) {
/* Senior management & Team managers */
.gen-b {
background: linear-gradient(0deg, var(--smttm) 0px 64px, var(--smttm) 64px) ;
}
.gen-c {
position: relative;
background-color: var(--smttm);
}
.gen-e {
position: relative;
background: linear-gradient( var(--smttm) 0px 112px, #000000 112px) ;
}
.staff .name { color: #000000; }
.post {
position: absolute;
color: #ffffff;
font-size: 110%;
opacity: 1;
transition: opacity 0.4s;
}
.post.level {
width: 200px;
text-align: center;
top: 0;
transform: translate(0, -28px);
}
.post.level.up {
transform: translate(0, -50px);
}
.post.level.wide {
width: 300px;
}
.post.angle {
width: 200px;
text-align: left;
top: 0;
left: 0;
transform: rotate(-45deg) translate(-21px, -14px);
transform-origin: top left;
}
.post > span { padding: 0 2px; background-color: #000000; }
.smt, .tm {
position: absolute;
text-transform: uppercase;
left: -10px;
transform: rotate(-90deg);
transform-origin: bottom left;
}
.smt { bottom: 0; }
.tm { top: 96px; }
} /* /@media ============================================ */
/* -- WITHOUT TEXT FOR MEDIUM SCREENS ---------------------------------------------- */
@media (min-width: 640px) and (max-width: 1519px) {
.smt, .tm {
display: block;
width: 200px;
position: absolute;
text-transform: uppercase;
top: 5px;
left: calc(50% - 100px) ;
z-index: 15;
}
.smt > span, .tm > span { background-color: var(--smttm); }
/* Senior management & Team managers */
.gen-c {
position: relative;
background: linear-gradient( var(--smttm) 0px 80px, rgba(0,0,0,1) 80px) ;
}
.gen-e {
position: relative;
background: linear-gradient( var(--smttm) 0px 80px, rgba(0,0,0,1) 80px) ;
}
.gen-d {
padding: 0;
}
.spacer {
display: block;
height: 32px;
}
.staff {
display: flex;
flex-direction: column-reverse;
box-sizing: border-box;
position: relative;
align-items: center;
justify-content: center;
width: 32px;
height:32px;
border-radius: 16px;
border: solid 1px var(--grouptone);
background-color: var(--grouptone);
color: var(--grouptone);
z-index: 10;
overflow: hidden;
cursor: default;
transition: transform 0.5s;
}
.group > .staff { background-color: var(--grouptone); color: var(--grouptone); }
.key > .staff { background-color: var(--keytone); color: var(--keytone);}
.pias > .staff { background-color: var(--piastone); color: var(--piastone);}
.breed > .staff { background-color: var(--breedtone); color: var(--breedtone);}
.modo > .staff { background-color: var(--modotone); color: var(--modotone);}
.tt > .staff { background-color: var(--tttone); color: var(--tttone);}
.staff:hover {
transform: scale(3);
transform-origin: center center;
color: #000000;
background-color: #ffffff;
z-index: 20;
}
.staff .name {
font-size: 25%;
}
.post.level, .post.angle {
position: relative;
width: 100%;
text-align: center;
line-height: 1.2;
font-size: 25%;
/* color: #000000; */
}
.post span { background-color: transparent; }
/* Create centre point to attach svg lines to. */
.point {
position: absolute;
top: 15px;
left: 15px;
}
} /* /@media ========================================================== */
/* -- Grey settings transition ------------- */
@media (min-width: 640px) {
.grey .staff {
border-color: var(--greymid);
background-color: var(--greymid);
}
.grey .post, .grey .name {
opacity: 0;
}
.grey .blob {
border-color: var(--greymid);
background-color: var(--greymid);
color: var(--greymid);
}
/* LEGEND */
div.legend {
text-align: right;
position: absolute;
width: 300px;
top: 0;
right: 0;
}
ul.legend {
font-weight: 700;
text-transform: uppercase;
font-size: 80%;
list-style-type: none;
}
ul.legend li { color: var(--linetone); }
ul.legend li:after {
content: " ";
display: inline-block;
width: 10px;
height: 10px;
border-radius: 5px;
margin-top: 2px;
margin-left: 8px;
}
li.group:after { background-color: var(--grouptone); }
li.key:after { background-color: var(--keytone);}
li.pias:after { background-color: var(--piastone);}
li.tt:after { background-color: var(--tttone);}
li.breed:after { background-color: var(--breedtone);}
li.modo:after { background-color: var(--modotone); }
} /* /@media ============================================================== */
/* ALL SETTINGS FOR SMALL SCREENS ---------------------- */
@media (max-width: 639px) {
.key-tree {
/* font-size: 0.8rem; */
}
.spacer {
display: block;
height: 1px;
}
.leader-line {
display: none;
z-index: -5;
}
/* .coo { display: none; } */
.point { display: none; }
.row.generation {
display: block;
margin: 0;
padding: 0 0 16px 0;
}
.row.gen-a {padding-bottom: 0;}
.row.gen-b {padding-bottom: 32px;}
.staff {
display: block;
}
.staff.headless {
}
.smt, .tm {
text-transform: uppercase;
font-style: italic;
padding-bottom: 10px;
}
.tm span { display: none; }
.tm:before {
content: "Teams";
}
.col {
width: 100%;
padding: 0;
}
.gen-a .col, .gen-b .col {
border-left: solid 2px var(--grouptone);
padding-left: 8px;
margin-top: 16px;
}
.gen-c .col {
border-left: solid 2px var(--grouptone);
padding-left: 8px;
margin-bottom: 8px;
}
.gen-e > .col {
padding-left: 8px;
margin-bottom: 16px;
}
.post {
display: inline-block;
font-weight: 700;
float: left;
}
.name {
display: inline-block;
padding-left: 8px;
}
/* Add dummy name to force height for headless col */
.staff.headless:after {
content: " " ;
padding-left: 16px;
}
.blob {
display: inline-block;
font-size: 80%;
}
.blob .name span:after { content: ",";}
.gen-e .col {border-left: solid 2px #ffffff; }
.gen-e .group { border-color: var(--grouptone); }
.gen-e .key { border-color: var(--keytone);}
.gen-e .pias { border-color: var(--piastone);}
.gen-e .tt { border-color: var(--tttone);}
.gen-e .breed { border-color: var(--breedtone);}
.gen-e .modo { border-color: var(--modotone); }
.staff > .name:before {
content: " ";
display: inline-block;
width: 8px;
height: 2px;
margin-right: 8px;
margin-bottom: 2px;
}
.group > .staff > .name:before { background-color: var(--grouptone); }
.key > .staff > .name:before { background-color: var(--keytone); }
.pias > .staff > .name:before { background-color: var(--piastone); }
.breed > .staff > .name:before { background-color: var(--breedtone); }
.modo > .staff > .name:before { background-color: var(--modotone); }
.tt > .staff > .name:before { background-color: var(--tttone); }
/* Special cae for Mike */
.sales2 {display: none; }
.staff > .nom {
display: inline-block;
padding-left: 8px;
}
.staff > .nom:before {
content: " ";
display: inline-block;
width: 8px;
height: 2px;
margin-right: 8px;
margin-bottom: 2px;
background-color: var(--keytone);
}
/* MOBILE LEGEND */
div.legend {
}
ul.legend {
font-weight: 700;
text-transform: uppercase;
font-size: 80%;
list-style-type: none;
padding-left: 0;
}
ul.legend li { color: var(--linetone); }
ul.legend li:before {
content: " ";
display: inline-block;
width: 10px;
height: 10px;
border-radius: 5px;
margin-top: 2px;
margin-right: 12px;
}
li.group:before { background-color: var(--grouptone); }
li.key:before { background-color: var(--keytone);}
li.pias:before { background-color: var(--piastone);}
li.tt:before { background-color: var(--tttone);}
li.breed:before { background-color: var(--breedtone);}
li.modo:before { background-color: var(--modotone); }
} /* /@media =========================================== */
/* NEW SUSTAINABILITY PAGEs
----------------------------------------------------------------------------------------- */
/* variables for icon padding */
body#sustainability, body#sustainable {
--liteGrn: 2.9vw;
--bigBlk: 3.9vw;
--gPad: 6vw;
--gPad: 8vw;
}
/* required due to Smooth Scroll div */
body.sustainability, body.sustainable {
padding-top: 0px;
}
.suss-splash {
margin-top: var(--navbar-height);
position: relative;
overflow: hidden;
}
.suss-splash::after {
position: absolute;
left: calc(7vw * 0.5625);
bottom: 10px;
color: #ffffff;
font-size: 0.75rem;
content: "IMAGE\25B8 Vinyl offcuts and unused pucks can be reground to create eco-mix vinyl.";
background-color: rgba(0,0,0,0.5);
z-index: 101;
}
.fw-900 { font-weight: 900; }
.g-section {
/* margin-top: calc(var(--padUnit) * 2); */
margin-top: var(--padUnit);
}
/* create space at the bottom of each section */
.g-text {
/* padding-bottom: var(--padUnit); */
}
/* typography */
/*
Extra small <576px
Small ≥576px
Medium ≥768px
Large ≥992px
Extra large ≥1200px
*/
.g-section h3 {
font-size: 1.75rem;
}
/* LITE GREEN */
p.big-q, h3.big-q {
color: #00ae42;
/* font-size: 3.2vw; */
font-size: var(--liteGrn);
font-weight: 200;
line-height: 1;
}
/* BIG BLACK */
p.big-a, h3.big-a {
/* font-size: 5.8vw; */
font-size: var(--bigBlk);
font-weight: 700;
line-height: 1;
}
.row.green-bar {
margin-right: calc(var(--padUnit) * -1);
margin-left: calc(var(--padUnit) * -1);
}
.green-bar > * {
padding-right: 0;
padding-left: 0;
}
.green-bar h2 {
margin-top: var(--padUnit);
margin-bottom: var(--padUnit);
margin-bottom: 0;
color: #fff;
background-color: var(--modo-green);
padding: 1rem var(--padUnit) 0.75rem var(--padUnit);
}
/* link */
a.more-detail {
display: inline-block;
text-indent: -9999px;
width: 128px;
height: 32px;
width: 175px;
height: 40px;
background: transparent url(../img/find-out-more.png) no-repeat center center;
background-size: contain;
/* margin-bottom: 5rem; */
margin-bottom: calc(var(--padUnit) * 0.5);
}
.inline-icon {
display: inline-block;
}
.pledge-list {
font-size: 1.25rem;
}
.green-sus {
color: var(--modo-green);
}
/* van animation */
.icon-wrap {
position: relative;
display: flex;
justify-content: space-between;
width: 100%;
}
.van-wrap { transform: translateX(-110%);}
.van-box {
display: block;
width: 20%;
height: 0px;
padding-bottom: 20%;
background: #ffffff url(../img/icon-lorry.svg) no-repeat center center;
background-size: cover;
}
.van-cross {
content: "";
position: absolute;
top: 0px;
right: 0px;
display: block;
width: 20%;
height: 0px;
padding-bottom: 20%;
background: transparent url(../img/icon-green-cross.svg) no-repeat center center;
background-size: cover;
z-index: 101;
opacity: 0;
}
.van-fade {
content: "";
position: absolute;
top: 0px;
right: 0;
display: block;
width: 20%;
height: 0px;
padding-bottom: 20%;
background: transparent url(../img/icon-lorry-cross.svg) no-repeat center center;
background-size: cover;
z-index: 102;
opacity: 0;
}
/* large images */
.g-wrap {
display: block;
position: relative;
width: 100%;
padding-bottom: calc(100% - (var(--gPad) * 2));
height: 0;
}
.g-wrap .g-inner, .g-wrap > img, .g-wrap .p-inner {
position: absolute;
inset: 0 var(--gPad);
overflow: hidden;
}
.g-wrap > .g-inner > img {
position: absolute;
width: 100%;
height: auto;
top: 0;
left: 0;
}
.p-inner img {
width: 100%;
object-fit: cover;
}
/* Set start conditions for vinyl */
#vinyl-start { transform: rotate(90); transform-origin: center; }
#vinyl-slice {opacity: 0; z-index: 102; }
#vinyl-rotate { opacity: 0; z-index: 103; }
#vinyl-green { opacity: 0; z-index: 101; }
.g-wrap .sleeve-inner {
position: absolute;
inset: 0 var(--gPad);
}
/* Set start conditions for sleeves */
#sleeve-vinyl { transform: translateX(150%); transform-origin: center; z-index: 100; }
#sleeve-two {opacity: 1; z-index: 101; }
#sleeve-one { opacity: 1; z-index: 102; }
#sleeve { opacity: 1; z-index: 103; }
#pucks {
transform-origin: center;
z-index: 101;
}
#ecomix {
transform-origin: center;
opacity: 0;
z-index: 102;
transform-origin: center;
}
.g-logo {
position: relative;
width: 100%;
padding: 0 calc(var(--gPad) * 1.5);
}
.g-logo img {
width: 100%;
/* max-width: 300px; */
height: auto;
}
/* photo credit */
.sustainable .sustain-splash::after {
position: absolute;
left: calc(7vw * 0.5625);
bottom: 10px;
color: #ffffff;
font-size: 0.75rem;
content: "IMAGE: Offcuts and unused vinyl pucks ready to create eco-mix vinyl";
}
/* variables for icon padding
body#sustainable {
--liteGrn: 3.2vw;
--bigBlk: 5.8vw;
--gPad: 5vw;
} */
/* INDIVIDUAL OVERIDES LANDSCAPE */
/* Everything with two column layout from 768 */
@media (min-width: 768px) {
#biochemWrap { padding-top: calc(var(--padUnit) * 2); }
#bioG { margin-top: 0; }
} /* /@media */
@media (min-width: 600px) and (max-width: 767px) {
body#sustainable {
--gPad: 20vw;
}
.g-logo {
position: relative;
display: flex;
justify-content: space-between;
padding: 0 ;
}
.g-logo img {
width: 25%;
}
} /* /@media */
@media (min-width: 1500px) {
body#sustainable {
--gPad: calc(12vw - 90px); /* At 1500 1vw = 15px 6vw = 90px = (12vw - 90px) */
--gPad: calc(14vw - 90px); /* (14vw - 90px) */
}
h3.standard { font-size: 1.75vw; }
} /* /@media */
@media (max-width: 767px) {
/* These double when we go to single column */
p.big-q, h3.big-q { font-size: 6.4vw; } /* BIG green */
p.big-a, h3.big-a { font-size: 11.6vw; } /* BIG BLACK */
.green-bar h2 { font-size: 1.2rem; }
a.more-detail {
width: 128px;
height: 32px;
margin-bottom: 2rem;
}
.g-text {
padding-bottom: 2rem;
/* min-height: 80vh; */
}
} /* /@media */
@media (max-width: 599px) {
.g-logo {
padding: 0 calc(var(--gPad) * 2.4);
}
} /* /@media */
@media (orientation: portrait) {
a.more-detail {
margin-bottom: 2rem;
}
.g-section {
margin-top: var(--padUnit);
}
/* create space at the bottom of each section */
.g-text {
padding-bottom: var(--padUnit);
}
} /* /@media */