.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}  body {
margin: 0 !important;
} main {
display: block;
} h1 {
font-size: 2em;
margin: 0.67em 0;
}  hr {
box-sizing: content-box;
height: 0;
overflow: visible;
} pre {
font-family: monospace, monospace;
font-size: 1em;
}  a {
background-color: transparent;
} abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
} b,
strong {
font-weight: bolder;
} code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
} small {
font-size: 80%;
} sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}  img {
border-style: none;
}  button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
} button,
input {
overflow: visible;
} button,
select {
text-transform: none;
} button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
} button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
} button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
} fieldset {
padding: 0.35em 0.75em 0.625em;
} legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
} progress {
vertical-align: baseline;
} textarea {
overflow: auto;
} [type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
} [type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
} [type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
} [type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
} ::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}  details {
display: block;
} summary {
display: list-item;
}  template {
display: none;
} [hidden] {
display: none;
}  *,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}  body,
button,
input,
select,
optgroup,
textarea {
color: #404040;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 1rem;
line-height: 1.5;
}
h1,
h2,
h3,
h4,
h5,
h6 {
clear: both;
}
p {
margin-bottom: 1.5em;
}
dfn,
cite,
em,
i {
font-style: italic;
}
blockquote {
margin: 0 1.5em;
}
address {
margin: 0 0 1.5em;
}
pre {
background: #eee;
font-family: "Courier 10 Pitch", courier, monospace;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1.6em;
}
code,
kbd,
tt,
var {
font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
abbr,
acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
mark,
ins {
background: #fff9c0;
text-decoration: none;
}
big {
font-size: 125%;
} body {
background: #fff;
}
hr {
background-color: #ccc;
border: 0;
height: 1px;
margin-bottom: 1.5em;
}
ul,
ol {
margin: 0 0 1.5em 3em;
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
li > ul,
li > ol {
margin-bottom: 0;
margin-left: 1.5em;
}
dt {
font-weight: 700;
}
dd {
margin: 0 1.5em 1.5em;
} embed,
iframe,
object {
max-width: 100%;
}
img {
height: auto;
max-width: 100%;
}
figure {
margin: 1em 0;
}
table {
margin: 0 0 1.5em;
width: 100%;
} a {
color: #4169e1;
}
a:visited {
color: #800080;
}
a:hover,
a:focus,
a:active {
color: #191970;
}
a:focus {
outline: thin dotted;
}
a:hover,
a:active {
outline: 0;
} button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
border: 1px solid;
border-color: #ccc #ccc #bbb;
border-radius: 3px;
background: #e6e6e6;
color: rgba(0, 0, 0, 0.8);
line-height: 1;
padding: 0.6em 1em 0.4em;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
border-color: #ccc #bbb #aaa;
}
button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
border-color: #aaa #bbb #bbb;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
color: #666;
border: 1px solid #ccc;
border-radius: 3px;
padding: 3px;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
color: #111;
}
select {
border: 1px solid #ccc;
}
textarea {
width: 100%;
}   .main-navigation {
display: block;
width: 100%;
}
.main-navigation ul {
display: none;
list-style: none;
margin: 0;
padding-left: 0;
}
.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
float: left;
position: absolute;
top: 100%;
left: -999em;
z-index: 99999;
}
.main-navigation ul ul ul {
left: -999em;
top: 0;
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
display: block;
left: auto;
}
.main-navigation ul ul a {
width: 200px;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
left: auto;
}
.main-navigation li {
position: relative;
}
.main-navigation a {
display: block;
text-decoration: none;
} .menu-toggle,
.main-navigation.toggled ul {
display: block;
}
@media screen and (min-width: 37.5em) {
.menu-toggle {
display: none;
}
.main-navigation ul {
display: flex;
}
}
.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
margin: 0 0 1.5em;
}
.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
display: flex;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
flex: 1 0 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
text-align: end;
flex: 1 0 50%;
} .sticky {
display: block;
}
.post,
.page {
margin: 0 0 1.5em;
}
.updated:not(.published) {
display: none;
}
.page-content,
.entry-content,
.entry-summary {
margin: 1.5em 0 0;
}
.page-links {
clear: both;
margin: 0 0 1.5em;
} .comment-content a {
word-wrap: break-word;
}
.bypostauthor {
display: block;
} .widget {
margin: 0 0 1.5em;
}
.widget select {
max-width: 100%;
} .page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
border: none;
margin-bottom: 0;
margin-top: 0;
padding: 0;
} .custom-logo-link {
display: inline-block;
} .wp-caption {
margin-bottom: 1.5em;
max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption .wp-caption-text {
margin: 0.8075em 0;
}
.wp-caption-text {
text-align: center;
} .gallery {
margin-bottom: 1.5em;
display: grid;
grid-gap: 1.5em;
}
.gallery-item {
display: inline-block;
text-align: center;
width: 100%;
}
.gallery-columns-2 {
grid-template-columns: repeat(2, 1fr);
}
.gallery-columns-3 {
grid-template-columns: repeat(3, 1fr);
}
.gallery-columns-4 {
grid-template-columns: repeat(4, 1fr);
}
.gallery-columns-5 {
grid-template-columns: repeat(5, 1fr);
}
.gallery-columns-6 {
grid-template-columns: repeat(6, 1fr);
}
.gallery-columns-7 {
grid-template-columns: repeat(7, 1fr);
}
.gallery-columns-8 {
grid-template-columns: repeat(8, 1fr);
}
.gallery-columns-9 {
grid-template-columns: repeat(9, 1fr);
}
.gallery-caption {
display: block;
}   .infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
display: none;
} .infinity-end.neverending .site-footer {
display: block;
}   .screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
clip-path: none;
color: #21759b;
display: block;
font-size: 0.875rem;
font-weight: 700;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
} #primary[tabindex="-1"]:focus {
outline: 0;
} .alignleft { float: left; margin-right: 1.5em;
margin-bottom: 1.5em;
}
.alignright { float: right; margin-left: 1.5em;
margin-bottom: 1.5em;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1.5em;
} .product-header {padding-top:250px !important;}
.page-template-about-template .navigation-bar.container {background: #571F79;}
.navigation-bar.container {
display: flex;
position: fixed;
z-index: 9999;
justify-content: space-between;
background: rgba(255, 255, 255, 0.43);
backdrop-filter: blur(12.6px);
-webkit-backdrop-filter: blur(12.6px);
width: 100%;
padding: 20px;
align-items: center;
top: 0;
transition: background 0.3s ease, color 0.3s ease;
box-shadow: 0 4px 30px rgb(0 0 0 / 50%);
}
.navigation-bar.container {
transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
background: rgb(255 255 255 / 21%);
backdrop-filter: blur(12.6px);
-webkit-backdrop-filter: blur(12.6px);
left: 50%;         
transform: translateX(-50%);
}
.navigation-bar.container.scrolled {
background: #571F79;
backdrop-filter: blur(12.6px);
-webkit-backdrop-filter: blur(12.6px);
} .page-template-the-tech .navigation-bar.container {background:#571F79;}
.page-template-the-tech .navigation-bar.scrolled {background:#571F79;}
.blog .navigation-bar.container {background:#571F79;}
.blog .navigation-bar.scrolled {background:#571F79;}
.single .navigation-bar.container {background:#571F79;}
.single .navigation-bar.scrolled {background:#571F79;}
.page-template-contact .navigation-bar.container {background:#571F79;}
.page-template-contact .navigation-bar.scrolled {background:#571F79;}
.site-logo {max-width: 200px; margin-right:40px;}
.logo-dark {display: none;}  #loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: radial-gradient(circle at center, #571F79, #810CC9);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
transform: scale(1);
opacity: 1;
transition: transform 1.5s ease, opacity 1.5s ease;
} .triangle-bg {
position: absolute;
width: 200%;
height: 200%;
background-image:
repeating-linear-gradient(
60deg,
rgba(255,255,255,0.05) 0,
rgba(255,255,255,0.05) 2px,
transparent 2px,
transparent 40px
),
repeating-linear-gradient(
-60deg,
rgba(255,255,255,0.05) 0,
rgba(255,255,255,0.05) 2px,
transparent 2px,
transparent 40px
);
animation: rotateBg 20s linear infinite;
z-index: 0;
}
@keyframes rotateBg {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
} .logo-wrapper {
position: relative;
z-index: 1;
animation: popIn 1s ease-out forwards;
opacity: 0;
}
.logo {
width: 130px;
filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.3));
}
@keyframes popIn {
0% {
transform: scale(0.8);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
} .logo-ring {
position: relative;
width: 250px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
} .logo-ring::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
border: transparent;
border-top: 2px solid rgba(255, 255, 255, 0.8);
border-radius: 50%;
animation: spinRing 2s linear infinite;
pointer-events: none;
}
@keyframes spinRing {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
} #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link {transform: 0.5s;}
#mega-menu-wrap-menu-1 {background:transparent!important;}
#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item{ font-family: "Poppins", sans-serif;}
#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link {font-size: 1.4vw !important;}
.navigation span.button-text {font-size: 1vw;}
.navigation {display: flex; align-items: center;}
.navigation  .cta {margin-left: 20px; padding-bottom: 13px; font-weight: 800;}
html {margin:0 !important; background:#F9F9FC;}
body {background:#F9F9FC;}
.images img {width: 100%;}
.container {max-width: 1400px; margin:auto; padding: 0 20px; position: relative;}
.dash-red {height: 6px; width: 200px; position: absolute; top:0; right:15%; background: rgb(29,1,10); background: linear-gradient(90deg, rgb(29 1 10 / 0%) 0%, rgba(217, 12, 81, 1) 100%)}
.dash-blue {height: 6px; width: 130px; position: absolute; bottom:0; left:0%; background: rgb(29,1,10); background: rgb(29,1,10); background: linear-gradient(90deg, rgb(29 1 10 / 0%) 0%, rgba(0, 157, 223, 1) 100%);}
.dash-yellow {height: 6px; width: 130px; position: absolute; bottom:0; right:0%; background: rgb(29,1,10); background: rgb(29,1,10); background: linear-gradient(90deg, rgb(29 1 10 / 0%) 0%, rgba(251, 173, 15, 1) 100%);}
li#mega-menu-item-350 {display: none !important;}
button, input[type="button"], input[type="reset"], input[type="submit"] {
border: none;
border-color: transparent;
border-radius: 0;
background: transparent;
color: #fff;
line-height: 1;
padding: 0;
text-align: center;
font-family: "Nunito", sans-serif;
font-size: 1.2vw;
letter-spacing: 0.4vw;
transition: transform 0.2s;
}
.cta p {margin:0;}
.cta .wpcf7-spinner {display: none;} .poppins-thin {
font-family: "Poppins", sans-serif;
font-weight: 100;
font-style: normal;
}
.poppins-extralight {
font-family: "Poppins", sans-serif;
font-weight: 200;
font-style: normal;
}
.poppins-light {
font-family: "Poppins", sans-serif;
font-weight: 300;
font-style: normal;
}
.poppins-regular {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: normal;
}
.poppins-medium {
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
}
.poppins-semibold {
font-family: "Poppins", sans-serif;
font-weight: 600;
font-style: normal;
}
.poppins-bold {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-style: normal;
}
.poppins-extrabold {
font-family: "Poppins", sans-serif;
font-weight: 800;
font-style: normal;
}
.poppins-black {
font-family: "Poppins", sans-serif;
font-weight: 900;
font-style: normal;
}
.poppins-thin-italic {
font-family: "Poppins", sans-serif;
font-weight: 100;
font-style: italic;
}
.poppins-extralight-italic {
font-family: "Poppins", sans-serif;
font-weight: 200;
font-style: italic;
}
.poppins-light-italic {
font-family: "Poppins", sans-serif;
font-weight: 300;
font-style: italic;
}
.poppins-regular-italic {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: italic;
}
.poppins-medium-italic {
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: italic;
}
.poppins-semibold-italic {
font-family: "Poppins", sans-serif;
font-weight: 600;
font-style: italic;
}
.poppins-bold-italic {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-style: italic;
}
.poppins-extrabold-italic {
font-family: "Poppins", sans-serif;
font-weight: 800;
font-style: italic;
}
.poppins-black-italic {
font-family: "Poppins", sans-serif;
font-weight: 900;
font-style: italic;
}
.nunito-<uniquifier> {
font-family: "Nunito", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
}
.product-header .bold-heading {font-size: clamp(36px, 4vw, 54px);}
h1 {font-family: "Poppins", sans-serif; font-weight: 300; font-style: normal; font-size: 4vw; margin:0; line-height: 4vw; font-size: clamp(36px, 4vw, 54px);}
h2 {font-family: "Poppins", sans-serif; font-weight: 300; font-style: normal; font-size: 3.5vw; margin:0; line-height: 3.5vw; font-size: clamp(32px, 3.5vw, 46px);}
h3 {font-family: "Poppins", sans-serif; font-weight: 500; font-style: normal; font-size: 2vw; margin:0; line-height: 2vw; font-size: clamp(20px, 2vw, 40px);}
p {font-family: "Poppins", sans-serif; font-weight: 300; font-style: normal; font-size: 1.2vw; font-size: clamp(16px, 1.2vw, 26px);}
.internal-page-header .bold-heading {font-size: 5vw; font-size: clamp(36px, 4vw, 54px);}
.internal-page-header p {font-size: 2.5vw; font-size: clamp(25px, 2.5vw, 50px);}
ul {margin:0; padding-left:50px; list-style: none;}
li{font-family: "Poppins", sans-serif; font-weight: 400; font-style: normal; font-size: clamp(16px, 1.2vw, 26px); position: relative; margin-bottom: 20px;}
li:before {content: ""; position: absolute; background-image: url(//autom8.treff.uk/wp-content/themes/autom8/images/bullet.png); background-size: contain; width: 40px; height: 40px; background-repeat: no-repeat; background-position: center; left:-50px; top:-4px;}
.image-caption p {font-size: clamp(20px, 2vw, 38px);}
ol {margin-left:0; padding-left:0;}
h1 .bold-heading {font-size: clamp(36px, 4vw, 54px);}
ol {
list-style: none;
counter-reset: li-counter;
padding-left: 0;
}
ol li {
counter-increment: li-counter;
position: relative;
margin: 0.5em 0;
padding-left: 2.5em;
}
ol li::before {
content: counter(li-counter);
position: absolute;
left: 0;
top: 0;
background-color: #925AB5;
color: white;
width: 25px;
height: 25px;
line-height: 1.6em;
text-align: center;
border-radius: 50%;
font-weight: 400;
font-family: sans-serif;
background-image:none;
}
.h2-title {font-family: "Poppins", sans-serif; font-weight: 300; font-style: normal; font-size: 4vw; margin:0; line-height: 4vw; font-size: clamp(32px, 4vw, 52px);}
strong {font-weight: 700;}
.bold-heading {font-family: "Poppins", sans-serif; font-weight: 500; font-style: normal; font-size: 3.5vw; font-size: clamp(32px, 3.5vw, 46px);}
.green-text {color:#78D2B1;}
.sideways {font-family: "Nunito", sans-serif; font-size: 1vw; letter-spacing: 0.4vw; transform: rotate(-90deg);
transform-origin: left top; position: absolute;}
span.internal-subtitle {
font-size: 2vw;
font-size: clamp(24px, 2vw, 38px);
letter-spacing: 0.5vw;
}
a {text-decoration: none;} .cta {padding: 10px 20px; text-align: center; border-radius: 5px; box-shadow: 0px 3px 6px #00000029; border:2px solid #fff; position: relative; font-family: "Nunito", sans-serif; font-size: clamp(16px, 1vw, 20px); letter-spacing: 0.4vw; transition: transform 0.2s; display: inline-block;}
.cta:hover {animation: shake 0.5s ease;} @keyframes shake {
0% { transform: translateX(0); }
20% { transform: translateX(-4px); }
40% { transform: translateX(4px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(4px); }
100% { transform: translateX(0); }
}
.cta-purple {color:#fff; background:#571F79;}
.cta-purple:before {content: ''; z-index: 3; border-radius: 5px; width: 38%; height: 112%; position: absolute; left: -3px; top: -3px; background: #810CC9; z-index: 0;}
.cta-blue {color:#fff; background:#0599DB;}
.cta-blue:before {content: ''; z-index: 3; border-radius: 5px; width: 38%; height: 112%; position: absolute; left: -3px; top: -3px; background: #174975;}
.cta-yellow {color:#fff; background:#F6A812;}
.cta-yellow:before {content: ''; z-index: 3; border-radius: 5px; width: 38%; height: 112%; position: absolute; left: -3px; top: -3px; background: #FEB92B;}
.cta-red {color:#fff; background:#D90E52;}
.cta-red:before {content: ''; z-index: 3; border-radius: 5px; width: 38%; height: 112%; position: absolute; left: -3px; top: -3px; background: #99093B;}
.cta {position: relative;}
.cta {max-width: 350px;}
.cta:before {transition: all 0.5s ease; }
.cta:hover:before {width: 103%;left: -3px;}
.button-text {position: relative; z-index: 4;}
#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link {font-family: "Nunito", sans-serif !important;}
.circular-login {
font-family: "Nunito", sans-serif;
margin-left: 20px;
width: 75px;
height: 52px;
border-radius: 5px;
border: 2px solid #fff;
background:#571F79;
color: #fff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
outline: none;
transition: all 0.3s ease;
box-shadow: 0 0 10px rgba(129, 12, 201, 0.4);
display: flex;
align-items: center;
justify-content: center;
border:2px solid #fff;
}
.circular-login:hover {
background:#810CC9;
box-shadow: 0 0 20px rgba(129, 12, 201, 0.6);
transform: scale(1.05);
}
.login-icon {
margin-right: 5px;
width: 15px;
position: relative;
top: 2px;
} .hero-container {
position: relative;
min-height: 100vh;
z-index: 5;
}
.hero-container::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 120px;
background-size: 300% 300%;
transform: skewY(-5deg);
transform-origin: top left;
z-index: 1;
}
.home .hero-container::after {display: none;}
.sub-hero {
position: relative; 
padding: 100px 0;
background: rgb(87 31 121 / 90%); overflow: hidden;
padding-top:200px;
}
.page-template-request-a-demo .sub-hero {background: rgb(87 31 121 / 100%); padding-top:300px;}
.page-template-request-a-demo .website-intro {background: rgb(87 31 121 / 100%);}
.page-template-request-a-demo .hero-content {align-items:start; justify-content: space-between; margin-bottom:0;}
.page-template-request-a-demo .product-header-copy {width: 55%;}
.page-template-request-a-demo .right-form {width: 40%; text-align: left;}
.page-template-request-a-demo .hero-content p {font-family: "Poppins", sans-serif; letter-spacing: 0; font-weight: 300; font-style: normal; font-size: 1.2vw; font-size: clamp(16px, 1.2vw, 26px);}
.hero-container::after {display: none;}
.page-template-request-a-demo .hero-container {transform: skewY(5deg); margin-top: -120px;}
.page-template-request-a-demo .hero-container .container {transform: skewY(-5deg); position: relative; z-index: 5;}
.page-template-request-a-demo .images {transform: skewY(-5deg);}
.page-template-request-a-demo footer#colophon {margin-top:-100px;}
.page-template-request-a-demo .header-circle2 {transform: skewX(-5deg) !important; top:550px; bottom: inherit;}
.page-template-request-a-demo .header-circle3 {transform: skewX(-5deg) !important; left: 45%; top:100px;}
.page-template-request-a-demo .header-circle {z-index: 2; opacity: 1;}
.page-template-request-a-demo .footer-form-flex {display: none;}
.intro-sideways {
left: 40px;
top: 30%;
z-index: 5;
position: absolute;
transform: rotate(90deg);
display: inline-block;
color: #fff;
}
.hero-container .circuit{position: absolute; right:10%; top:50px; transform: rotate(90deg); width:20%; opacity: 0.8;}
.hero-container .circuit2{position: absolute; left:-5%; bottom:100px; width:20%; opacity: 0.8; z-index: 4;}
.large-header-circle {position: absolute; width: 70%; left:-25%; top:-25%; max-width: 1200px; animation: bobAndSpin 24s ease-in-out infinite;transform-origin: 50% 50%;}
.site-footer {position: relative;}
.site-footer .circuit{position: absolute; left:-5%; top:0px; width:25%; z-index: 5; opacity: 0.8;} #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {background:transparent !important; text-decoration: none !important; font-weight: 300; transition: 0.5s;}
#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link:hover, #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link:focus {transform: scale(1.05);}
.navigation-bar {max-width: 100% !important;}
.header-circle2 {
position: absolute;
width: 13%;
bottom: 300px;
left: 45%;
opacity: 0.7;
animation: bob 6s ease-in-out infinite;
}
.header-circle3 {
position: absolute;
width: 25%;
bottom: 20px;
left: 25%;
opacity: 0.7;
animation: bob 7s ease-in-out infinite reverse;
} .header-logo {position: absolute; width: 50%; right:-25%; top: 0; opacity: 0.3;}
.hero-content {position: relative; z-index: 9; max-width: 1000px; color:#fff; text-align: center; display: flex; align-items: center; height: 100%; margin-bottom: 300px;}
.hero-content p {font-family: "Nunito", sans-serif; font-size: 1.8vw; letter-spacing: 0.4vw;}
.cta-flex {display: flex; justify-content: center;}
.cta-flex a {margin-right:40px;}
.website-intro {z-index: 4; background:rgb(87 31 121 / 90%);; position: relative; padding-bottom: 200px;}
.website-intro-flex {display: flex; justify-content: space-between; position: relative;}
.website-intro-logo {
width: 35%;
position: absolute;
left: 0;
bottom: -700px;
transition: 1.5s;
}
.bg-vid {
position: fixed;
top:0;
left: 0;
width: 100%;
z-index: 1;
}
.bg-vid video {width: 125%; height: 100%;}
.bg-vid.hide {display: none;}
.website-intro-logo.show {bottom: -250px;}
.website-intro-space {width: 30%;}
.website-intro-copy {width: 70%; color:#fff; text-align: right;}
.website-intro-copy a {display: inline-block;}
.hero-container::after {
content: '';
background:#571f79;
position: absolute;
bottom: -120px;
left: 0;
width: 100%;
height: 120px;
background-size: 300% 300%;
transform: skewY(-5deg);
transform-origin: top left;
z-index: 1;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {color:#fff;}
.why-section {background:#F9F9FC; color:#272626; position: relative; z-index: 5; overflow: hidden; transform: skewY(-5deg); margin-top:-65px;}
.why-section .why-flex {transform: skewY(5deg);}
.why-sideways {
height: 20px;
position: absolute;
left: 20px;
bottom: 10px;
z-index: 7;
}
.why-flex {display: flex; justify-content: space-between; position: relative;}
.why-copy {width: 55%; padding-left: 30px; position: relative; z-index: 7;}
.carousels-container {width: 40%;}
.why-section {background: #F9F9FC; padding: 150px 0 100px 0;}
.carousels-container {
display: flex;
justify-content: space-between;
width: 40%;
height: 100%; position: relative;
top:-150px;
max-height: 0px;
}
.carousel-wrapper {
width: 48%;
overflow: hidden;
position: relative;
}
.home .carousel-wrapper{overflow: visible;}
.carousel-wrapper.carousel-left {height: 100%;}
.carousel-right {position: absolute;right:0; top:-500px;}
.carousel-track {
display: flex;
flex-direction: column;
transform: translateY(0);
transition: transform 0.1s linear;
}
.carousel-image {
width: 100%;
height: 200px;
margin-bottom: 20px;
}
.carousel-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px;
} .skewed-container {
z-index: 4;
position: relative;
width: 100%;
background:#1F6146;
transform: skewY(-5deg);
padding:  100px 0;
padding-bottom: 300px;
background-image:
repeating-linear-gradient(
60deg,
rgba(255,255,255,0.05) 0,
rgba(255,255,255,0.05) 2px,
transparent 2px,
transparent 40px
),
repeating-linear-gradient(
-60deg,
rgba(255,255,255,0.05) 0,
rgba(255,255,255,0.05) 2px,
transparent 2px,
transparent 40px
);
}
.home .skewed-container {  background:#3BBA86;}   .the-product {
transform: skewY(0deg); 
display: flex; justify-content: space-between;
}
.the-product .cta {max-width: 300px;}
.slick-list.draggable {
padding-bottom: 20px;
}
.slick-next {
right: 30px !important;
}
.slick-prev {
left: 0px !important;
z-index: 5 !important;
}
.the-product-left {width: 45%; padding: 20px; background:#1F6146; position: relative; overflow: hidden; color:#fff;  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); }
.the-product-right {width: 45%; border:8px solid #1F6146; position: relative; color:#fff;}
.the-product-right video {width: 100%; height: 100%;}
.the-product-right .product-sideways{left: -40px; bottom: -30px;}
.page-link-a a{font-family: "Poppins", sans-serif; font-weight: 700; font-style: normal; font-size: 1.2vw; color:#272626;}
.page-link-a {position: relative; display: inline-block; font-weight: 700;}
.page-link-a:after {content:'';  position: absolute; right:-45px; top:-5px; width: 40px; height: 40px; background-image: url(//autom8.treff.uk/wp-content/themes/autom8/images/purple-arrow.png); background-size: contain; background-position: center; background-repeat: no-repeat;}
.the-product-left .circuit.images {
position: absolute;
transform: rotate(180deg);
width: 40%;
right: -40px;
bottom: 0;
opacity: 0.7;
}
.page-link:hover {transform: scale(1.05);}
.links-flex a {color:#272626;}
.skewed-container .content {
position: relative;
z-index: 1; padding: 20px;
color: white;
text-align: center;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center; }
.page-links {margin-top:-250px; z-index: 4; position: relative; color:#272626; position:relative; z-index: 4; padding-bottom: 20px; margin-bottom: 0;} 
.page-links h2 {color:#fff;}
.links-flex {display: flex; justify-content: space-between;}
.links-left {width: 48%;}
.links-right {width: 48%; padding-top:20px;}
.page-link {width: 100%; position: relative; display: flex; box-shadow: 0px 5px 11px #00000059; background:#fff; margin-top: 20px; transition: 0.5s; border-radius: 5px;}
.page-link-image {width: 50%; background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 200px; border-radius: 5px;}
.page-link-copy {width: 50%; padding: 20px;}
.links-right .page-link {flex-direction: column; height: 100%; margin-top:0;}
.links-right .page-link-image {width: 100%; height: 250px;}
.links-right .page-link-copy {width: 100%;}
.home .features-container {padding-bottom: 200px;}
.features-container {padding-top:100px; color:#272626; position: relative; z-index: 4; background: #F9F9FC;}
.features-flex {display: flex; flex-wrap: wrap;}
.page-template-fleet-training .features-flex {justify-content: space-between; margin-bottom: 80px;}
.page-template-insurance .features-flex {justify-content: space-between; margin:80px 0; margin-top:40px;}
.home .features-flex {justify-content: space-between;}
.features-first {width: 30%; position: relative;}
.features-first h2 {margin-bottom: 20px;}
.feature {width: 30%;}
.feature:hover .feature-icon {  animation: jiggle 0.7s ease-in-out;}
.feature-icon {width: 80px; margin-bottom: 10px;}
.feature h3{font-family: "Nunito", sans-serif; font-size: 2vw; letter-spacing: 0.4vw;}
footer#colophon {
position: relative;
z-index: 4;
}
.stats-section {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.vertical-slider-wrapper {
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
max-height: 320px; overflow: hidden;
width: 40%;
position: relative;
}
.slider-dots {
cursor: pointer;
display: flex;
flex-direction: column;
gap: 12px;
}
.slider-dots .dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
transition: background 0.3s, transform 0.3s;
}
.slider-dots .dot.active {
background: #3BBA86;
transform: scale(1.1);
}
.vertical-slider {
max-height: 320px; overflow: hidden;
width: 100%;
position: relative;
}
.stats-copy {width: 55%; color:#fff;}
.slider-track {
display: flex;
flex-direction: column;
transition: transform 0.5s ease;
}
.slide {
display: flex;
align-items: center;
background:#571F79;
border-radius: 5px;
margin: 10px 0;
padding: 30px 20px 30px 100px;
width: 100%;
opacity: 0;
opacity: 0.3; transform: scale(0.9);
transition: all 0.4s ease;
position: relative;
box-shadow: 0px 5px 11px #00000059;
}
.slide:nth-child(2) {
opacity: 1;
transform: scale(1);
background: #810CC9;
}
.slide:nth-child(2) .circle {
color: #fff;
}
.slide:nth-child(1),
.slide:nth-child(3) {
opacity: 1;
}
.slide .circle {
transition: border-color 0.4s ease, color 0.4s ease;
}
.slide .circle {
width:90px;
height: 100%;
background: #3BBA86;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: #fff;
margin-right: 20px;
flex-shrink: 0;
position: absolute;
left:0;
top:0;
font-size: 1.5vw;
}
.slide .label {
font-weight: bold;
color: white;
font-size: 1.4vw;
}
.slide.active {
background: #ffaa17;
opacity: 1;
transform: scale(1);
}
.slide.active .circle {
border-color: #ffaa17;
color: #3BBA86;
}
.page-template-insurance .slide {background:#0799DB;}
.page-template-insurance .slide:nth-child(2) {background: #0F679B;} .carousel-container {
width: 100%;
overflow: hidden;
position: relative;
} .carousel {
display: flex;
flex-wrap: nowrap;
animation: scroll-carousel 20s linear infinite;
} .carousel-images {
display: flex;
width: 100%;
} .carousel-logo img {
width: 100%; height: 100%; object-fit: cover; }
.carousel-master {margin-top: 50px; overflow: hidden;}
.carousel-site {width: 300px;}
.image-carousel {
display: flex;
gap: 20px;
width: max-content;
white-space: nowrap;
position: relative;
left: -100px;
margin-bottom: 20px;
}
.carousel-site img {
width: 100%; height: 100%; object-fit: cover; box-shadow: 1px 5px 9px rgba(0, 0, 0, 0.3); border-radius: 5px;
}
.carousel-logo {
width: 200px;
margin: auto 20px;
filter: invert(1);
} @keyframes scroll-carousel {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.scrollers {overflow: hidden;} .dashes {
width: 450px;
height: 100px;
background-image: url(//autom8.treff.uk/wp-content/themes/autom8/images/dashes.png);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
transition: 0.5s;
}
.dashes4 {position: relative; left: -500px; transition: 1s;}
.dashes4.show {left:0;}
#tech-dashes {position: absolute; top:-150px;}
.website-intro-flex .dashes {left:-300px; top:400px; transform: rotate(-62deg); position: absolute;}
.website-intro-flex .dashes.show {left: -115px; top: 85px;}
.page-template-invest .website-intro-flex .dashes.show {left: -90px; top: 50px;}
.page-template-invest .website-intro-flex .dashes {width: 350px;}
.page-template-invest .website-intro-logo.show {bottom:-120px;}
.dashes2 {width: 100%; position: absolute; left:-400px; top:150px;}
.dashes2.show {left:0;}
.dashes.dashes5.rellax {top:-300px; left: inherit; position: absolute;}
.dashes.dashes5.rellax {background-image: url(//autom8.treff.uk/wp-content/themes/autom8/images/dashes-horizontal.png); height: 350px; width: 100px; right:20%; background-size: contain;}
.dashes3 {position: absolute; right: -450px; top: -20px; transform: rotate(180deg);}
.dashes3.show {right:0px;}
.invest-dashes3 {position: absolute; right:0;}
.invest-dashes {position: relative; left:-1000px; transition: 1s; opacity: 0;}
.invest-dashes.show {left:0; opacity: 1;}
.features-logo {position: absolute; width: 40%; left:-5%; bottom: 150px; opacity: 0.04;}
.internal-page-header {padding: 100px 20px; padding-bottom: 200px; color:#272626; padding-top:200px; position: relative;}
.internal-page-header .circuit {position: absolute;
right: 5%;
top: 50px;
transform: rotate(90deg);
width: 25%;
opacity: 0.1;
animation: slideDown 1s ease-out forwards; } @keyframes slideDown {
0% {
top: -100px; }
100% {
top: 50px; }
}
.page-template-about-template .skewed-container {padding-bottom: 100px; transform: skewY(5deg);}
.page-template-about-template .skewed-container .container {transform: skewY(-5deg);}
.page-template-about-template .yellow-circles {bottom: 100px; right:0; opacity: 0.8;}
.skewed-container .container{transform: skewY(5deg);}
.skewed-container .website-intro-logo {width: 30%; bottom:-400px;}
.skewed-container .website-intro-logo.show {bottom:-150px;}
.header-images {display: flex; justify-content: space-between; margin-top:-0px; transition: 1s; animation: slideUp 1s forwards; }
@keyframes slideUp {
0% {
margin-top: 0;
}
100% {
margin-top: -250px;
}
}
.invest-section {position: relative;}
.yellow-circle1 {position: absolute; right:-100px; width: 40%; top:-200px;}
.invest-circle {position: absolute; left:-100px; width: 30%; bottom:0px; opacity: 0.9;}
.yellow-circles {position: absolute; width: 200px; right:100px; bottom:-100px; opacity: 0.9;}
.image-left {width: 68%; height: 300px; background-size: cover; background-position: center; border-radius: 5px;}
.image-right {width: 30%; height: 300px; background-size: cover; background-position: center; border-radius: 5px;}
.split-copy {display: flex; color:#fff; margin-top:50px;}
.split-copy-title {width: 45%; position: relative; display: inline-block;}
.split-copy-title:after {content: ''; width: 100px; height: 100px; position: absolute; left: 45%; top:-17px; background-image: url(//autom8.treff.uk/wp-content/themes/autom8/images/green-arrow.webp); background-size: contain; background-repeat: no-repeat; background-position: center;}
.split-copy-text {width: 54%;}
.team-section {position: relative; z-index: 4; padding-top: 100px;}
.team-section .circuit {position: absolute; left:-100px; width: 30%; top:-50px; opacity: 0.1;}
.team-title {text-align: center; margin:auto; max-width: 900px; color:#272626;}
.team-members {display: flex; justify-content: space-between; flex-wrap: wrap; margin-top:50px;}
.team-profile {width: 32%; margin-bottom: 20px; position: relative; z-index: 4; background:#fff; box-shadow: 0px 3px 6px #00000029; border-radius: 5px;}
.team-image {transition: 0.5s; overflow: hidden; height: 300px; margin-bottom: 20px; box-shadow: 0px 3px 6px #00000029; border-radius: 5px;}
.team-image img {width: 100%; height: 100%; object-fit: cover;}
.team-copy {padding: 20px; color:#272626;}
.team-profile:hover .team-image {height: 350px;}
.team-carousel {margin-top:50px; position: relative; z-index: 4; overflow: hidden;}
.team-advisory-title {margin-bottom: 50px; color:#272626;}
.team-members-carousel .team-profile{margin:0 20px; background:#fff; box-shadow: 0px 3px 6px #00000029;}
.team-members-carousel .team-copy {padding: 20px;}
.team-circle {
position: absolute;
bottom: 300px;
left: -200px;
width: 30%;
z-index: 3;
}
.team-section .features-logo {
position: absolute;
right: 0;
left: inherit;
bottom: 50px;
}
.schedule-demo-section {position: relative;}
.schedule-demo-section .features-logo {
position: absolute;
right: 0;
left: inherit;
bottom: 50px;
}
.slick-prev:before {width: 50px; height: 50px; background:url(//autom8.treff.uk/wp-content/themes/autom8/images/slider-prev.png); background-size: contain; background-position: center; background-repeat: no-repeat;}
.slick-next:before {width: 50px; height: 50px; background:url(//autom8.treff.uk/wp-content/themes/autom8/images/slider-next.png); background-size: contain; background-position: center; background-repeat: no-repeat;}
.slick-prev:before, .slick-next:before {opacity: 1 !important; font-size: 50px !important; color:inherit !important;}
.yellow-section {
background: rgb(87 31 121 / 100%);
color: #fff;
transform: skewY(3deg);
position: relative;
padding: 100px 0;
padding-top: 180px;
margin-top: -80px;
overflow: hidden;
padding-bottom: 150px;
}
.blue-section {
background-color: #0F679B;
color: #fff;
transform: skewY(3deg);
position: relative;
padding: 100px 0;
padding-top: 180px;
margin-top: -80px;
overflow: hidden;
}
.product-header-content {position: relative; transform: skewY(-3deg);}
.product-header-copy {width:55%;}
.product-header-image {
width: 40%;
position: absolute;
right: 0;
bottom: -320px;
max-width: 500px;
z-index: 4;
animation: slideUpp 0.8s ease-out forwards;
}
.yellow-circle {
background-color: #810CC9;
width: 45vw;
height: 45vw;
border-radius: 50%;
max-width: 650px;
max-height: 650px;
margin: 0 auto;
position: absolute;
right: 0;
bottom: -400px;
z-index: 2;
}
.red-circle {
background-color:#164974;
width: 45vw;
height: 45vw;
border-radius: 50%;
max-width: 650px;
max-height: 650px;
margin: 0 auto;
position: absolute;
right: 0;
bottom: -400px;
z-index: 2;
}
.invest-flex {display: flex; justify-content: space-between; align-items: flex-end; color:#000; padding-top:50px; margin-top: 0px; position: relative; z-index: 5;}
.invest-image {
width: 38%;
z-index: 4;
background-size: cover;
position: relative;
background-position: center;
border-radius: 5px;
min-height: 400px;
box-shadow: 0px 5px 11px #00000059;
transition: 0.5s;
}
.invest-image:hover {transform: scale(0.95);}
.blog .circuit {top:-70px !important;}
.image-caption {color:#fff; position: absolute; top:0; left: 0; padding: 20px; width: 50%;}
.image-caption{background:#3BBA86;}
.invest-copy {width: 58%;}
.why-section-internal {
position: relative;
padding: 80px 20px;
text-align: left; padding-bottom: 300px;
}
.why-section-internal .circuit {
position: absolute;
right: 0;
top: 50px;
opacity: 0.5;
width: 20%;
}
.why-section-internal .circuit img { transform: rotate(90deg);}
.yellow-circles2 {position: absolute; width: 15%; right:5%; bottom: 100px; z-index: 4;}
.why-section-internal h2 {text-align: left; margin-bottom:0px; color:#272626; }
.why-internal-flex {
display: flex;
flex-wrap: wrap;
gap: 2%;
}
.accordion h3 {margin: 0;}
.accordion .accordion-title {
position: relative; 
z-index: 4;
width: 70%;
background: #3BBA86;
color: #fff;
margin-top: 20px;
padding: 20px;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
font-size: 1.2rem;
}
.why-internal-copy {
position: relative; z-index: 4;
width: 70%;
background: #3BBA86;
color: #fff;
margin-bottom: 40px;
padding: 30px;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
font-size: 1.2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.why-internal-copy:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.why-internal-copy p {
margin: 0;
}
.why-section-image {
position: absolute;
right: 0px;
bottom: -10px;
z-index: 1;
width: 50%;
}
.other-sections-flex {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
color:#272626;
}
.more-information {width: 40%; padding-top:40px; padding-right: 20px; position: relative;}
.more-information .circuit {
position: absolute;
bottom: 10%;
width: 80%;
left: -800px;
opacity: 0.1;
transition: 1s;
}
.more-information .circuit.show {left: -100px;}
.read-more-link { font-family: "Poppins", sans-serif; font-weight: 700; color:#272626; position: relative; display: inline-block;}
.read-more-link:after {content:''; position: absolute; width: 40px; height: 40px;  top:-6px; right:-45px; background-image: url(//autom8.treff.uk/wp-content/themes/autom8/images/purple-arrow.png); background-size: contain; background-position: center; background-repeat: no-repeat;}
.read-more-link a {color:#272626;}
.page-template-insurance .read-more-link:after {background-image: url(//autom8.treff.uk/wp-content/themes/autom8/images/blue-arrow.png);}
.other-pages {width: 60%; display: flex; justify-content: space-between; flex-wrap: wrap; position: relative; padding:40px;}
.other-pages a {width: 48%; color:#272626; transition: 0.5s; position: relative;z-index: 4;}
.other-pages a:hover {transform: scale(1.05);}
.other-pages a:visited {color:#272626;}
.other-page1 {width: 100%; position: relative; z-index: 4; background:#fff; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); border-radius: 5px;}
.other-page2 {width: 100%; position: relative; z-index: 4; background:#fff; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); border-radius: 5px;}
.bg-box {position: absolute; border-radius: 5px; right:0; top:-20px; width: 100%; height: 250px; background:#571F79; z-index: 1;}
.page-template-insurance .bg-box {background:#0F679B;}
.other-page-image {
border-radius: 5px;
overflow: hidden;
max-height: 200px;
}
.other-page-image img {width: 100%; height: 100%; object-fit: cover;}
.other-page-copy {padding: 20px;}
.schedule-demo-section {color:#272626; margin-top:100px;}
.schedule-flex {display: flex; justify-content: space-between; padding-bottom: 80px;}
.schedule-images {width: 49%; position: relative;}
.schedule-copy {width: 49%; position: relative; z-index: 4;}
.schedule-image1 {position: absolute; width: 200px; height:200px; left:0; top:-50px; background-size: cover; background-position: center; border-radius: 5px;}
.schedule-image2 {position: absolute; width: 250px; height:250px; right:3%; top:-100px; background-size: cover; background-position: center; border-radius: 5px;}
.schedule-image3 {position: absolute; width: 350px; height:300px; right:25%; top:0px; background-size: cover; background-position: center; border-radius: 5px;}
.page-template-contact .footer-form-flex {display: none;}
.page-template-the-tech .schedule-demo-section .features-container h2 {margin-bottom: 40px;}
.insurance-split-flex {display: flex; padding-top:100px;}
.block-section {background-color: #0F679B; color:#fff; width: 65%; border-radius: 5px; padding: 40px; padding-right:100px; position: relative; overflow: hidden;}
.image-section {width: 40%; position: relative; z-index: 5; border-radius: 5px; box-shadow: 0px 3px 6px #00000029; left:-5%; height:auto; top:150px; background-size: cover; background-position: center; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);}
.red-circle3 {position: absolute; width: 40%; top:40px; left:-10%; box-shadow: none !important; opacity: 0.6;}
.red-circle4 {position: absolute; width: 100px; top:40px; right:30%; box-shadow: none !important; opacity: 0.6;}
.red-circle5 {position: absolute; width: 50px; top:40%; right:10%; box-shadow: none !important; opacity: 0.6;}
.red-circle6 {position: absolute; width: 100px; bottom:40px; right:50%; box-shadow: none !important; opacity: 0.6;}
.block-section h2, p {position: relative; z-index: 4;}
.red-section .red-circle3 {position: absolute; width: 40%; top:40px; left:-10%; box-shadow: none !important; opacity: 0.6;}
.red-section .red-circle4 {position: absolute; width: 100px; top:40px; right:30%; box-shadow: none !important; opacity: 0.6;}
.red-section .red-circle5 {position: absolute; width: 50px; top:40%; right:10%; box-shadow: none !important; opacity: 0.6;}
.red-section .red-circle6 {position: absolute; width: 100px; bottom:40px; right:50%; box-shadow: none !important; opacity: 0.6;}
.page-template-insurance .why-section-internal {margin-top:50px;}
.page-template-insurance .why-section-internal {padding-bottom: 40px;} 
.page-template-insurance .why-box-content {background:#D90E52;}
.why-final-copy {width: 60%;}
.page-template-invest .header-circle {z-index: 2; opacity: 1;}
.page-template-invest .header-circle2 {top:100px; bottom: inherit;}
.page-template-invest .header-circle3 {bottom: 350px;}
.page-template-invest .large-header-circle {top:-15%; width: 65%;}
.invest-split {margin-top:-100px;}
.home .footer-skewed {margin-top:-100px;}
.page-template-invest .footer-skewed {margin-top:-80px;}
.page-template-invest .sub-hero {background:#0F679B;}
.page-template-invest .product-header-copy {width: 50%; text-align: left;}
.page-template-invest .hero-content {max-width: 100%;} .page-template-invest .product-header-image {max-width: 100%; width: 55%; bottom: inherit; right:-5%; top:-130px;}
.page-template-invest .website-intro {background:rgb(87 31 121 / 100%); padding-bottom: 0;}
.page-template-invest .hero-container::after {background:rgb(87 31 121 / 100%);}
.page-template-invest .website-intro-copy {text-align: left; width: 60%;}
.page-template-invest .sub-hero {padding-bottom: 200px;} .invest-intro-title {width: 60%; color:#fff; margin:0; margin-bottom: 40px;} .page-template-invest .hero-container::after {transform: skewY(3deg); bottom:0;}
.why-invest-section{margin-top:100px; padding-bottom: 50px;}
.page-template-invest .why-invest-section p {font-weight: 500;}
.why-invest-title {color: #272626; margin-bottom: 40px; position: relative; z-index: 5;}
.why-invest-flex {display: flex; flex-wrap: wrap; position: relative; z-index: 5;}
.why-content {width: 40%; margin-bottom: 20px; margin-right:40px;}
.page-template-request-a-demo .product-header-copy {width: 50%; text-align: left;}
.page-template-request-a-demo .hero-content {max-width: 100%;} 
.page-template-request-a-demo .product-header-image {max-width: 100%; width: 55%; bottom: inherit; right:-5%; top:-130px;}
.page-template-request-a-demo .website-intro-copy {text-align: left; width: 60%;}
.page-template-request-a-demo .blue-circle {background-color: #571F79;}
div#why_supporting_image {
position: absolute;
right: 0;
bottom: -180px; width: 20%;
}
.blue-skew {background:#0F679B; transform: skewY(4deg); margin-top:50px;}
.blue-copy-anti-skew {transform: skewY(-4deg);}
.split-section {display: flex; justify-content: space-between; color:#fff; flex-wrap: wrap; padding: 100px 0;}
.invest-copy-left {width:53%; position: relative; z-index: 4;}
.right-image {height: auto; position: relative; z-index: 4; width: 44%; border-radius: 30px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); background-size: cover; background-position: center;}
.right-form {width: 44%; padding: 20px; position: relative; z-index: 4; background:#0799DB; color:#fff; box-shadow: 0px 8px 10px #00000029;}
input.wpcf7-form-control.wpcf7-text {
width: 100%;
border: 0;
border-radius: 0;
border-bottom: 2px solid #fff;
background: transparent;
}
.wpcf7-list-item {margin: 0;}
::-webkit-input-placeholder { color: #fff !important;
opacity: 1;
font-family: "Poppins", sans-serif;
}
:-moz-placeholder { color: #fff !important;
opacity: 1;
font-family: "Poppins", sans-serif;
}
::-moz-placeholder { color: #fff !important;
opacity: 1;
font-family: "Poppins", sans-serif;
}
:-ms-input-placeholder { color: #fff !important;
opacity: 1;
font-family: "Poppins", sans-serif;
}
.blog-skewed {
position: relative;
width: 100%;
background:transparent;
transform: skewY(2deg);
padding:  100px 0;
margin-top: -100px;
padding-top:50px;
padding-bottom: 0;
z-index: 5;
}
.blog .footer-skewed{margin-top:-100px; position: relative; z-index: 5;}
.blog .footer-latest-posts {display: none;}
.blog-content { transform: skewY(-2deg); }
.blog-page-header {background:transparent; padding-bottom: 100px;}
#category-filter-form {margin-top: 200px;}
.blog-flex {display: flex; justify-content: space-between; flex-wrap: wrap;}
.blog-flex article {width: 31%; margin-bottom: 40px; padding:0; background:#571F79; border:none; color:#fff; border-radius: 5px; overflow: hidden; box-shadow: 0px 3px 6px #00000029;}
.post-image {
width: 100%;
height: 200px;
background-size: cover;
background-position: center;
}
.post-content {color:#fff; padding: 20px;}
.post-content h2 {font-size: 2vw; font-weight: 500; margin:0;}
.post-content p {margin: 0;}
article{transition: 0.5s;}
article:hover {transform:scale(1.05);} .blog-flex article:nth-of-type(1)  {width: 64%;}
.blog-flex article:nth-of-type(1) a{display: flex; align-items: center; height: 100%;}
.blog-flex article:nth-of-type(1) a .post-image{width: 60%; height: 100%;}
.blog-flex article:nth-of-type(1) a .post-content{width: 40%;} .blog-flex article:nth-of-type(2) {width: 33%;}
.read-more-button {width: 50px; margin-top: 10px; transition: 0.5s}
.read-more-button img {width: 100%;}
.read-more-button:hover {transform: scale(1.2);} #category-buttons {
margin-top: 0px;
margin-bottom: 40px;
}
.category-filter-button {
background-color: #0073aa;
color: white;
border: none;
padding: 10px 20px;
margin: 5px;
cursor: pointer;
font-size: 16px;
border-radius: 5px;
} .category-filter-button.active {
background-color: #810CC9;
border: 2px solid #810CC9; color:#fff;
}
.category-filter-button.active:before {display: none;}
.category-filter-button {padding: 10px 20px; border-radius: 5px; text-align: center; box-shadow: 0px 3px 6px #DBDBDB; border:3px solid #DBDBDB; position: relative; font-family: "Nunito", sans-serif; font-size: 1.5vw; letter-spacing: 0.4vw; transition: 0.2s; color:#272626; background:#fff;}
.category-filter-button:hover {animation: shake 0.5s ease;}
.category-filter-button:before {content: ''; z-index: 3; width: 38%; height: 112%; position: absolute; left: -3px; top: -3px; background: #DBDBDB; border-radius: 5px; z-index: 0; transition: 0.2s;}
.category-filter-button:hover:before {width: 102%;}
.category-filter-button text {position: relative; z-index: 4;}
.page-template-the-tech .skewed-container {background:#571F79; padding-bottom: 150px; transform: skewY(5deg);     background-image: repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 2px, transparent 2px, transparent 40px), repeating-linear-gradient(-60deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 2px, transparent 2px, transparent 40px);}
.page-template-the-tech .skewed-container .container {transform: skewY(-5deg);}
.page-template-the-tech .split-copy-title:after {background-image: url(//autom8.treff.uk/wp-content/themes/autom8/images/light-purple-arrow.png) !important; left:40%; top:-22px;}
.page-template-the-tech .skewed-container .website-intro-logo {bottom:-350px;}
.page-template-fleet-training .skewed-container {padding: 40px 0; padding-bottom: 40px; transform: skewY(2deg); margin-top:80px; z-index: 5; background:#571F79; background-image: repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 2px, transparent 2px, transparent 40px), repeating-linear-gradient(-60deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 2px, transparent 2px, transparent 40px);}
.page-template-fleet-training .skewed-container .container {transform: skewY(-2deg);}
.page-template-insurance .skewed-container {padding: 40px 0; padding-bottom: 40px; transform: skewY(2deg); margin-top:80px; z-index: 5; background:#0F679B; background-image: repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 2px, transparent 2px, transparent 40px), repeating-linear-gradient(-60deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 2px, transparent 2px, transparent 40px);}
.page-template-insurance .skewed-container .container {transform: skewY(-2deg);}
.skewed-container .carousel-master {transform: skewY(-2deg);}
.full-width-copy {margin-top: 120px; color:#272626; margin-bottom: 50px; position: relative;}
.full-width-copy .circuit {
width: 25%;
top: -120px;
left: -50px;
opacity: 0.1;
position: absolute;
}
.full-width-copy h2, p, ul {position: relative; z-index: 4;}
.page-template-the-tech .block-section {background:#571F79;}
.insurance-split-section {position: relative;}
.person-image {position: absolute; right: 25%; z-index: 4; width: 210px; top:200px; transition: 1s;}
.person-image.show {top: -20px;}
.page-template.page-template-insurance .person-image {position: absolute; right: 10%; z-index: 4; width: 300px;top: 200px; z-index: 5;}
.page-template.page-template-insurance .person-image.show {top: -20px;}
.tech-circle1 {box-shadow: none !important; width: 100px; position: absolute; right:20%; top:0;}
.tech-circle2 {box-shadow: none !important; width: 50px; position: absolute; right:15%; top:100px;}
.page-template-the-tech .schedule-flex {align-items: center; margin-top:200px;}
.page-template-the-tech .schedule-demo-section {margin-top: 120px;}
.page-template-the-tech .schedule-images {top:-100px;}
.table-title {color:#fff; margin-bottom: 40px;}
table {
width: 100%;
border-collapse: separate; border-spacing: 0; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
overflow: hidden;
border:none;
position: relative;
z-index: 4;}
th, td {
padding: 15px;
text-align: left;
color: #fff;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
th {
background-color: #3BBA86;
font-family: "Nunito", sans-serif; font-size: clamp(22px, 1.8vw, 32px); font-weight: 700;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
td {
background-color: #571F79;
}
td p {margin:0;}
table tr:last-child td:nth-child(1),
table tr:last-child td:nth-child(2),
table tr:last-child td:nth-child(3) {
border-bottom: none; }
table td:nth-child(3),
table td:nth-child(6),
table td:nth-child(9),
table td:nth-child(12),
table td:nth-child(15),
table td:nth-child(18) {
border-right: none; }
.bold-table p{font-weight: 700;}
.table-copy {width: 50%; color:#fff;}
.table-section {margin-top:40px; overflow: hidden; background: transparent linear-gradient(180deg, #571F79 0%, #2C103D 100%) 0% 0% !important; padding: 100px 0 !important; position: relative;}
.table-circle {width: 30%; position: absolute; z-index: 2; right:5%; bottom:-100px; box-shadow: none !important;}
.table-circle2 {width: 5%; position: absolute; z-index: 2; right:35%; bottom:-100px; box-shadow: none !important;}
.table-image {
position: absolute;
width: 300px;
right: -50px;
bottom: -190px;
z-index: 5;
}
.copy-section .circuit {position: absolute; right: -20px; transform: rotate(90deg); opacity: 0.1; top:150px; width: 20%;}
.copy-section {padding-top:100px;}
.copy-section .why-sideways {
position: absolute;
bottom: inherit;
left: 20px;
width: auto;
height: 50px;
top: 545px;
}
.copy-section .image-right {
width: 50%;
height: auto;}
.copy-block {padding-left: 40px; margin-bottom: 40px; color:#272626;}
.copy-flex {display: flex; flex-wrap: wrap; justify-content: space-between; color:#272626;}
.copy-section .copy-left {width: 48%; margin-bottom: 40px; color:#272626;}
.copy-section .copy-right {width: 48%; color:#272626;}
.blog-image {width: 100%; height: 300px; background-size: cover; background-position: center; border-radius: 5px; transition: 0.5s; animation: slideUp 0.5s forwards; } .footer-skewed {transform: skewY(5deg); z-index: 4; margin-top:100px; background: linear-gradient(0deg, rgba(87, 31, 121, 1) 0%, rgba(170, 113, 204, 1) 100%); position: relative; padding: 150px 0; padding-bottom: 50px;}
.footer-anti-skew {transform: skewY(-5deg);}
.latest-posts-container {display: flex; justify-content: space-between; flex-wrap: wrap;}
.latest-posts-container .post {width: 30%; background: #571F79 0% 0% no-repeat padding-box; box-shadow: 0px 3px 6px #00000029; border-radius: 5px;}
.latest-posts-container .post-image {height: 250px; width: 100%; border-radius: 5px;}
.latest-posts-container .post-content {padding: 20px;}
.latest-pots-container {width: 100%; color:#fff; text-align: center; margin:auto; margin-bottom: 40px; max-width: 450px; position: relative; z-index: 4;}
.footer-latest-posts {position: relative; z-index: 4;}
.footer-form-flex {display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 50px; position: relative; align-items: center;}
.footer-copy {width: 48%; padding-right:20px; color:#fff; position: relative; z-index: 4;}
.footer-form-flex .large-header-circle {top:-150px; width: 60%; left: -15%;}
.footer-form {width: 48%; background: #571F79 0% 0% no-repeat padding-box; box-shadow: 0px 8px 10px #00000029; padding:20px; border-radius: 5px;}
.footer-form .h2-title {color:#fff; margin-bottom: 20px;}
.footer-copy .h2-title .bold-heading {font-size: clamp(20px, 3vw, 34px);}
.footer-info {display: flex; justify-content: space-between; flex-wrap: wrap; position: relative; z-index: 4; align-items: center; margin-top:20px;}
.footer-logo {width: 20%;}
.footer-details {color:#fff; width: 60%;}
.footer-details a {color:#fff; text-decoration: none;}
.footer-social {display: flex; justify-content: flex-end; flex-wrap: wrap; width: 20%;}
.social-icon {width: 50px; height: 50px;}
.social-icon img {width: 100%;}
.footer-sign-off {background:#F9F9FC; position: relative; z-index: 5;}
.sign-off-flex {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.website-by {text-align: right; color:#272626;}
.website-by a {color:#272626; text-decoration: none;}
.copyright {color:#272626;}
.footer-form span.wpcf7-list-item-label {color:#fff;}
input {color:#fff;}
.form-flex {display: flex; justify-content: space-between; flex-wrap: wrap;}
.form-left {width: 49%;}
.form-right {width: 49%;}
textarea {
color:#fff;
width: 100%;
background: transparent;
border: none;
border-radius: 0;
border-bottom: 2px solid #fff;
height: 100px;
}
span.wpcf7-list-item-label {
color: #fff;
font-size: 16px;
}
textarea.wpcf7-form-control.wpcf7-textarea.wpcf7-validates-as-required {
color: #fff;
}
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {color:#fff;}
.contact-page-flex {display: flex; justify-content: space-between; flex-wrap: wrap; margin-top:150px; position: relative; z-index: 5;}
.contact-form-left {width: 48%; background: #571F79 0% 0% no-repeat padding-box; border-radius: 5px;
box-shadow: 0px 3px 6px #0000006A; padding: 20px;}
.contact-invest-right {width: 48%; border-radius: 5px;}
.contact-form-left .h2-title {color:#fff;}
.invest-box {padding: 20px; background: #0799DB 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #00000029; color:#fff; position: relative; border-radius: 5px;}
.contact-page-details {display: flex; justify-content: space-between; flex-wrap: wrap; margin-top:40px;}
.contact-page-details-left {width: 80%; color:#272626;}
.contact-page-details-left  a {color:#272626; text-decoration: none;}
.contact-page-details-right {width: 20%; text-align: right;}
.contact-page-details-right .social-icon {margin-bottom: 20px;}
.page-template-contact .footer-skewed{margin-top:-15px; z-index: 2;}
.contact-invest-copy {width: 60%;}
.invest-person-image {
width: 30%;
position: absolute;
right: 10px;
bottom: -6px;
}
.invest-footer {overflow: hidden;}
.invest-footer .container {position: relative; z-index: 4;}
.invest-footer .large-header-circle {width: 30%; right: 25%; top: 45%; left: inherit;}
.invest-footer .header-circle2 {left: 8%; right:inherit; top:300px;}
.navigation .cta {background:#571F79; color:#fff; font-weight: 500;}
.navigation .cta:before {content: '';  z-index: 3; width: 38%; height: 112%; position: absolute; left: -3px; top: -3px; background:#810CC9; border-radius: 5px; }
.page-template-request-a-demo .split-section {color:#272626; position: relative; z-index: 6; margin-top: 100px; padding-bottom: 0;}
.navigation .cta:before {transition: all 0.5s ease;}
.navigation .cta:hover:before {width: 103%;left: -3px;}
.why-section .circuit.images {
position: absolute;
width: 20%;
transform: rotate(90deg);
right: 40%;
top: -200px;
opacity: 0.1;
}
.footer-skewed .cta {background:#571F79; color:#fff;}
.bob {
animation-name: bobbing;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.bob1 {
animation-duration: 2.6s;
animation-delay: 0s;
}
.bob2 {
animation-duration: 2.8s;
animation-delay: 0.15s;
}
.bob3 {
animation-duration: 3s;
animation-delay: 0.3s;
}
@keyframes bobbing {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(-10px);
}
}
@keyframes bob-anim {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px); }
}
.bob-anim {
animation: bob-anim 3s ease-in-out infinite;
}
.bob-anim2 {
animation: bob-anim 4s ease-in-out infinite;
}
.bob-anim3 {
animation: bob-anim 2s ease-in-out infinite;
}
.footer-form .cta {background:#0599DB;} #copy-slide1 {position: relative; bottom: -500px; transition: 1s; opacity: 0;}
#copy-slide1.show {bottom: 0; opacity: 1;}
#copy-slide2 {position: relative; bottom: -500px; transition: 1s; opacity: 0;}
#copy-slide2.show {bottom: 0; opacity: 1;}
#copy-slide3 {position: relative; bottom: -500px; transition: 1s; opacity: 0;}
#copy-slide3.show {bottom: 0; opacity: 1;}
#copy-slide4 {position: relative; bottom: -500px; transition: 1s; opacity: 0;}
#copy-slide4.show {bottom: 0; opacity: 1;}
#copy-slide5 {position: relative; bottom: -500px; transition: 1s; opacity: 0;}
#copy-slide5.show {bottom: 0; opacity: 1;}
#copy-slide6 {position: relative; bottom: -500px; transition: 1s; opacity: 0;}
#copy-slide6.show {bottom: 0; opacity: 1;}
#copy-slide7 {position: relative; bottom: -500px; transition: 1s; opacity: 0;}
#copy-slide7.show {bottom: 0; opacity: 1;}
#copy-slide8 {position: relative; bottom: -500px; transition: 1s; opacity: 0;}
#copy-slide8.show {bottom: 0; opacity: 1;}
#copy-slide9 {position: relative; bottom: -500px; transition: 1s; opacity: 0;}
#copy-slide9.show {bottom: 0; opacity: 1;}
#copy-slide10 {position: relative; bottom: -500px; transition: 1s; opacity: 0;}
#copy-slide10.show {bottom: 0; opacity: 1;}
#features-container {position: relative; bottom: -500px; transition: 1s; opacity: 0;}
#features-container.show {bottom: 0; opacity: 1;}
.circle-container {
position: relative;
width: 120px;
height: 120px;
margin-right:20px;
transition: 1s;
}
.circle:hover {
animation: jiggle 0.7s ease-in-out;
}
@keyframes jiggle {
0%, 100% { transform: rotate(0deg); }
15% { transform: rotate(3deg); }
30% { transform: rotate(-3deg); }
45% { transform: rotate(2deg); }
60% { transform: rotate(-2deg); }
75% { transform: rotate(1deg); }
90% { transform: rotate(-1deg); }
}
.percent-text {
position: absolute;
color: #fff;
font-family: "Poppins", sans-serif; font-weight: 700;
}
.circle-container.hidden {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.circle-container.show {
opacity: 1;
transform: translateY(0);
}
@keyframes slideUpp {
from {
bottom: -500px;
opacity: 0;
}
to {
bottom: -320px;
opacity: 1;
}
}
.single .copy-block {padding-left: 0;}
.table-container {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; }
.table-container table {
width: 100%;
min-width: 600px; border-collapse: collapse;
}
#mega-menu-wrap-menu-1 .mega-menu-toggle {background:transparent !important;}
.single-post .skewed-container {margin-bottom: 100px; padding-bottom: 100px;}
.single-post .insurance-split-flex {padding-top:0; margin-bottom: 180px;}
.single-post .skewed-container .website-intro-logo {bottom: -200px;}
.single-post .nav-links {display: none;}
#mega-menu-wrap-menu-1 .mega-menu-toggle.mega-menu-open + #mega-menu-menu-1 {
left: 0;
padding-top: 40px;} .error404 .hero-container::after {display: none;}
.error404 .cta-flex .cta {margin-top: 20px;}
.error404 .footer-skewed {margin-top:-40px; z-index: 5;}
.internal-page-header p {margin-top:0;} input[type="checkbox"] {
opacity: 0;
position: absolute;
}
.wpcf7-list-item label {
position: relative;
padding-left: 30px;
cursor: pointer;
display: inline-block;
line-height: 20px;
}
.wpcf7-list-item label::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 18px;
border: 2px solid #fff;
border-radius: 4px;
background: transparent;
transition: all 0.2s ease;
} .wpcf7-list-item input[type="checkbox"]:checked ~ .wpcf7-list-item-label::before {
background-color: #3BBA86;
box-shadow: inset 0 0 0 2px #fff;
}
.wpcf7-list-item label:has(input:checked)::before {
background-color: #3BBA86;
box-shadow: inset 0 0 0 1px #fff;
} input[type="checkbox"]:checked + .wpcf7-list-item-label::before,
input[type="radio"]:checked + .wpcf7-list-item-label::before {
background-color: #810CC9;
box-shadow: inset 0 0 0 2px #fff;
background:green;
}
@media only screen and (min-width: 1550px) {
.post-content h2 {font-size: 26px;}
h3 {font-size: 24px !important;}
.navigation span.button-text {font-size: 14px;}
#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link {font-size: 18px !important;}
h1 {font-size: 54px;}
h1 .bold-heading {font-size: 54px !important;}
p {font-size: 18px;}
h3 {font-size: 24px;}
span.internal-subtitle {font-size: 28px;}
.hero-content p {font-size: 18px;}
.sideways {font-size: 18px;}
.slide .label {font-size: 18px;}
.image-caption p {font-size: 28px;}
.feature h3  {font-size: 24px;}
.category-filter-button text {font-size: 20px;}
.button-text {font-size: 16px;}
.invest-image {min-height:480px;}
}
@media only screen and (max-width: 1150px) {
.why-section-image-top {top:-100px;}
}
@media only screen and (max-width: 1050px) {
#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link {font-size: 12px !important;}
.bg-vid video {display: none;}
.sub-hero {background: rgb(87 31 121 / 100%);}
.website-intro {background: rgb(87 31 121 / 100%);}
.page-template-the-tech .skewed-container .website-intro-logo {bottom: -200px;}
}
@media only screen and (max-width: 1000px) {
.intro-sideways {display: none;}
.why-section-image-top {display: none;}
.stats-copy {width: 100%;}
.vertical-slider-wrapper {width: 100%;}
.slide:nth-child(1), .slide:nth-child(3) {opacity: 1; transform: scale(1);}
.slide .label {font-size: 20px;}
.slide .circle {font-size: 22px;}
button, input[type="button"], input[type="reset"], input[type="submit"] {font-size: 18px;}
}
@media only screen and (max-width: 950px) {
.navigation .cta {padding: 10px; font-size: 12px;}
}
@media only screen and (max-width: 850px) {
.why-section {padding-top:100px;}
.page-template-request-a-demo .hero-content {flex-wrap: wrap;}
.page-template-request-a-demo .product-header-copy {width: 100%;}
.page-template-request-a-demo .right-form {width: 100%;}
.page-template-the-tech .schedule-flex {margin-top:0;}
#tech-dashes {display: none;}
.page-template-request-a-demo .product-header-copy {text-align: center !important; width: 100%;}
.page-template-request-a-demo .product-header-copy .cta {margin: auto;}
.page-template-request-a-demo .blue-circle {right:-20%;}
.page-template-request-a-demo .large-header-circle {top:0;}
.page-template-request-a-demo .header-circle2 {top:28%;}
.page-template-request-a-demo .header-circle3 {bottom:40%;}
.page-template-request-a-demo .website-intro-copy {width: 100%;}
.page-template-request-a-demo .website-intro {padding-bottom: 0;}
.page-template-request-a-demo .website-intro-logo.show {bottom: -200px;}
.contact-page-details {padding-bottom: 50px;}
.single-post .insurance-split-flex {margin-bottom: 40px;}
.page-template-invest .product-header-copy {width: 100%;}
.page-template-invest .hero-content {margin-bottom: 0;}
.page-template-invest .header-circle {display: none;}
.page-template-the-tech-php .insurance-split-flex.container {padding-top: 0;}
.page-template-the-tech-php .schedule-copy {margin-bottom: 200px;}
.contact-form-left {width: 100%; margin-bottom: 40px;}
.contact-invest-right {width: 100%;}
.product-header-copy {width: 100%;}
.product-header-image {display: none;}
.schedule-flex {flex-wrap: wrap; flex-direction: column-reverse;}
.schedule-copy {width: 100%; margin-bottom: 40px;}
.schedule-images {width: 100%;}
.team-profile {width: 49%;}
.schedule-copy {margin-bottom: 100px;}
.schedule-images {z-index: 5;}
.schedule-image2 {right: 0;}
.schedule-image3 {right:20%; top:-35px;}
.schedule-image1 {width: 340px; height: 250px;}
.latest-posts-container .post {width: 100%;}
.latest-posts-container .post a {width: 100%; display: flex; align-items: center;}
.latest-posts-container .post-image {width: 50%;}
li#mega-menu-item-350 {display: block !important;}
.navigation .cta {display: none;}
.insurance-split-flex {flex-wrap: wrap;}
.block-section {width: 100%; padding:20px;}
.page-template.page-template-insurance .person-image {display: none;}
.person-image {display: none;}
.blog-flex article {width: 100%;}
.blog-flex article a {display: flex; align-items: center;}
.blog-flex article:nth-of-type(1) {width: 100%;}
.blog-flex article:nth-of-type(2) {width: 100%;}
.blog-flex article:nth-of-type(1) a .post-image {width: 55%;}
.blog-flex article a .post-image {width: 55%; height: 240px;}
.blog-flex .post-content {width: 45%;}
.schedule-demo-section {margin-top:40px !important;}
}
@media only screen and (max-width: 750px) {
.dashes3 {display: none;}
.internal-page-header {padding-top:150px;}
.why-section {padding-top:80px;}
.internal-page-header h1 {margin-bottom: 10px;}
h1 .bold-heading {font-size: 38px !important; line-height: 38px;}
span.internal-subtitle {font-size: 20px;}
#loading-screen {display: none;}
.large-header-circle {top:0;}
.footer-copy .h2-title {line-height: 32px;}
.image-caption {display: none;}
.features-container {margin-top: 40px; padding-top:0;}
.page-template-the-tech-php .copy-block {padding-left: 0;}
.dashes.dashes5.rellax {display: none;}
.copy-section .copy-left {width: 100%;}
.copy-section .copy-right {width: 100%; margin-bottom: 40px;}
li {font-size: 16px;}
.why-section-image {display: none;}
.accordion .accordion-title {width: 100%;}
.accordion .accordion-content.open {width: 90%;}
.why-internal-copy {width: 100%;}
.more-information {width: 100%; margin-bottom: 40px;}
.other-pages {width: 100%; padding: 40px 0;}
.invest-flex {flex-wrap: wrap; flex-direction: column-reverse; margin-top:0;}
.invest-image {width: 100%; min-height: 200px;}
.invest-copy {width: 100%; margin-bottom: 40px;}
.header-logo {width: 100%;}
h1 {font-size: 38px; line-height: 38px;}
h2 {font-size: 32px; line-height: 32px;}
h3 {font-size: 20px; line-height: 20px;}
.feature h3 {font-size: 20px;}
.page-link-a a {font-size: 14px;}
.bold-heading {font-size: 32px;}
.hero-content .bold-heading{font-size: 34px;}
.hero-content p {font-size: 18px;}
p {font-size: 16px;}
.cta {font-size: 16px;}
.why-section{padding-bottom: 200px;}
.why-flex {flex-wrap: wrap; padding: 0;}
.why-copy {width: 100%; padding-left: 0; padding:0 20px;}
.why-sideways {display: none;}
.carousels-container {width: 100%; position: relative; top:0;}
.carousel-right {display: none;}
.carousel-wrapper {width: 100%;}
.carousel-track {flex-direction: row;}
.carousel-image {margin:20px; min-width: 200px;}
.links-flex {flex-wrap: wrap;}
.links-left {width: 100%;}
.links-right {width: 100%;}
.page-link {flex-direction: column;}
.page-link-image {width: 100%;}
.page-link-copy {width: 100%;}
.features-first {width: 100%; margin-bottom: 40px;}
.feature {width: 100%;}
.intro-sideways {display: none;}
.the-product-right .product-sideways {display: none;}
.split-copy {flex-wrap: wrap; flex-direction: column;}
.split-copy-title {width: 100%;}
.split-copy-text {width: 100%;}
.split-copy-title:after {display: none;}
.skewed-container .website-intro-logo.show {bottom: -200px; left: inherit; right: 0;}
.footer-copy {width: 100%; margin-bottom: 40px;}
.footer-form {width:100%;}
.dashes2 {display: none;}
#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link {font-size: 20px !important;}
.page-template-insurance .features-flex {margin-top:40px;}
}
@media only screen and (max-width: 650px) {
.page-template-the-tech .block-section {margin-top:40px;}
.site-footer .circuit {width: 50%;}
.insurance-split-section {margin-top:-50px;}
.block-section {border-radius: 0; padding:50px 20px; padding-top:100px;}
.yellow-section {padding-bottom: 40px;}
.home .website-intro-logo.show {bottom: -200px;}
.page-template-invest .footer-skewed {margin-top:50px;}
.right-form {width: 100%;}
.invest-split {padding: 0; margin-top:40px;}
.split-section{padding-bottom: 0;}
.invest-copy-left {width: 100%;}
.right-image {width: 100%; height: 250px;}
.website-intro-logo {opacity: 0.5; width: 50%;}
.website-intro-logo.show {bottom:-50px;}
.invest-dashes3 {display: none;}
.page-template-invest .website-intro-flex .dashes {display: none;}
.invest-intro-title {width: 100%; margin-bottom: 0;}
.page-template-invest .website-intro-copy {width: 100%; position: relative; z-index: 4;}
.blog-flex article a {flex-direction: column;}
.blog-flex article:nth-of-type(1) {width: 100%;}
.blog-flex article:nth-of-type(1) a .post-content{width: 100%;}
.blog-flex article:nth-of-type(1) a .post-image {width: 100%; height: 240px;}
.blog-flex article:nth-of-type(1) a{flex-direction: column;}
.blog-flex article a .post-image {width: 100%; height: 240px;}
.blog-flex .post-content {width: 100%;}
.schedule-copy {margin-bottom: 0px;} 
.schedule-images {display: none;}
.other-pages a {width: 100%; margin-bottom: 20px;}
.website-intro-space {display: none;}
.website-intro-copy {width: 100%; position: relative; z-index: 4; text-align: left;}
.the-product {flex-wrap: wrap;}
.the-product-left {width: 100%; margin-bottom: 20px;}
.the-product-right {width: 100%;}
.image-left {width: 100%;}
.image-right {display: none;}
.team-profile {width: 100%;} 
.latest-posts-container .post a{flex-direction: column;}
.latest-posts-container .post-image {width: 100%;}
.insurance-split-flex.container {padding: 0;}
.stats-section {margin-bottom: 40px;}
#category-buttons {display: none;}
.post-content h2 {font-size: 22px;}
.page-template-the-tech-php .schedule-copy {margin-bottom: 0;}
.website-intro-flex .dashes {display: none;}
.home .large-header-circle {display: none;}
}
@media only screen and (max-width: 550px) {
.form-left {width: 100%;}
.form-right {width: 100%;}
.page-template-the-tech .full-width-copy {margin-top:80px;}
.page-template-the-tech .skewed-container .website-intro-logo {bottom: -160px;}
.hero-content {margin-bottom: 100px;}
.slide:nth-child(1),.slide:nth-child(2), .slide:nth-child(3) {height: 80px;}
.slide {height: 80px;}
.why-box-content {width: 100%;}
.page-template-invest  .why-content {width: 100%;}
.why-final-copy {width: 100%;}
div#why_supporting_image {display: none;}
div#invest-dashes {width: 100%;}
.dashes4 {width: 100%;}
.cta-flex {flex-wrap: wrap; justify-content: center;}
.cta-flex a {width: 100%; margin:auto; text-align: center; margin-top:10px;}
.cta-flex .cta {margin:auto;}
.slide .label {font-size: 16px;}
.slider-dots {display: none;}
.slide {justify-content: space-between; padding:0;}
.slide .circle {position: relative; width: 25%; font-size: 16px; margin-right: 5px;}
.slide .label {width: 70%;}
.table-copy {width: 100%;}
.table-image {bottom: -300px;}
.table-section {padding-bottom: 20px !important;}
.page-template-the-tech .copy-section {padding-top:50px;}
.table-image {display: none;}
span.wpcf7-list-item-label  {font-size: 12px;}
}
@media only screen and (max-width: 450px) {
.sign-off-flex p {margin:0;}
.sign-off-flex {flex-direction: row-reverse; justify-content: flex-end;} 
.footer-logo {width: 100%;}
.footer-details {width: 100%;}
.footer-social {width: 100%; justify-content: flex-start;}
.contact-invest-copy {width: 100%;}
.invest-person-image {display: none;}
h1 {font-size: 32px !important; line-height: 32px;}
h1 .bold-heading {font-size: 32px !important; line-height: 32px;}
span.internal-subtitle {font-size: 16px;}
.internal-page-header p {line-height: 22px;}
}