:root {
--teamc-blue: #0d346f;
--teamc-red: #ed282f;
--chat-green: #00ab04;
--chat-orange: orange;
--teamc-black: #111;
--teamc-white: #efefef;
--teamc-grey: rgb(50, 50, 50);
--trans: 0.1s;
--nav-height: 65px;
--message-height: auto;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif sans-serif;
font-size: clamp(0.1vw, .4vw + .7rem, 1.5rem);
padding: 0;
margin: 0;
background-color: #fff;
color: var(--teamc-grey);
overflow-x: hidden;
}
body.home {
background-image: linear-gradient(180deg, var(--teamc-blue) 200px, var(--teamc-black) 30%, var(--teamc-blue) 90%);
color: var(--teamc-white);
overflow-x: hidden;
}
.full-width-template {
max-width: 100% !important;
width: 100%;
padding: 0;
margin: 0;
}
.full-width-template .entry-content {
max-width: 100% !important;
padding: 0;
}
.homeIntro {
background-color: #fff;
color: var(--teamc-grey);
margin: 0;
}
.homeIntro .entry-content {
max-width: 100%;
width: 100%;
margin-inline: auto;
padding: 1em 0 1.5em;
margin-top: 0;
}
.wp-block-group__inner-container {
max-width: 1200px;
margin: 0 auto;
}
.section {
width: 100%;
padding: 60px 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.section.full-width {
padding-left: 0;
padding-right: 0;
}
.page {
margin: 0;
}
.fullscreen {
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
transition: 0.3s;
z-index: 10000;
}
.fullscreen:before {
content: "\f065";
font-family: "fontawesome";
}
.fullscreen.active:before {
content: "\f066";
}
.nomargin {
margin: 0;
}
.gone {
opacity: 0;
}
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}
h1 {
margin-top: 0;
font-size: 3em;
font-weight: 600;
line-height: 1.1em;
}
h2:not(:first-child) {
font-size: 2em;
font-weight: 600;
margin: 1.5em 0 0.25em;
}
.ilb {
display: inline-block;
}
.wp-block-column p:first-child {
margin-top: 0;
}
#primary ul {
margin: 0;
padding: 0 1.5em;
line-height: 1.2em;
list-style: none;
}
#primary .whitelift ul {
font-weight: 600;
font-size: 1.2em;
}
#primary ol {
margin: 0;
padding: 0;
counter-reset: count;
list-style: none;
}
#primary ol li {
position: relative;
padding-left: 53px;
margin-bottom: 1.5em;
}
#primary ol li:before {
counter-increment: count;
content: counter(count);
position: absolute;
left: 0;
top: -5px;
background-color: var(--teamc-red);
color: var(--teamc-white);
padding: 5px 10px;
margin-right: 15px;
border-radius: 5px;
}
#primary ol li ol {
margin-top: 1em;
}
#primary ol li ol li:before {
background-color: rgba(255,255,255,0.3);
}
#primary ul {
list-style: none;
}
#primary ul li {
position: relative;
margin-bottom: 0.75em;
}
#primary ul li:before {
content: '';
position: absolute;
background-color: var(--teamc-red);
width: 0.7em;
height: 0.7em;
left: -1.5em;
top: 0.2em;
box-shadow: 2px 2px 2px var(--teamc-black);
border-radius: 50%;
}
#primary .entry-content {
width: 1200px;
max-width: 95vw;
margin-inline: auto;
}
.accordian {
cursor: pointer;
}
.accordian h3 {
pointer-events: none;
position: relative;
padding-left: 53px;
}
.accordian h3:before {
content: 'Q';
position: absolute;
left: 0;
top: -5px;
background-color: var(--teamc-red);
color: var(--teamc-white);
padding: 5px 10px;
margin-right: 15px;
border-radius: 5px;
}
.accordian .wp-block-group__inner-container {
pointer-events: none;
}
.accordian p {
display: none;
padding-left: 53px;
}
.accordian.open p {
display: block;
}
.martop {
margin-top: 10px;
}
.marbot {
margin-bottom: 10px;
}
.site-main {
margin-inline: clamp(0.1vw, 0.4vw + 0.7rem, 1.5rem);
}
.messagebtn, .overlayBtn {
position: absolute;
width: 30px;
height: 30px;
top: 0;
right: 0;
cursor: pointer;
}
.overlayBtn {
right: auto!important;
}
.message {
position: fixed;
z-index: 100000;
top: 1em;
width: 700px;
max-width: 90vw;
background-color: #0076bf;
color: white;
border-radius: 0.5em;
border: .2em solid white;
outline: .2em solid #0076bf;
left: 50%;
transform: translateX(-50%);
font-size: 1.3rem; display: none;
align-items: center;
gap: 1em;
padding: 1em;
box-shadow: 0 20px 40px -20px rgba(0,0,0,0.7);
text-wrap: balance;
text-align: center;
animation: appear 1s forwards;
cursor: pointer;
height: var(--message-height);
}
.message:before, .message:after {
content: '';
width: 20px;
height: 2em;
position: absolute;
top: -2.3em;
left: 20%;
background-color: white;
z-index: -1;
box-shadow: 0 -5px 10px inset rgba(0,0,0,0.5);
}
.message:after {
left: auto;
right: 20%;
}
.message i {
font-size: 2em;
}
.messageSlides {
width: 100%;
height: 0;
position: relative;
}
.messageSlides div {
opacity: 0;
transition: 0.3s;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
line-height: 1.2em;
padding-block: 0.5em;
}
.messageSlides div p {
margin-block: 0.25em;
}
.messageSlides div:first-child {
opacity: 1;
}
.messageClose {
position: absolute;
top: 0.3rem;
right: 0.5rem;
font-size: 0.5rem;
font-weight: normal;
cursor: pointer;
}
.messageHidden {
transform: translate(-50%, -100%)!important;
transition: 0.3s;
top: 0.5em;
}
.messageHidden:hover {
top: 1.5em;
}
.messageHidden:hover:after {
content: 'Click to open';
background: var(--teamc-red);
color: var(--teamc-white);
font-size: 0.8rem;
position: absolute;
top: auto;
width: 120px;
bottom: -0.3em;
left: 50%;
transform: translate(-50%, 100%);
padding: 0.25em 1em;
border-radius: 0 0 5px 5px;
box-shadow: none;
z-index: 1000;
box-shadow: 0 5px 3px inset rgba(0,0,0,0.3);
}
@keyframes appear {
0% {
transform: translate(-50%, -100%);
}
100% {
transform: translate(-50%, 0%);
}
}
* {
box-sizing: border-box;
}
img {
display: block;
max-width: 100%;
}
.svg {
max-width: 100%;
}
.tdd-hide {
display: none!important;
}
.videocontainer {
position: absolute;
width: 100%;
overflow: hidden;
height: 100vh;
}
#bgvid {
position: absolute;
top: 50%;
left: 50%;
min-width: 107%;
min-height: 107%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.videooverlay {
position: fixed;
z-index: -90;
width: 100%;
height: 100%;
top: 0; background: linear-gradient(0deg, rgba(80, 10, 0, 0.9), transparent, rgba(0, 0, 0, 0.5));
}
.home main#primary {
position: relative;
height: 100vh;
overflow: hidden;
}
main#primary a:hover {
color: inherit;
text-decoration-line: underline;
text-decoration-style: wavy;
}
main#primary a {
color: inherit;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-thickness: 2px;
}
header.site-header {
position: sticky;
top: 0;
width: 100%;
padding: 1.2em clamp(0.1vw, .4vw + .7rem, 1.5rem);
z-index: 10;
background: linear-gradient(-45deg, var(--teamc-black) 20%, var(--teamc-blue) 80%, var(--teamc-black));
box-shadow: 0 0 38px 24px rgba(0, 0, 0, 0.3);
}
.home header.site-header {
position: absolute;
bottom: 0;
top: auto;
background: transparent;
padding-block: 3em;
box-shadow: 0 30px 30px rgba(0, 0, 0, 0.3);
}
.lift {
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
padding: 3em;
}
.whitelift {
background-color: var(--teamc-white);
color: var(--teamc-blue);
position: relative;
padding-inline: 1em;
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
border-radius: 0 0 10px 10px;
margin-bottom: calc(30px + 1em);
padding-bottom: 0.003em;
}
.whitelift:before {
position: absolute;
content: '';
background-color: var(--teamc-red);
width: 100%;
height: 30px;
top: -30px;
left: 0;
border-radius: 5px 5px 0 0;
}
.gap20 {
gap: 20px;
}
.wp-block-spacer {
position: relative;
}
.wp-block-spacer:before {
position: absolute;
content: '';
height: 2px;
width: 60%;
top: 15px;
left: 50%;
background: linear-gradient(45deg, transparent, var(--teamc-white), transparent);
transform: translateX(-50%);
}
.dynamic {
flex: 1 1 60%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.dynamic .buttons {
display: flex;
gap: 0.5em;
flex: 1 1;
}
.logo {
margin-right: 0.5em;
width: 400px;
max-width: 20vw;
}
.nav {
display: flex;
gap: .5em;
justify-content: space-between;
opacity: 0.9;
}
.navbtn {
background-color: var(--teamc-blue);
color: white!important;
border-radius: 10px;
display: grid;
place-items: center;
place-content: center;
flex: 1 1;
transition: var(--trans);
font-size: clamp(0.1vw, .4vw + .7rem, 1.5rem);
cursor: pointer;
text-align: center;
user-select: none;
text-decoration: none;
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
line-height: 1.2em!important;
padding: 0.25em;
}
.navbtn:hover {
background-color: var(--teamc-red);
}
.navbtn.apc {
position: relative;
font-weight: 500;
display: flex;
gap: 5px;
}
.navbtn.apc img {
width: 40px;
}
i {
user-select: none;
pointer-events: none;
}
.chat {
background-color: var(--chat-green);
position: relative;
}
.chat:hover {
background-color: var(--chat-orange);
color: var(--teamc-black);
}
.tail {
position: absolute;
bottom: 2px;
transform: translateY(1.9em);
}
.tail svg {
width: 2.5em;
height: 2em;
}
.chat .tail svg .fil0 {
transform: var(--trans);
}
.chat:hover .tail svg .fil0 {
fill: var(--chat-orange)!important;
}
.on, .button {
background-color: var(--teamc-red)!important;
}
.subbtn {
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
}
#menu-dotsmenu, .submenu {
list-style: none;
margin: 0;
background-color: var(--teamc-blue);
border-radius: 10px;
margin-top: 0.5em;
height: 3em;
padding: 0 0.25em;
display: flex;
gap: 0.5em;
justify-content: space-between;
align-items: center;
font-size: clamp(0.1vw, .4vw + .7rem, 1.5rem);
}
#menu-dotsmenu {
padding: 0 .5em;
}
#menu-dotsmenu > li {
flex: 1 1;
width: 100%;
position: relative;
}
#menu-dotsmenu .sub-menu {
display: none;
position: absolute;
list-style: none;
margin: 0;
padding: 0.25em 0.25em;
border-radius: 10px 10px 0 0;
background: #091f40;
}
#menu-dotsmenu .sub-menu {
top: auto;
bottom: 0;
transform: translateY(100%);
}
.home #menu-dotsmenu .sub-menu {
top: -10px;
bottom: auto;
transform: translateY(-100%);
}
#menu-dotsmenu .sub-menu li {
padding: 0;
}
#menu-dotsmenu .sub-menu.open {
display: block;
animation: bounce 0.3s linear forwards;
width: 100%;
}
@keyframes bounce {
50% {
padding-block: 1em;
scale: 1.1;
}
}
#menu-dotsmenu li a {
width: 100%;
display: block;
}
.submenu a, #menu-dotsmenu a, .button {
padding: 0.5em 1em!important;
flex: 1 1;
color: var(--teamc-white)!important;
text-align: center;
text-decoration: none;
border-radius: 10px!important;
transition: var(--trans);
cursor: pointer;
border: none!important;
line-height: 1em!important;
text-wrap: balance;
font-size: clamp(0.1vw, .4vw + .7rem, 1.5rem);
}
.button {
margin-top: 0.5em;
}
.submenu a:hover, #menu-dotsmenu a:hover, #menu-dotsmenu a.open, #menu-dotsmenu .current-menu-item > a, #menu-dotsmenu .current-menu-parent > a {
background-color: var(--teamc-red);
}
.submenu > div {
flex: 1 1 20%;
position: relative;
}
.submenu input {
padding: 0.5em;
width: 100%;
border: none;
border-radius: 10px;
font-size: 1em;
transition: var(--trans);
}
.submenu .on:hover {
outline: 1px solid var(--teamc-white);
background-color: var(--teamc-blue);
}
.outputWindow {
position: fixed;
inset: 0;
background-color: rgba(0,0,0,0.5);
display: grid;
place-items: center;
backdrop-filter: blur(3px);
z-index: 1;
}
.outputInner {
background-color: var(--teamc-blue);
color: var(--teamc-white);
font-size: 18px;
border-radius: 15px;
border: 1px solid var(--teamc-white);
box-shadow: 0 30px 20px -10px rgba(0,0,0,0.5);
padding: 1em;
max-width: 90vw;
max-height: 80vh;
width: 400px;
text-align: center;
}
.inputErr {
background-color: #faffc2;
outline-offset: -2px;
outline: 3px solid red!important;
}
#masthead {
transition: opacity 0.3s;
}
#masthead .Zebra_DatePicker_Icon_Wrapper {
width: 100%!important;
}
#mobileMenuBtn {
display: none;
}
.makeColumns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2%;
}
.makeColumns input[type="text"],
.makeColumns input[type="email"],
.makeColumns input[type="url"],
.makeColumns input[type="password"],
.makeColumns input[type="search"],
.makeColumns input[type="number"],
.makeColumns input[type="tel"],
.makeColumns input[type="range"],
.makeColumns input[type="date"],
.makeColumns input[type="month"],
.makeColumns input[type="week"],
.makeColumns input[type="time"],
.makeColumns input[type="datetime"],
.makeColumns input[type="datetime-local"],
.makeColumns input[type="color"],
.makeColumns textarea,
.makeColumns select {
width: 100%;
padding: 0.5em;
border-radius: 10px;
font-size: 1em;
}
.singlelines .wpcf7-list-item {
display: block;
}
.home #C4A_btn1 {
display: none!important;
}
.c4on {
display: block!important;
}
.bigblueback {
padding: 20px;
color: #FFFFFF;
font-size: 1.8em;
text-align: center;
font-weight: bold;
background-color: #0d346f;
}
.whiteliftblue .wp-block-columns {
margin-bottom: 0!important;
}
.bigblueback p {
margin-bottom: .5em;
}
.whiteliftblue {
background-color: var(--teamc-blue);
color: var(--teamc-white);
position: relative;
padding-inline: 1em;
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
border-radius: 0;
padding-bottom: 0.003em;
margin-top: 60px;
font-size: 1.8em;
text-align: center;
font-weight: bold;
padding-top: 30px;
}
.whiteliftblue:before {
position: absolute;
content: '';
background-color: var(--teamc-red);
width: 100%;
height: 30px;
top: -30px;
left: 0;
}
.contactstack {
background: url(//teamc.co.uk/wp-content/uploads/2026/03/teamc-red-back.jpg); padding: 6em;
margin-bottom: 5em;
} #tdd_calendar td, #tdd_calendar th {
padding: 0 !important;
text-align: center !important;
font-size: 1.2em !important;
}
#tdd_calendar td {
color: var(--teamc-blue);
}
#tdd_calendar th {
color: var(--teamc-white);
font-weight: 500;
}
#tdd_calendar table {
margin-bottom: 0 !important;
}
#tdd_calendar .fc-basic-view .fc-body .fc-row {
min-height: 3em;
}
#tdd_calendar .fc-row .fc-content-skeleton {
padding: 10px 0 !important;
}
#tdd_calendar .fc-today {
background: #ccd7e4 !important;
}
#tdd_Calendar .fc-event {
color: #ffffff !important;
font-size: 0.6em !important;
}
.normalDay {
background-color: #efefef;
}
.pickableDay {
background-color: #ffffff;
cursor: pointer;
}
.selectedDay {
background-color: #ff0000;
}
footer {
background-color: var(--teamc-blue);
color: var(--teamc-white);
font-size: 0.9em;
}
.footerlogo {
display: inline-block;
max-height: 120px;
}
.footerlogoimage {
position: relative;
transform: translateY(-30%);
}
.footerlinks h2 {
background: none;
margin-top: 0;
font-size: 1em;
}
.footerlinks ul {
list-style: none;
margin: 0;
padding: 0;
}
.footercenter {
flex: 1;
}
.footernarrow {
width: 20%;
}
.footerlinks {
border-left: 3px solid var(--teamc-red);
padding-left: 1em;
}
.footeraddress {
border-right: 3px solid var(--teamc-red);
padding-left: 1em;
}
.footerlinks a {
padding-block: 0;
}
.flexwrap {
flex-wrap: wrap!important;
}
.logoflex {
display: flex;
flex-wrap: wrap;
}
.colwide {
margin: 0 auto;
line-height: 1.4em;
background-color: var(--teamc-blue);
padding: .3em;
}
.colwide a {
display: inline-block;
white-space: nowrap;
color: inherit;
}
.wp-container-core-group-is-layout-9218a9e4 {
flex-direction: column;
align-items: flex-start!important;
justify-content: flex-end;
}
footer ul {
margin: 0;
padding: 0.5em 0 0 1.5em;
}
footer ::marker {
color: var(--teamc-red);
font-size: 1em;
left: 1.5em;
}
footer h2 {
margin: 1em 0 0 0;
padding: 0.25em;
font-size: 1.3em;
background-color: var(--teamc-grey);
} footer .base {
border-top: 1px solid var(--teamc-white);
}
footer .base > div {
padding: 1em 1em;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
font-size: 0.8em;
gap: 3em;
}
.footer .base > div {
max-width: 9vw;
}
footer a {
color: var(--teamc-white)!important;
text-decoration: none;
padding: 0.25em;
transition: 0.3s;
}
footer a:hover {
background: var(--teamc-red);
}
.force {
display: flex!important;
}
@media only screen and (max-width: 1270px) {
.navbtn.apc nobr {
display: none;
}
.navbtn.apc {
flex-direction: row-reverse;
}
}
@media only screen and (max-width: 1200px) {
.menus {
position: absolute;
top: calc(var(--nav-height) + 10px);
width: 100%;
left: 0;
padding: 0.5em;
}
.home .menus {
top: calc(var(--nav-height) + 45px);
}
.tail {
display: none;
}
.site-main {
padding-top: var(--nav-height);
}
#primary .entry-content {
width: auto;
}
}
@media only screen and (max-width: 780px) {
.adjustHeader {
padding-top: 3.2em!important;
}
.site-main {
padding-top: 0;
}
.tail {
display: block;
}
.logo {
width: 100%;
max-width: 300px;
margin-inline: auto;
}
header {
top: 0;
bottom: auto;
max-width: 300px;
padding-top: 1em;
padding-bottom: 1em;
}
.nav {
flex-direction: column;
}
.navbtn {
padding: 1em 0.5em;
}
.dynamic {
flex-basis: auto;
}
.isMobile .dynamic {
display: none;
}
.dynamic .buttons {
flex-direction: column;
}
.menus {
position: relative;
top: auto!important;
width: auto;
left: auto;
padding: 0;
}
.submenu {
flex-direction: column;
height: auto;
padding: 0.5em;
}
.submenu > * {
width: 100%;
}
#mobileMenuBtn {
display: block;
cursor: pointer;
}
#menu-dotsmenu, .submenu {
flex-direction: column;
height: auto;
}
header {
max-width: 100%;
}
.dynamic.force {
max-height: 50dvh;
overflow-y: auto;
}
#menu-dotsmenu .sub-menu {
position: relative;
transform: none!important;
top: 0!important;
bottom: auto;
background: #091f40;
display: block;
}
#menu-dotsmenu a[href="#"]:hover {
background: var(--teamc-blue)!important;
}
.messageHidden {
top: 1em;
}
.footerlogoimage {
width: 100%;
margin: 0!important;
}
.footerlogoimage img {
margin-inline: auto;
}
footer p {
text-align: center!important;
}
.footeraddress {
order: 2;
border: none;
border-top: 2px solid var(--teamc-red);
align-items: center!important;
padding-top: 2em;
}
.footeraddress br {
display: none;
}
.footercenter {
order: 1;
}
.footerlogoimage {
transform: none;
margin-bottom: 1.5em!important;
}
.footerlinks {
order: 3;
border: none;
border-top: 2px solid var(--teamc-red);
align-items: center!important;
padding-top: 2em;
margin-bottom: 1em!important;
}
.footerlinks ul {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
}
.footerlinks h2 {
text-align: center;
}
.trucks img {
max-height: 30px;
width: auto;
}
footer .colwide {
justify-content: center;
flex-direction: column;
gap: 2em;
}
.footernarrow, .footercenter {
width: 100%;
}
footer .base > div {
flex-direction: column;
max-width: calc(100% - 80px);
gap: 10px;
text-wrap: balance;
align-items: flex-start;
}
footer .base {
padding-bottom: 20px;
}
footer .base a {
padding: 0;
}
}