/*
Theme Name:   Car Capital
Theme URI:    http://www.carcapital.co.za
Description:  Theme for Car Capital
Author:  Liquid Thought
Author URI:  https://www.liquidthought.co.za
Version:  1.0.0
Text Domain:  standard
*/
*,a,div,ul,li,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
article,aside,details,figcaption,figure,footer,header,nav,section,summary{display:block}
img {max-width:100%;height:auto;}
h1, h2, h3, h4, h5, p {margin:0px;}
:root{
--green:#22D66B;
--dark-grey:#18191B;
--blue:#0697FD;
--light-grey:#F6F6F6;
--pink:#FB3976;
}

html, body {margin:0px;padding:0px;background:#fff;height:100%;width:100%;}
body {color:black;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;font-family: "Urbanist", sans-serif;font-optical-sizing: auto;font-weight: 400;font-style: normal;font-size:24px;line-height:1.5em;}
a {color:var(--pink);text-decoration:underline;font-weight: 700;text-underline-position: initial;}
.textbox {font-family: "Urbanist";}

@font-face {
  font-family: 'dealer-icons';
  src: url('fonts/dealer-fonts.eot?48719703');
  src: url('fonts/dealer-fonts.eot?48719703#iefix') format('embedded-opentype'),
       url('fonts/dealer-fonts.woff2?48719703') format('woff2'),
       url('fonts/dealer-fonts.woff?48719703') format('woff'),
       url('fonts/dealer-fonts.ttf?48719703') format('truetype'),
       url('fonts/dealer-fonts.svg?48719703#stachion-icons') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.icons, .button.arrow:after, a.more:after, .slick-next:before, .slick-prev:before, .contact .icon:before, .social:before, a.back-to-top:before {font-family: "dealer-icons";font-style: normal;font-weight: normal;speak: never;}


h2 {font-size: 44px;
    font-style: italic;
    font-weight: 900;line-height: 1.2em;letter-spacing: 1px;text-transform: uppercase;}

.main-width {width:100%;max-width:1440px;margin:0 auto;padding:0 20px;}

.flex {display:flex;}

@media screen and (max-width:1440px){
.main-width.padded {padding-left: calc(100vw / 12);}
.main-width.padded.paddedright {padding-left: calc(100vw / 12);padding-right: calc(100vw / 12);}
}

@media screen and (max-width:768px){
    body {font-size:18px;}
    .main-width.padded.paddedright {padding-left:20px;padding-right:20px;}
    .main-width.padded {padding-left:20px;}
    h2 {font-size: 28px;}
}
@media screen and (max-width:576px){
    body, p {font-size:14px;}
}

/* general ================================== */
strong {font-weight:600;}
/* Base button styles */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 55px;
    padding: 0 24px;
    font-size: 23px;
    font-style: italic;
    font-weight: 700;
    line-height: 150%; 
    letter-spacing: 0.48px;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    color: var(--dark-grey);
    border: 2px solid var(--green);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    background: transparent;

    /* Apply slanted edges */
    transform: skewX(-15deg);
}

/* Correct text alignment after skewing */
.button > span {
    display: inline-block;
    transform: skewX(15deg);
}

/* Filled button (Green) */
.button-green {
    background: var(--green);
    color: var(--dark-grey);
}

.button-green:hover {
    background: var(--white);
    color: var(--green);
}

/* Outlined button (Inverse) */
.button-green.inverse {
    background: transparent;
    color: var(--akismet-color-white);
    border: 2px solid var(--green);
}

.button-green.inverse:hover {
    background: var(--green);
    color: var(--dark-grey);
}

/* Arrow effect for button */
.button.arrow::after {
    content: "\e809";
    font-size: 16px;
    margin-left: 20px;
    transition: transform 0.3s ease;
}

.button.arrow:hover::after {
    transform: translateX(5px);
}
a.more {text-decoration:none;color:var(--dark-grey);font-weight:400;display: block;transition:all .3s linear;}
a.more strong {text-decoration:underline;font-weight:700;text-underline-offset: 6px;text-decoration-thickness: 2px;}
a.more:after {content:"\e808";margin-left: 12px;font-size: 18px;}
a.more:hover {color:var(--pink)}

/* Filled button (Pink) */
.button-pink {
    background: var(--pink);
    color: #fff;
    border: 0;
}


@media screen and (max-width:1100px){
    .button {font-size:13px;}
}

@media screen and (max-width:576px){
    .button {font-size:15px;height:42px;}
    a.more {font-size:18px;}
    .button.arrow:after {font-size: 12px;position: absolute;right: 20px;}
}

.loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: relative;
  animation: rotate 1s linear infinite;
display:block;
}
.loader::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  border: 4px solid var(--green);
  animation: prixClipFix 2s linear infinite ;
}

@keyframes rotate {
  100%   {transform: rotate(360deg)}
}

@keyframes prixClipFix {
    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}




/* header ================================== */
header {background:var(--dark-grey);position:fixed;top:0px;left:0px;width:100%;z-index: 10;height: 96px;}
header .logo img {max-width:150px;margin:8px 20px 20px 0;display: block;}
header .main-width.flex {justify-content: space-between;align-items: center;}
.nav  {width:100%; max-width:530px;}
.nav ul {display:flex;list-style: none;justify-content: space-between;}
.nav ul li {display:flex;list-style: none;}
.nav ul a {color:white;font-size: 16px;font-style: normal;font-weight: 500;letter-spacing: 0.32px;text-transform: uppercase;text-decoration:none;position:relative;transition: color 0.3s ease-in-out;}
.nav ul a:hover, .nav ul a:active {color: #FB3976;}
.nav ul a.active {color: #FB3976;}
.hamburger {width:25px;display:none;position:relative;}
.hamburger>div {width:100%;height:2px;margin-bottom:8px;background:white;}

@media screen and (max-width:768px){
    header {background:none;height:86.7px;}
    header.background {background:var(--dark-grey);}
    header .logo img {max-width:54.589px;transform: translateY(-1px);margin: 0;}
    header.open .nav {display:flex;top:0;position:fixed;background:#000;left:0;width:100%;height:100%;max-width: none;}
    header.open .hamburger>div {position: absolute;top: -5px;width: 33px;left: -3px;margin: 0px;}
    header.open .hamburger>div:nth-of-type(1) {transform: rotate(45deg);}
    header.open .hamburger>div:nth-of-type(2) {transform: rotate(-45deg);}
    header.open .hamburger>div:nth-of-type(3) {display:none;}
    header.open .nav ul {justify-content: flex-start;flex-direction: column;margin-top:75px;padding: 0px 0px 0px 20px;}
    .nav ul li {
        margin-bottom: 39px;
    }
    header.open .nav ul a {font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 130%; /* 20.8px */
        letter-spacing: 0.32px;
        text-transform: uppercase;}
    .nav  {display:none;}
    .hamburger {display:block;}
    header .main-width.flex {        height: 86.7px;}
}


/* banner ================================== */
.banner {background:var(--dark-grey);color:white;position:relative;overflow-x:clip;margin-bottom: 80px;}
.banner .mask {padding:176px 0 80px 0;overflow:hidden;}
.banner .copy {flex: 2;}
.banner h1 {color: var(--akismet-color-white);font-size: 100px;font-style: italic;font-weight: 600;line-height: 88px;margin-bottom: 40px;}
.banner h3 {color:var(--akismet-color-white);font-size: 24px;font-style: normal;font-weight: 700;line-height: 150%;letter-spacing: 0.48px;margin-bottom: 40px;}
.banner p {max-width:625px;color: var(--akismet-color-white);font-size: 24px;font-style: normal;font-weight: 400;line-height: 150%;letter-spacing: 0.48px;}
.banner .main-width.flex {justify-content: space-between;max-width:1440px;}
.banner .main-width.flex .card {flex:1;}
.banner .main-width.flex .card img {position:relative;padding-bottom: 5rem;}
.banner .button-holder {margin-top:88px;display:flex;}
.banner .button-holder .button {margin-right: 24px;}

@media screen and (max-width:1100px){
    .banner h1 {font-size: 80px;}
    .banner .main-width.flex .card img {
        max-width: 220px;
        position: absolute;
    }
    .banner .copy {
        flex: 6;
    }
}
@media screen and (max-width:768px){
    .banner h1 {font-size: 35px;line-height: 37px;max-width: 207px;margin-bottom: 24px;}
    .banner h3 {font-size: 14px;margin-bottom: 24px;}
    .banner .main-width.flex {flex-direction: column-reverse;display: inline;}
    .banner .main-width.flex .card img {        position: absolute;
        max-width: 133px;
        top: 100px;
        right: -9px;}
    .banner:before {width: 300px;height: 300px;background: url(/wp-content/themes/car-capital/images/background-arrow-mobile.svg) left top no-repeat;
    position: absolute;left: auto;top: 93%;background-size: 100%;right: 0px;}
    .banner {margin-bottom: 48px;}
    .banner .mask {padding: 150.7px 0 12px 0;}
    .banner .copy {
        padding: 0 20px;
    }
}
@media screen and (max-width:768px){
    .banner p {font-size:14px;}
    .banner .button-holder {margin-top: 32px;flex-direction: column;}
    .banner .button-holder .button {margin:0px 0px 16px 0px;}
}

.about-block {color: #000;position: absolute;
    right: 0;
    width: 50%;
    min-height: 550px;
    flex-direction: column;
    background: #fff;
    top: 0;
    padding: 170px 64px 30px 64px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s linear;
    z-index: 10;
    bottom: 0;}
.about-block.over {opacity:1;pointer-events: all;}
.about-block .content {position:relative;z-index:1;max-width: 568px;transform:translateY(50px);transition:all .3s linear;}
.about-block.over  .content {transform:translateY(0px);}
.about-block .content .but-close {width:40px;height:40px;position:absolute;right:-50px;top:-50px;background:transparent;cursor:pointer;}
.about-block .content .but-close:before,.about-block .content .but-close:after {content:"";width:20px;height:1px;background:var(--dark-grey);position:absolute;top:50%;left:10px;transform-origin: center center;transition:all .2s linear;}
.about-block .content .but-close:before {transform: rotate(45deg);}
.about-block .content .but-close:after {transform: rotate(-45deg);}
.about-block .content .but-close:hover:after, .about-block .content .but-close:hover:before {background:var(--green);}
.about-block .content h3, .about-block .content p {margin-bottom:40px;}
.about-block .content h3 {font-size: 30px;line-height: 1.3em;letter-spacing: 0.6px;}
.about-block .content p {font-size: 20px;line-height: 1.5em;letter-spacing: 0.4px;}
.about-block .content a {color:#000;text-underline-offset:8px;transition:all .3s linear;}
.about-block .content a:hover {color: var(--green);}

 @media screen and (max-width:1320px){
     .about-block .content .but-close {right:-20px;}
 }
 @media screen and (max-width:1100px){
     .about-block {left: 50px;width: calc(100% - 50px);}
     .about-block .content {width:calc(100vw - 100px);max-width:100%;}
     .about-block .content p {max-width:none;}
 }
 @media screen and (max-width:768px){
     .about-block {left: 0;width:100%;top:0;;z-index: 11;padding:70px 24px 24px 24px;        min-height: 76%;
         display: inline-table;}
     .about-block .content {width:100%;margin:0px;}
     .about-block .content h3 {font-size:20px;font-style: normal;
         font-weight: 600;
         line-height: 130%;
         letter-spacing: 0.4px;max-width: 250px;margin-bottom: 28px;}
     .about-block .content p {font-size: 14px;margin-bottom: 27px;}
     .about-block .content p:nth-of-type(2) {
         margin-bottom: 32px;
     }
     .about-block .content a {font-size:18px;text-decoration-thickness: 2px;}
     .about-block .content .but-close {        right: 0;
         width: 14px;
         height: 14px;
         top: -33px;}
     .about-block .content .but-close:before, .about-block .content .but-close:after {        width: 16px;
         height: 1px;
         left: 0;}
 }

.valuation-banner {
    background-color: var(--pink);
    color: #fff;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding: 42px 0;
}

.banner .valuation-banner .main-width.flex {
    justify-content: flex-start;
}

.valuation-banner .valuation-text {
    font-size: 30px;
    font-style: italic;
    font-weight: 900;
    line-height: 120%; /* 36px */
    letter-spacing: 0.6px;
    flex: 1;
    max-width: 558px;
}

.valuation-banner .arrow {
    font-size: 1.5rem;
    font-weight: bold;
}

.valuation-banner .address {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.4px;
    align-items: center;
    display: flex;
    flex: 3;
}

.valuation-banner .address a {
    color: #fff;
    font-size: 20px;
    font-style: italic;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.4px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

@media screen and (max-width:1100px){
    .valuation-banner .valuation-text {
        flex: 3;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .valuation-banner {
        padding: 32px 20px;
    }

    .banner .valuation-banner .main-width.flex {
        display: inline-block;
        padding: 0;
    }

    .valuation-banner .valuation-text {
        font-size: 20px;
        font-style: italic;
        font-weight: 900;
        line-height: 120%; /* 24px */
        letter-spacing: 0.4px;
    }

    .valuation-banner .address {
        font-size: 0.9rem;
    }
    .valuation-banner .arrow {
        display: none;
    }
}

@media (max-width: 480px) {
    .valuation-banner {
        padding: 32px 20px;
    }

    .valuation-banner .valuation-text {
        font-size: 20px;
        font-style: italic;
        font-weight: 900;
        line-height: 120%; /* 24px */
        letter-spacing: 0.4px;
        max-width: 220px;
        margin-bottom: 16px;
    }

    .valuation-banner .arrow {
        display: none;
    }

    .valuation-banner .address {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.28px;
        max-width: 310px;
    }

    .valuation-banner .address a {
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: 0.28px;
    }
}


/* steps ================================== */
.steps {position:relative;overflow-x:clip;padding-bottom: 80px;}
.steps h3 {color: #000;font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.4px;}
.steps h2 {
    font-size: 44px;
    font-style: italic;
    font-weight: 900;
    line-height: 140%; /* 61.6px */
    letter-spacing: 0.88px;
    text-transform: uppercase;
}
.steps .main-width {position:relative;}
.steps ol {counter-reset: item;list-style: none;display:flex;flex-wrap:wrap;margin-top:100px;}
.steps ol li {counter-increment: item;padding-left:63px;position:relative;width:50%;font-size:30px;line-height:normal;margin-bottom:100px;}
.steps ol li p {max-width:501px;line-height: 1.2em;padding-right:15px;}
.steps ol li strong {font-weight:700;}
.steps ol li::before {content: "0" counter(item);position:absolute;left:0px;top:0px;font-size:40px;font-weight:900;color:var(--pink);line-height: normal;font-style: italic;}
.steps a {color: #000;font-size: 24px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.48px;
    text-decoration: none;}
.steps a strong {font-weight:700;text-decoration: underline;}
.steps a svg {
    margin-left: 7px;
}

@media screen and (max-width:992px){
.steps ol li p {font-size:22px;}
}
@media screen and (max-width:768px){
.steps h3 {font-size: 14px;}
.steps ol {flex-direction: column;margin-top: 40px;}
.steps ol li {width:100%;padding-left:50px;margin-bottom: 40px;}
.steps ol li:before {font-size:30px;top:0px;}
.steps ol li p {max-width: none;font-size:20px;}
}

@media screen and (max-width:576px){
    .steps .button {width:100%;}
    .steps {padding-bottom:48px;}
    .steps h2 {font-size: 28px;}
    .steps a {font-size: 18px;}
}


/* faq ================================== */
.faq {background:var(--light-grey);padding:80px 0px;overflow:hidden;}
.faq h3 {color: #000;font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.4px;}
.faq h2 {
    font-size: 44px;
    font-style: italic;
    font-weight: 900;
    line-height: 140%; /* 61.6px */
    letter-spacing: 0.88px;
    text-transform: uppercase;
}
.faq .holder {width:840px;background:white;margin-right:40px;padding:64px;display:flex;height: 100%;align-items: center;}
.faq .holder.blank {background:none;align-items: center;}
.faq .holder>div:nth-of-type(1) {flex: 0 0 160px;padding-right:45px;}
.faq .holder h4 {font-size: 30px;font-weight: 800;line-height: 1.3em;letter-spacing: 0.6px;margin-bottom:15px;}
.faq .holder p {font-size: 20px;line-height: 1.5em;letter-spacing: 0.4px;}
.faq .slick-list {overflow:visible;}
.faq-carousel {margin-top:60px;}

.faq-carousel .slick-track{display: flex !important;}
.faq-carousel .slick-slide{height: inherit !important;}

.faq-carousel .slick-next, .faq-carousel .slick-prev {top:calc(100% + 73px);border:2px solid black;width:64px;height:64px;border-radius:100%;}
.slick-disabled {opacity:0.2;pointer-events: none;}
.faq-carousel .slick-next {left:84px;}
.faq-carousel .slick-prev {left:0px;}
.faq-carousel .slick-prev:before, .faq-carousel .slick-next:before  {content:"\e807";color:black;}
.faq-carousel .slick-prev:before {transform: rotate(180deg);display:block;}
.faq-carousel .slick-dots {width: auto;text-align: center;top: calc(100% + 50px);margin: 0px;left: 195px;}
.faq-carousel .slick-dots li {margin:0;width:24px;}
.faq-carousel .slick-dots li button:hover {}
.faq-carousel .slick-dots li button {width:24px;}
.faq-carousel .slick-dots li button:before {font-size: 14px;opacity:.2;transition:all .1s linear;}
.faq-carousel .slick-dots li button:hover:before {color:var(--green);opacity:1;}
.faq-carousel .slick-dots li.slick-active button:before {opacity: 1;color: var(--green);}

.faq .more {margin-top: 227px;}
.faq a.more:after {content:"\e807"}
@media screen and (max-width:992px){
.faq .holder {width:calc(100vw - 155px);}
}
@media screen and (max-width:768px){
.faq h3 {font-size: 14px;}
.faq .holder h4 {line-height:1.2em;}
.faq .holder {width:calc(100vw - 80px);margin-right: 20px;padding: 32px 30px;flex-direction: column;align-items: flex-start;}
.faq .holder>div:nth-of-type(1) {flex: 1;padding-right: 0;padding-bottom: 20px;}
.faq .holder>div:nth-of-type(1) img {max-height:60px;}
.faq-carousel .slick-next, .faq-carousel .slick-prev {top: calc(100% + 63px);}
.faq-carousel .slick-dots {top: calc(100% + 46px);left: 184px;}
.faq .more {margin-top: 156px;}
.faq {background:var(--light-grey);padding:80px 0px 60px 0;overflow:hidden;}
.faq .holder .button {width:100%;}
.faq .holder.blank {justify-content: center;}
.faq .holder>div:nth-of-type(1) {flex: 0 0 90px;}
}


/* contact ================================== */
.contact {background:var(--dark-grey);min-height:600px;padding:80px 0;color:white;}
.contact .main-width.flex>div:nth-of-type(1) {flex: 0 0 610px;margin-right:90px;}
.contact .main-width.flex>div {flex:1;}
.contact ul {list-style:none;margin:40px 0 0 0;padding:0px;display:flex;flex-wrap:wrap;}
.contact ul li {margin-right: 32px;}
.contact ul li:last-child {margin-right: 0;}
.contact ul li:nth-of-type(1) {width: 95px;}
.contact ul li:nth-of-type(2) {width: 176px;}
.contact ul li h4{color: var(--green);font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px; /* 187.5% */
    letter-spacing: 0.32px;}
.contact p {margin: 10px 0px 40px 0px;line-height:1.3em;letter-spacing: 0.48px;}
.contact p strong {font-weight:700;}

input.textbox, textarea.textbox {-webkit-appearance:none;appearance:none;border-raidus:0;border:1px solid white;border-radius:none;height:55px;padding:13px 24px 0px 24px;color:white;background:none;width:100%;font-size: 20px;font-weight: 400;line-height:1.3em;letter-spacing: 0.4px;}
textarea.textbox {height:170px;padding-top: 25px;}
.contact-form>div {position:relative;margin-bottom:18px;}
.contact-form label {font-weight: 400;letter-spacing: 0.28px;position:absolute;left:24px;line-height:1em;color:white;font-size: 20px;top:16px;transition:all .3s linear;}
.textbox.has-value + label, .textbox:focus + label {top:8px;font-size: 14px;color:#858585;}

.contact-form p.msg {font-size: 12px;margin: 0 0 20px 0;color:var(--pink);}
.textbox.error {border-color:var(--pink);}

.contact .icon {position:relative;font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%; /* 20.8px */
    letter-spacing: 0.32px;display: inline-block;margin:0px;}
.contact .icon:before {color:var(--green);position:absolute;left:0;line-height:1em;top:10px;}
.contact a.icon {color:white;text-decoration:none;display: block;margin-bottom:5px;transition:all .3s linear;}
.contact a.icon:hover {color:var(--pink);text-decoration:none;}
.contact-form button {float:right;font-family: "Urbanist", sans-serif;color:black;}

.contact-thanks {display:none;padding-top: 35px;}
.contact-thanks .icon {width:80px;height:80px;border-radius:100%;border:2px solid var(--green);display:flex;justify-content: center;align-items: center;padding:0px;}
.contact-thanks .icon.icon-check:before {content:"\e80b";position:relative;left:0;top:0px;font-size: 26px;}
.contact-thanks h3 {font-size: 30px;margin: 20px 0px 25px 0px;font-weight: 600;line-height: 1.3em;}
.contact.submitted .contact-thanks {display:block;}
.contact.submitted .contact-form {display:none;}

.grecaptcha-badge {z-index:100;display:none !important;}
.contact .loader {display:none;margin: 100px auto;}
.contact.processing .loader {display:block;}
.contact.processing .contact-form {display:none;}

.contact-form button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.3s ease;
    background: var(--green);
    color: var(--dark-grey);
    border: 2px solid var(--green);
    border-radius: 8px;
    height: 55px;
    padding: 0 24px;
    font-size: 23px;
    font-style: italic;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}

.contact-form button.loading {
    pointer-events: none;
    background: var(--green);
}

/* Loader dots */
.contact-form button .loader-dots {
    display: none;
    gap: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) skewX(15deg);
    visibility: hidden;
}

.contact-form button .loader-dots span {
    width: 16px;
    height: 16px;
    background-color: #000;
    border-radius: 50%;
    animation: blink 1.2s infinite;
    opacity: 0.3;
}

.contact-form button .loader-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.contact-form button .loader-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

.contact-form button.loading .loader-dots {
    display: flex;
    visibility: visible;
}

.contact-form button.loading .button-text {
    visibility: hidden;
}

.contact-form button:not(.loading):hover .button-text {
    visibility: visible;
}

.contact-form button.arrow::after {
    content: "\e809";
    font-size: 16px;
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.contact-form button.arrow:hover::after {
    transform: translateX(5px);
}

.contact-form button.loading::after {
    content: "";
}

/* Blink animation */
@keyframes blink {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}

@media screen and (max-width:1300px){
.contact .main-width.flex>div:nth-of-type(1) {flex: 0 0 50%;margin-right:60px;}
.contact ul li {width:100%;}
}

@media screen and (max-width:992px){
.contact .main-width.flex {flex-direction: column;}
.contact .main-width.flex>div:nth-of-type(1) {margin-right:0px;margin-bottom: 60px;}
}

@media screen and (max-width:768px){
.contact {padding: 48px 0;}
.contact p {letter-spacing: 0.28px;}
.contact-thanks {text-align:center;}
.contact-thanks .icon {margin:0px auto;}
}

@media screen and (max-width:576px){
.contact-form button {width: 100%;}
.contact .icon {font-size:16px;}
.contact .icon:before {top:5px;}
.contact .icon.icon-place:before {top:5px;}
.contact .icon.icon-place:after {top:5px;}
.contact .icon.icon-mail:before {top: 7px;}
.contact .main-width.flex>div:nth-of-type(1) {margin-bottom: 50px;}
.contact-form label, input.textbox, textarea.textbox {font-size:16px;padding-left:16px;left:0px;}
.textbox.has-value + label, .textbox:focus + label {top:8px;font-size: 12px;}
.contact-thanks h3 {font-size: 24px;}
.contact ul li{margin-right: 24px;margin-bottom: 24px;}
.contact ul li:last-child{margin-right: 0;margin-bottom: 0;}
}


/* quote cta ================================== */
.quote-cta {background:var(--akismet-color-white);position:relative;color:var(--dark-grey);padding-top:80px;text-align:center;font-size: 44px;font-style: italic;font-weight: 900;line-height: 52.8px;letter-spacing: 0.02em;text-align: center;text-underline-position: from-font;text-decoration-skip-ink: none;text-transform: uppercase;}
.quote-cta h2.pink {color:#FB3976;}
.quote-cta p {font-size: 24px;font-weight: 400;line-height: 36px;letter-spacing: 0.02em;text-align: center;text-decoration-skip-ink: none;margin:31px auto 0 auto;text-transform: none;}

@media screen and (max-width:576px){
.quote-cta .button {width: 100%;}
}


/* Footer ==================== */
footer {background:var(--akismet-color-white);padding: 148px 0 80px 0;font-size:16px;font-weight:500;line-height:1em;}
footer a {text-decoration:underline;margin-right:40px;text-underline-offset:6px;color:black;text-decoration-thickness: 2px;transition:all .3s linear;}
footer a:hover {color:var(--pink)}
footer .main-width.flex>div {flex:1;}
footer .main-width.flex>div:nth-of-type(2) {flex:0 0 200px;text-align:center;display: flex;align-items: center;}
footer .main-width.flex>div:nth-of-type(3) {text-align:right;display: flex;align-items: center;justify-content: flex-end;}

.social {font-size:20px;display: inline-block;line-height:1.5em;margin:0px 10px;text-decoration:none;}
.social:before {color:black;line-height:1em;top:10px;}
.social.social-instagram:before {content:"\e804";font-size:24px;}
.social.social-facebook:before {content:"\e803";font-size:24px;}
.social.social-youtube:before {content:"\e806";font-size:24px;}
.social.social-linkedin:before {content:"\e814";font-size:24px;}

footer .newsocial a {margin:0px 10px;}
footer .newsocial img {width:24px;}

footer .footer-logo {display:flex;align-items: center;}
footer .footer-logo .accreditations {display:flex;align-items: center;flex-wrap:wrap;justify-content: center;}
footer .footer-logo>div:nth-of-type(1) {margin-right:20px;}
footer .footer-logo>div:nth-of-type(2) {margin:auto;}
footer .footer-logo .accreditations img {max-height:35px;width:auto;margin: 0px 5px;}
footer .footer-logo .accreditations p {margin-right:20px;}

@media screen and (max-width:992px){
    footer .flex {flex-direction: column;font-size:14px;}
    footer {text-align:center;padding: 48px 0px 48px 0px;}
    footer .main-width.flex>div:nth-of-type(3) {text-align:center;margin-bottom: 0;justify-content: center;}
    footer .main-width.flex>div, footer .main-width.flex>div:nth-of-type(2) {flex:1;margin-bottom:48px;justify-content: center;}
    footer a {margin-right:30px;}
    footer .social {margin:0px 22px;}
	footer .footer-logo {flex-direction:column;}
	footer .footer-logo>div:nth-of-type(1) {margin-right:auto;margin-bottom:30px;margin-left:auto;}
	footer .footer-logo .accreditations p {margin-right:auto;display:block;margin-bottom:20px;width:100%;}
	footer .footer-logo img {margin-left:auto;}
}

@media screen and (max-width: 576px){
.quote-cta {padding-top: 48px;}
.quote-cta p {margin: 24px auto 0 auto;font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.28px;max-width: 240px;}
footer a {margin-right: 40px;display: block;}
    footer img {
        height: 86px;}
}



/* Content page  ==================== */
.content-block {margin-top:200px;margin-bottom:200px;}
.content-block h1, .content-block h2, .content-block h3, .content-block h4 {margin-bottom:30px;line-height:1.2em;}
.content-block h1 {font-size:50px;margin-bottom:50px;}
.content-block h2 {font-size:30px;margin-bottom: 30px;}
.content-block h3 {font-size:25px;margin-bottom: 10px;border-top: 1px solid #d1d1d1;padding-top: 30px;margin-top: 30px;}
.content-block h4 {font-size:20px;margin-bottom: 10px;}
.content-block p {margin-bottom:30px;}
.content-block a {color:var(--pink);text-underline-offset: 4px;}

@media screen and (max-width:768px){
.content-block {margin-top:150px;margin-bottom:150px;}
.content-block h1, .content-block h2, .content-block h3, .content-block h4 {margin-bottom:20px;}
.content-block h1 {font-size:30px;margin-bottom:30px;}
.content-block h2 {font-size:25px;}
.content-block h3 {font-size:20px;margin-bottom: 10px;}
.content-block h4 {font-size:18px;margin-bottom: 10px;}
.content-block p {margin-bottom:20px;}
.content-block .wp-block-spacer:nth-of-type(1) {height: 10px !important;}
}

.page-template-default header {background: var(--dark-grey);}
.page-template-default .quote-cta {padding:0px;}

a.back-to-top {font-size:20px;font-style: normal;text-decoration:none;display:inline-flex;align-items: center;color:var(--dark-grey);margin-top:60px;}
a.back-to-top:before {content:"\e816";width:46px;height:46px;display:flex;justify-content: center;align-items: center;border-radius:100%;border:1px solid var(--dark-grey);margin-right:16px;transition:all .3s linear;}
a.back-to-top:hover:before {border:1px solid var(--green);background:var(--green);}


/* Infographic styling ==================== */
.info-graphic {background:#F6F6F6;padding:50px;border-radius:10px;max-width: 841px;}
.info-graphic ul.cards {list-style:none;display:flex;flex-wrap:wrap;margin:0px;padding:0px;}
.info-graphic ul.cards li {background:white;padding:44px 34px 14px 44px;flex:0 0 calc((100% - 22px)/2);margin-right:22px;margin-bottom:22px;position:relative;}
.info-graphic ul.cards li:nth-of-type(2n + 2) {margin-right:0px;}
.info-graphic ul.cards li .imgHolder {padding-left:60px;}
.info-graphic ul.cards li:before {    content: attr(data-count);
    color: black;
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50px;
    display: flex
;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 44px;
    top: 44px;
    font-size: 38px;
    font-weight: 600;
    border: 5px solid #FB3976;}
.info-graphic h4 {margin-top:30px;padding-top:0px;border-top:none;font-size:22px;font-weight:700;line-height:1.4em;}
.info-graphic p {font-size:16px;line-height:1.4em;}
.info-graphic h3 {margin-top:40px;padding-top:0px;border-top:none;font-size:24px;font-weight:700;line-height:1.4em;}

.info-graphic ul.cards1 {list-style:none;display:flex;flex-wrap:wrap;margin:0px;padding:0px;}
.info-graphic ul.cards1 li {background:white;padding:40px 16px;flex:0 0 calc((100% - 32px)/3);margin-right:16px;position:relative;}
.info-graphic ul.cards1 li:nth-of-type(3) {margin-right:0px;}
.info-graphic ul.cards1 li:before {content:"";position:absolute;top:0px;height:8px;width:100%;left:0px;}

.info-graphic ul.cards1 li h4 {margin-top:0px;font-size:20px;margin-bottom: 25px;}
.info-graphic ul.cards1 li p {font-size:20px;padding-bottom:12px;border-bottom:1px solid #E7E7E7;margin-bottom:12px;}
.info-graphic ul.cards1 li span {font-size:12px;display:block;line-height: 14px;}
.info-graphic ul.cards1 li strong {font-weight:700;}
.info-graphic ul.cards1 li p:nth-last-of-type(1) {margin-bottom:0px;padding-bottom:0px;border-bottom:none;}
.info-graphic ul.cards1 li:nth-of-type(1):before {background:var(--green);}
.info-graphic ul.cards1 li:nth-of-type(2):before {background:var(--pink);}
.info-graphic ul.cards1 li:nth-of-type(3):before {background:var(--dark-grey);}
.info-graphic ul.cards1 li p:last-child {
    text-overflow: ellipsis;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.info-graphic ul.cards1 li strong, .info-graphic ul.cards li strong{}
.info-graphic ul.cards1 li:nth-of-type(1) strong, .info-graphic ul.cards li  strong {text-decoration-color: var(--green);}
.info-graphic ul.cards1 li:nth-of-type(2) strong {text-decoration-color: var(--blue);}
.info-graphic ul.cards1 li:nth-of-type(3) strong {text-decoration-color: var(--dark-grey);}
.info-graphic p.end {font-size:15px;margin-top:10px;}
.info-graphic p.end a {white-space: nowrap;}

.content-block .main-width {max-width:1120px;}

@media screen and (max-width:768px){
    .info-graphic {padding:22px;}
    .info-graphic ul.cards li, .info-graphic ul.cards1 li {flex:0 0 100%;margin-right:0px !important;}
    .info-graphic ul.cards1 li {margin-bottom:22px;}
.info-graphic p.end {font-size:13px;margin-top:10px;}
}

/* error pages ================================== */

.error404 header,.error403 header,.error500 header,.maintenance header,.connecterror header   {
    position: static;
    background: var(--dark-grey);
}

.error404 header .nav,.error403 header .nav,.error500 header .nav,.maintenance header .nav,.connecterror header .nav {display:none;}
.error404 header .main-width.flex,.error403 header .main-width.flex,.error500 header .main-width.flex,.maintenance header .main-width.flex,.connecterror header .main-width.flex {justify-content: center;}


.error404 .main-extended,.error403 .main-extended,.error500 .main-extended,.maintenance .main-extended,.connecterror .main-extended {background: var(--light-grey);}


.error-page {
    padding: 183px 0 235px 0;
    text-align: center;
}

.error-page h1 {
    color: var(--Black, #000);
    font-size: 50px;
    font-style: normal;
    font-weight: 600;
    line-height: 60px; /* 120% */
    margin-top: 17px;
    margin-bottom: 48px;
}

.error-page .content {
    max-width: 602px;
    margin: 0 auto;
}

.error-page p {
    color: var(--Black, #000);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
    margin-bottom: 29px;
}

.error-page p:nth-of-type(2) {
    margin-bottom: 48px;
}

.error404 footer,.error403 footer,.error500 footer,.maintenance footer,.connecterror footer {
    padding: 0;
    box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, 0.08);
    color: #A7A7A7;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 24px */
}

.error404 footer .main-width.flex,.error403 footer .main-width.flex,.error500 footer .main-width.flex,.maintenance footer .main-width.flex,.connecterror footer .main-width.flex {
    height: 96px;
    justify-content: center;
    align-items: center;
}

.error404 footer .main-width.flex span,.error403 footer .main-width.flex span,.error500 footer .main-width.flex span,.maintenance footer .main-width.flex span,.connecterror footer .main-width.flex span {
    flex: 1;
}

.error404 footer a,.error403 footer a,.error500 footer a,.maintenance footer a,.connecterror footer a {
    color: #A7A7A7;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 24px */
}

@media screen and (max-width: 1440px) {
    .main-width.padded.error-page {
        padding-left: 0px;
    }
}

@media screen and (max-width: 992px) {
    .error404 footer .main-width.flex,.error403 footer .main-width.flex,.error500 footer .main-width.flex,.maintenance footer .main-width.flex,.connecterror footer .main-width.flex {
        flex-direction: unset;justify-content: space-between;
    }
    .error404 footer .main-width.flex span,.error403 footer .main-width.flex span,.error500 footer .main-width.flex span,.maintenance footer .main-width.flex span,.connecterror footer .main-width.flex span {
        flex: none;
    }
}

@media screen and (max-width:768px){
    .error404 header .hamburger,.error403 header .hamburger,.error500 header .hamburger,.maintenance header .hamburger,.connecterror header .hamburger {
        display: none;
    }
    .main-width.padded.error-page {padding: 80px 20px 80px 20px;}
    .error404 footer .main-width.flex,.error403 footer .main-width.flex,.error500 footer .main-width.flex,.maintenance footer .main-width.flex,.connecterror footer .main-width.flex {
        flex-direction: unset;justify-content: space-between;
    }
    .error404 footer .main-width.flex span,.error403 footer .main-width.flex span,.error500 footer .main-width.flex span,.maintenance footer .main-width.flex span,.connecterror footer .main-width.flex span {
        flex: none;
    }
}

.about-images {margin-top:10px;}
.about-images img {max-height:50px;width:auto;margin-right:10px;}