html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';}:focus{outline:0;}ins{text-decoration:none;}del{text-decoration:line-through;}table{border-collapse:collapse;border-spacing:0;}article,aside,details,figcaption,figure,dialog,footer,header,hgroup,menu,nav,section{display:block;}a img{border:none;}

* { box-sizing: border-box; }
h1,h2,h3,h4,h5,h6 { font-weight:300; }
strong { font-weight:700; }
html,body { height:100%; }

/* === show breakpoints for dev ==== 
body::after {  content: "320px"; position: fixed; left: 0; top: 0;text-align: center;padding: 10px; display: block; opacity: 0.3; width: 100px; z-index: 9999; background: rgba(0,0,0,0.2); }
@media screen and (min-width:480px) {    body::after { content: "480px"; } }
@media screen and (min-width:768px) {    body::after { content: "768px"; } }
@media screen and (min-width:1024px) {    body::after { content: "1024px"; } }
@media screen and (min-width:1400px) {    body::after { content: "1400px"; } }

 */

/* === breakpoints =====
xs :    320px //default
s  :    480px
m  :    768px
l  :    1024px
xl :    1400px
 ======================= */

.content { width:100%; max-width:1200px; margin:0 auto; }


/* ==== padding  ======= */

.p10 { padding:10px; }
.p20 { padding:20px; }
.p30 { padding:30px; }
.p40 { padding:40px; }

.pl20 { padding-left:20px; }
.pl30 { padding-left:30px; }
.pl40 { padding-left:40px; }

.pr20 { padding-right:20px; }
.pr30 { padding-right:30px; }
.pr40 { padding-right:40px; }
.pr50 { padding-right:50px; }
.pr60 { padding-right:60px; }

.px0 { padding-left:0;padding-right:0; }
.px5 { padding-left:5px;padding-right:5px; }
.px10 { padding-left:10px;padding-right:10px; }
.px20 { padding-left:20px;padding-right:20px; }
.px30 { padding-left:30px;padding-right:30px; }
.px40 { padding-left:40px;padding-right:40px; }

.py20 { padding-top:20px;padding-bottom:20px; }
.py30 { padding-top:30px;padding-bottom:30px; }
.py40 { padding-top:40px;padding-bottom:40px; }

.pb0 { padding-bottom:0; }
.pb10 { padding-bottom:10px; }
.pb20 { padding-bottom:20px; }
.pb30 { padding-bottom:30px; }
.pb40 { padding-bottom:40px; }

.pt10 { padding-top:10px; }
.pt20 { padding-top:20px; }
.pt30 { padding-top:30px; }
.pt40 { padding-top:40px; }
.pt60 { padding-top:60px; }
.pt120 { padding-top:120px; }
.pt140 { padding-top:140px; }

@media screen and (min-width:768px) {
.m-p0 { padding:0;}
.m-p10 { padding:10px;}
.m-p20 { padding:20px;}
.m-p40 { padding:40px;}
.m-pl20 { padding-left:20px; }
.m-pl40 { padding-left:40px; }
.m-pt120 { padding-top:120px;}
.m-pr20 { padding-right:20px; }
}
@media screen and (max-width:480px) {
.s-pl20 { padding-left:20px; }
.s-p40 { padding:40px;}
.s-p20 { padding:20px;}
.s-pb20 { padding-bottom:20px;}
}
@media screen and (min-width:1024px) {
.p40-l { padding:40px;}
}
@media screen and (max-width:480px) {
.p20-m { padding:20px;}
}

/* === position ===== */

.left10 { left:10px; }
.left20 { left:20px; }
.left30 { left:30px; }
.left40 { left:40px; }

.bottom10 { bottom:10px; }
.bottom20 { bottom:20px; }
.bottom30 { bottom:30px; }
.bottom40 { bottom:40px; }

@media screen and (min-width:768px) {

.m-bottom10 { bottom:10px; }
.m-bottom20 { bottom:20px; }
.m-bottom30 { bottom:30px; }
.m-bottom40 { bottom:40px; }

.m-left10 { left:10px; }
.m-left20 { left:20px; }
.m-left30 { left:30px; }
.m-left40 { left:40px; }
}

/* ==== margin ======= */

.m10 { margin:10px; }
.m20 { margin:20px; }
.m30 { margin:30px; }
.m40 { margin:40px; }

.mt20 { margin-top:20px; }

.mx20 { margin-left:20px; margin-right: 20px; }
.my20 { margin-top:20px; margin-bottom: 20px; }
.mxAuto { margin-left:auto; margin-right:auto; }
.mb5 { margin-bottom:5px; }
.mb10 { margin-bottom:10px; }
.mb20 { margin-bottom:20px; }
.mb30 { margin-bottom:30px; }
.mb40 { margin-bottom:40px; }
.mb60 { margin-bottom:60px; }

@media screen and (min-width:768px) {
.m-mb60 { margin-bottom:60px; }
}

@media screen and (max-width:768px) {
.s-mxAuto {  margin-left:auto; margin-right:auto; }
}

/* === heights ===== */

.h100 { height:100px; }
.fullHeight { height:100%; }
/* ==== widths ======= */
:root { --unit : 1; }

.mw60 { max-width: 60px;}
.mw100 { max-width: 100px;}
.mw200 { max-width: 200px;}
.mw240 { max-width: 240px;}
.mw300 { max-width: 300px;}
.mw400 { max-width: 400px;}
.mw500 { max-width: 500px;}
.mw600 { max-width: 600px;}
.mw700 { max-width: 700px;}
.mw800 { max-width: 800px; }
.mw900 { max-width: 900px; }
.mw1000 { max-width: 1000px; }
.mw1100 { max-width: 1100px; }
.mw1200 { max-width: 1200px; }
.fit { width:100%; }
.wHalf { width:50%;}


@media screen and (min-width:768px) {

    .m-wHalf { width:50%;}
    .l-fullHeight { height:100%; }
    .m-mw160 { max-width: 160px;}

}

  

/* === text === */
.textCenter { text-align:center; }
.textLeft { text-align:left; }


.tinyText { font-size:14px; }
.uppercase { text-transform: uppercase;}
.letterspace { letter-spacing: 2px;}

.transition { transition:all 0.5s ease; }

.lh100 { line-height:1;}
.lh120 { line-height:1.2;}
.lh140 { line-height:1.4;}
.lh160 { line-height:1.6;}

@media screen and (max-width:767px) {

    .s-textCenter { text-align:center; }
    .s-textLeft { text-align:left; }
}

@media screen and (min-width:768px) {

    .m-textCenter { text-align:center; }
    .m-textLeft { text-align:left; }
}

/* ==== flexbox ======= */
.flex { display:flex; }
.flexWrap { flex-wrap: wrap; }
.flexColumn { flex-direction: column; }
.flexRow { flex-direction: row; }
.itemsCenter { align-items:center; }
.itemsFlexStart { align-items:flex-start; }
.itemsFlexEnd{ align-items: flex-end; }

.justifyCenter { justify-content:center; }
.justifyFlexStart { justify-content:flex-start; }
.justifyFlexEnd{ justify-content: flex-end; }
.justifySpaceBetween{ justify-content: space-between; }
.justifySpaceAround{ justify-content: space-around; }

@media screen and (max-width:767px) {
.s-flexColumn { flex-direction: column; }
.s-flexColumnReverse { flex-direction: column-reverse; }
.s-justifyCenter { justify-content:center; }

}
@media screen and (min-width:768px) {

.m-flexRow { flex-direction: row; }
.m-flexRowReverse { flex-direction: row-reverse; }
.m-justifyFlexEnd { justify-content: flex-end;  }
.m-justifyFlexCenter { justify-content: center;  }
.m-itemsCenter { align-items:center; }
.m-itemsFlexEnd { align-items:flex-end; }
.m-flexColumn { flex-direction: column; }
}
/* === columns === */
.col3 { width:22%; }
.col4 { width:28%; }
.col6 { width:46%; }
.col9 { width:74%; }
.col12 { width:100% }

@media screen and (max-width:479px) {
.xs-col3 { width:22%; }
.xs-col4 { width:28%; }
.xs-col6 { width: 46%; }
.xs-col9 { width:74%; }
.xs-col12 { width:100% }
}
@media screen and (min-width:480px) {
.s-flex { display: flex; }
.s-col3 { width:22%; }
.s-col4 { width: 28%; }
.s-col6 { width: 46%; }
.s-col9 { width:74%; }
.s-col12 { width:100% }
}

@media screen and (min-width:768px) {
.m-flex { display: flex; }
.m-col2 { width:16%; }
.m-col3 { width:22%; }
.m-col4 { width: 32%; }
.m-col6 { width: 46%; }
.m-col9 { width:74%; }
.m-col12 { width:100% }
}

@media screen and (min-width:1024px) {
.l-flex { display: flex; }
}

/* === images ==== */

.imgFit { height:auto; max-width: 100%;}
.objectFitCover { object-fit: cover; }
.objectFitContain { object-fit: contain; }
/* ==== position ======= */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

@media screen and (min-width:768px) {
.m-absolute{ position: absolute; }
    .m-right40 {right:40px; }
    .m-left40 {left:40px; }
}
@media screen and (min-width:1024px) {
.l-absolute{ position: absolute; }
    .l-right40 {right:40px; }
    .l-left40 {left:40px; }
}
/* === z-index ==== */
.z1 { z-index: 1;}
.z5 { z-index: 5;}
.z10 { z-index: 10;}
.z50 { z-index: 50;}
.z100 { z-index: 100;}

/* === utilities === */
.overflowXAuto { overflow-x:auto; }

.hide { display:none; }
@media screen and (max-width:479px) {
.xs-show { display: inline; }
}
@media screen and (max-width:767px) {
.s-show { display: inline; }
.s-overflowXAuto { overflow-x:auto; }
}
@media screen and (max-width:479px) {
.xs-hide { display:none; }
 }
@media screen and (min-width:480px) and (max-width:767px) {
.s-hide { display:none; }
}
@media screen and (min-width:768px) and (max-width:1023px) {
.m-hide { display:none; }
}
@media screen and (min-width:1024px) and (max-width:1399px) {
.l-hide { display:none; }
}
@media screen and (min-width:1400px) {
.xl-hide { display:none; }
}
.center { margin-left:auto; margin-right:auto; }
.block { display:block;}
.inlineBlock { display:inline-block;}
.inline { display: inline; }
.overflowHidden { overflow:hidden; }
.overflowXHidden { overflow-x: hidden;}
.overflowYHidden { overflow-y: hidden;}
@media screen and (max-width:480px) {
.s-block { display:block;}
}
/* === borders === */
.border { border:1px solid #ccc; }
.border-top { border-top:1px solid #ccc; }
.border-bottom { border-bottom:1px solid #ccc; }

.rounded { border-radius: 5px; }
.lozenge { border-radius: 40px; }
.circle { border-radius: 50%; }


/* === shadows ==== */

.boxShadowLight { box-shadow: 0 0 10px rgba(0,0,0,0.2); }

html,body { height:100%; color: var(--primaryDark); font-family: "acumin-pro", sans-serif; font-size: 16px; font-weight: 300; }

:root {

    --orange: #ff6600;
    --pink: #DA2671;
    --purple: #410099;
    --darkBlue: #393F4B; 
    --notBlack: #393F4B;
    --lightGrey: #EFEFEF; 
    --highlight: #410099   ;
    --bright: #ff0049;
}

.scrolledTel { position:relative;transition:all 0.3s ease;z-index:1; position:fixed; padding:10px 10px 10px 30px; border-radius:0 0 6px 6px; left:40px; top:-100px; background:var(--bright); color:#fff; font-size:20px; }
.scrolledTel img { position:absolute; left:0; top:8px;height:30px; width:30px; }
.scrolledTel a { color:#fff; text-decoration:none; }
.scrolledTel :hover { color:#fff; }
.scrolled .scrolledTel { top:60px; }

.mobileSubButton { display:none; }
.burger { display:none; }

@media screen and (max-width:500px) {
    .scrolled .scrolledTel { left:20px; }

    
}
.youtube-video {  aspect-ratio: 16 / 9;  width: 100%; margin-bottom:20px;}


.logo { transition:all 0.3s ease;padding:22px 0 0 0; width:300px; height:auto; display:block; }
.logo .cls-1 {transition:all 0.3s ease;fill:#FFFFFF;}
.scrolled .logo .cls-1{fill:#76777a;}
.scrolled .stText { display:none;}

.scrolled .logo {width:180px; padding-top:6px;}
header { transition:all 0.3s ease;z-index:200;padding:0 40px; position:fixed; top:0; width:100%; left:0;display:flex; justify-content:space-between; }
.scrolled header {  background:#fff; box-shadow:0 0 10px rgba(0,0,0,0.2); }

@media screen and (min-width:769px) {

.scrolled header nav ul li a {color:#000;}
.scrolled header nav ul li a:hover {color:var(--bright);}
}

header nav ul { display:flex; }
header nav ul li { position:relative; }
header nav ul li a { font-size:16px; position:relative; display:block; padding:20px 10px; color:#fff; text-decoration:none; }
header nav ul ul { display:none; }

nav ul li a:hover { color:var(--bright); }
nav ul li.active > a { color:var(--bright); }
.scrolled nav ul li.active > a { color:var(--bright); }

@media screen and (max-width:768px) {
header { padding:0 20px; }
header nav ul li a { padding:14px 10px; }
.logo {width:260px;  }
.scrolled .logo { width:180px; padding-bottom:10px;}
}

@media screen and (min-width:769px) {

/* === dropdown ===== */
header nav ul ul { transition:all 0.3s ease;background:#fff; white-space: nowrap;display:block; opacity:0; pointer-events:none; padding:0 0; position:absolute; left:0; top:70px; box-shadow:0 0 5px rgba(0,0,0,0.2); border-radius:5px; }
header nav ul li:hover ul { opacity:1; pointer-events:auto;top:50px;}
header nav ul ul li a { padding:12px 12px; color:#000; }
header nav ul ul li { border-bottom:1px solid #ccc;}
header nav ul ul li:last-child { border-bottom:none;}

    
}
header::before { pointer-events:none;transition:all 0.3s ease;content:""; z-index:-1; display:block;width:100%; height:150px;  position:fixed; top:0; left:0;
background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);}
.scrolled header::before {opacity:0; }



@media screen and (max-width:767px) {
    
header nav { transition:all 0.3s ease; display:flex; width:100%; overflow-y:scroll; height:100%; left:0; top:0; opacity:0; pointer-events:none; position:fixed; background:#000; background-size: 150%;
background-position: -200px -100px; z-index:200;padding:80px 20px 20px; }
header nav ul { display:flex; flex-direction:column; justify-content:flex-start; align-items:center; width:100%; height:100%; }
header nav li a { color:#fff; display:block; text-decoration:none; font-size:24px; padding:10px; text-decoration:none;text-transform: uppercase;
letter-spacing: 3px;font-size: 12px; font-weight:400;}

.menuOpen nav { opacity:1; pointer-events:auto; }


/* mobile dropdown */
.mobileSubButton { display:inline-block; width:26px;height:26px; line-height:24px; color:#fff; cursor:pointer;  background:var(--highlight); text-align:center; border-radius:50%;  }   
.subMenuenuOpen + ul { display:block; margin-bottom:20px; }

header nav ul li { display:flex; align-items:center; flex-wrap:wrap;justify-content: space-between; width: 100%;  }
header nav li li a { letter-spacing:1px; text-transform:capitalize; padding:6px 10px;  color:#ccc;}


.burger { pointer-events:all;display:block;background:none; border:none; cursor: pointer; transition: all 0.3s ease; position: fixed; width:50px; height:50px;  right:10px; top:5px;  z-index: 300; }
.burger span {  transition: all 0.4s ease; display: block;  background: #fff;  width:60%;  height: 4px;  margin-top: -2px;  position: absolute;  left: 20%;  top: 50%; }
.scrolled .burger span,
.scrolled .burger:before,
.scrolled .burger:after { background: #000; }

.burger:before,
.burger:after {  content: "";  display: block;  background: #fff;  width: 60%;  height: 4px;  position: absolute;  left: 20%;
  transform-origin: center center;  transform: rotate(0deg);  transition: all 0.3s ease;}

.burger:before {  top: 30%;  margin-top: -2px;}
.burger:after {  bottom: 30%;  margin-bottom: -2px;}


/* == burger onclick ==== */

.menuOpen .burger span { left:100%; opacity: 0;  background: #fff;}
.menuOpen .burger:before {  top: 50%;  transform: rotate(45deg); background: #fff; }
.menuOpen .burger:after {  bottom: 50%;  transform: rotate(-45deg);  background: #fff;}



}






/* ==== form ====== */


/* -- form -- */
form { display: flex; flex-direction: column; max-width: 500px; margin:0 auto;}
label { padding: 20px 0 4px; display: flex; justify-content:flex-start;}

input[type="text"],
select,
textarea { width:100%; border: none; border-radius: 5px; padding: 10px;  background: #fff; box-shadow:0 0 6px rgba(0,0,0,0.2); }

label p { width:100%; }
textarea { height:100px; }
form .btn { display:inline-block; background:#000; border-radius:50px; color:#fff;width: 100%; padding:12px 20px; border: none; align-self: flex-end; margin:20px 0 0 0; font-size: 18px; }

.error { color:red; text-align:center;}
.required { color:red; }

/* = structure ===== */
main { position:relative; min-height:500px;  }
section { background:#fff;  }
section:nth-child(even) { background:#efefef; }

h1, .h1 { font-size:38px; margin-bottom:12px; }
h2, .h2 { font-size:26px; margin-bottom:12px; }
h3, .h3 { font-size:20px; color:#000;  }
.textContent h3 {padding:30px 0 20px; }
p, .p { margin-bottom:12px; line-height:140%; }
p a { color:#000; }
p a:hover { color:var(--highlight); }

blockquote { font-style:italic; font-size:18px; }

.textContent ul {padding-left:14px; }
.textContent ul li { list-style-type:disc; margin-bottom:12px;}
.callout { margin:30px 0;background:#efefef; padding:20px; border-radius:5px; }
.callout p { margin:0; }


.divider {  padding:0 0 30px 0; border-top:1px solid #ccc; }



.dateInfo { font-size:12px;color:var(--highlight); }
.highlight { color:var(--highlight);}
.post-info { color:var(--highlight); }
.white { color:#fff; }
.btn { background:var(--purple); cursor:pointer; color:#fff; border-radius:4px; padding:6px 16px; text-decoration:none; display:inline-block; }
.btn:hover { background:var(--bright);color:#fff;  }

.simpleLink { color:#000; text-decoration:none; border-bottom:1px solid #000; padding:3px 0; display:inline-block;}
.simpleLink:hover { color:var(--highlight); border-color:var(--highlight); }

.btn-more { border:none; font-size:16px; padding:12px 20px; }

@media screen and (max-width:768px) {
section { padding:20px; }
section:nth-child(even) { padding:20px; }

h1, .h1 { font-size:30px;  }
h2, .h2 { font-size:24px; }
h3, .h3 { font-size:18px; }

}


/* ==== icons ====== */

.icons { display:flex;flex-wrap:wrap; align-items:flex-start; justify-content:space-between; text-align:center;}
.icons div { width:20%; padding:10px; display:flex; flex-direction:column;align-items:center; }
.icons span { width:70px; height:70px; padding:16px; border-radius:40px; background:var(--highlight); margin-bottom:10px; }
.icons img { width:100%; height:100%; object-fit:contain; }
.icons h3 {  }

@media screen and (max-width:480px) {
.icons { justify-content:center; }
    .icons div { width:48%; }

    
}
/* ==== breadcrumbs ======= */

.B_crumbBox { display:flex; justify-content:center; margin-bottom:40px; padding:20px;  }
.B_crumbBox span {  }
.B_crumbBox a { color:#000; font-size:14px;}
.B_crumbBox a:hover { color:var(--highlight); }

.B_crumbBox li { color:#000; font-size:14px;padding:0 2px;}
@media screen and (max-width:500px) {

.B_crumbBox { display:flex; flex-direction:column; font-size:0; margin-bottom:0;}
.B_crumbBox li { padding:3px 0;}
.B_crumbBox li:after { content:"/"; }
.B_crumbBox li.B_lastCrumb:after { content:""; }

}

/* ===== home caoursel ======= */


.homeCarousel { position:relative;  height:500px; width:100%;  }
.homeCarousel .content { position:relative;max-width:940px; padding:0 20px; text-align:left; color:#fff; height:100%; display:flex; flex-direction:column; align-items:flex-start; justify-content:center;}
.homeCarousel .btn { background:var(--highlight); }
.homeCarousel .btn:hover { background:var(--bright);color:#fff; }

/* ==== home Hero ======= */

.homeHero { position:relative;  padding:40px 60px; height:80vh; width:100%; display:flex; align-items:flex-end; justify-content:flex-end; }
.homeHero img.bgImage { width:100%; height:100%; object-fit:cover; position:absolute; left:0; top:0;z-index:-1; }
.homeHero p {font-size:20px; }

@media screen and (max-width:480px) {
    
    .homeHero img.bgImage {object-position: right;}
.homeHero { padding:20px; }
    
}

.homeHero > div {  width:100%; max-width:1400px;margin:0 auto; text-align:right; color:#fff; }
.homeHero .btn { background:var(--highlight); }
.headerText { max-width:700px; width:100%; }

.homeCarousel h2 {  font-weight:300; line-height: 1.2;  border-radius:5px; font-size:21px;  width: 100%;  margin: 0 0 20px 0 ; text-align:left;  }
.slideTint { position:absolute; bottom:0; left:0; padding: 20px; background:rgba(0,0,0,0.8);}

@media screen and (min-width:769px) {

.homeCarousel h2 { font-size:38px;  }
.slideTint {width: 60%;  }

}
 
@media screen and (max-width:768px) {
.homeHero h2 {   font-size:26px; line-height: 1.9; }
.homeCarousel .content { padding-bottom:20px; }
.slideTint {width: 100%;}

}







/* -== page hero ==== */
.hero { height:400px; position:relative; padding:40px 0 0 0; width:100%; display:flex; align-items:flex-end; justify-content:flex-start;  }
.hero img { width:100%; height:100%; object-fit:cover; position:absolute; left:0; top:0;z-index:-1; }
    .hero h1,div.h1 { margin:0;display:inline-block;background:#000; color:#fff;padding:6px 20px 6px 20px; font-size:50px; }

@media screen and (max-width:768px) {
.hero { height:260px; }
        .hero h1,div.h1 { font-size:30px; }

}


/* === generic cards ===== */


.cards {display: flex;  flex-wrap:wrap; margin-bottom:100px; margin:0 auto 30px 0; }
.textContent .cards { padding:0; }
.cards li { width:33.333%; padding:10px; position:relative;display: flex; flex-direction:column;  align-items: flex-start; justify-content:flex-start;
    color: #000; text-align:left;}
 .cards div { padding:20px; display:flex; flex-direction:column;align-items: flex-start;height:100%; }
 .cards li a {  position:relative;background-color: #fff; box-shadow:0 0 10px rgba(0,0,0,0.1); text-decoration:none; color:inherit; display:flex; flex-direction:column; height:100%;  width:100%; }
.cards li img {  position:relative; width: 100%;  height: 200px;  object-fit: cover;  object-position: center; }
.cards li span { margin-top:auto; }
.cards li.active { display:none; }

 .cards div.brandTag { position:absolute; left:20px; top:16px; z-index:10;display:inline-block; }
 .cards div.brand-intelligent-motoring { width:50px; height:50px;background:url(/assets/images/logoboxwhite.svg) no-repeat center / contain; }
 .cards div.brand-motoreasy {  width:150px; height:50px;background:url(/assets/images/motoreasy-logo.svg) no-repeat center / contain; }

.cards li img.newsStory {  height: 80px;  }

.cards h3 { color:#000; padding:0 0 20px 0; }


@media screen and (max-width:768px) {
    .cards {display: block; }
    .cards li { width:100%; }
    .cards li img {  width: 100%;  height: 160px; }

}

.oneColCards  { display:block; }
.oneColCards li { width:100%; margin-bottom:40px;  }
.oneColCards li img {  position:relative; width: 100%;  height: 140px; margin-bottom:12px; object-fit: cover;  object-position: center; }
.oneColCards li a { text-decoration:none; color:inherit; display:flex; flex-direction:column; height:100%;  }
.oneColCards li span { margin-top:auto; }
.oneColCards li.active { display:none; }
.oneColCards h3 { color:#000; }


.cardsHome {  display:flex; flex-wrap:wrap;}
.cardsHome li { width:32%; margin-bottom:40px;  }


.cardsWide {display: flex; flex-wrap:wrap; }
.cardsWide li { width:48%; }
.cards3up li { width:32%; }

@media screen and (max-width:480px){
    .cardsHome li { width:100%;  }
.cards3up li { width:100%; }
    .cardsWide li { width:100%; }
    
}


/* = pagination === */

.pagination { display:flex; align-items:center; justify-content:center; }
.textContent .pagination li { list-style:none; margin:0 4px; }
.textContent .pagination li a { display:inline-block; border:1px solid #ccc; padding:4px 12px; border-radius:3px; color:var(--highlight); text-decoration:none;}
.textContent .pagination li a:hover { background:var(--highlight); border-color:var(--highlight);color:#fff; }
/* === brands ===== */
.heroBrand {display:flex; align-items:center; justify-content:center;}
.heroBrand img.heroBrandLogo { max-width:500px; max-height:140px; width:90%;  height:auto; object-fit:contain; position:static;}

.cards .heroBrandCarHeader { display:flex; align-items:center; justify-content:center;width:100%; height:200px; position:relative;}
.cards li .heroBrandCarHeader img.heroBrandLogo { max-width:300px; max-height:80px; width:90%;  height:auto; object-fit:contain; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}

.brandsSidebar { display:flex; flex-direction:column; }
.brandsSidebar li{ width:100%; margin-bottom:20px;}

@media screen and (max-width:500px) {
    
    .heroBrand { padding-top:100px; }
    .heroBrand img.heroBrandLogo { max-height:110px; }
}
/* === sidebar ====== */


.sidebarList a { display:block; background:#000; color:#fff; padding:10px; margin:0 0 6px 0; border-radius:5px; text-decoration:none; }
.sidebarList a:hover {background:var(--highlight); }
.sidebarList .active { opacity:0.5; pointer-events:none; }


/* === =blog ==== */
.tagList li { background:#efefef; border-radius:5px; position:relative;list-style:none; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center;}
.tagList li a { text-decoration:none; padding:10px; display:block; color:inherit; }
.tagList span { display:block; background:#fff; color:var(--highlight); margin-right:12px; width:20px; height:20px; font-size:14px;  text-align:center; line-height:20px; border-radius:50%;}
.tagList li:hover { background:#ccc; cursor:pointer; }


section:nth-child(2n).thoughtLeadershipPanel { background:url(/assets/images/adobestock-613108995-grad.jpg) no-repeat top / contain; color:#fff; }

@media screen and (max-width:480px) {
    
section:nth-child(2n).thoughtLeadershipPanel {   background-size: cover; }
}
/* === people Cards === */

    .peopleCards { display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 2%; margin-bottom:100px; }
    .peopleCards li { box-shadow:0 0 10px rgba(0,0,0,0.1); overflow:hidden;position:relative;aspect-ratio: 1/ 1;display: flex;  align-items: flex-end; justify-content:flex-end;
  padding: 5%;  background-color: #1E1E1E;  color: #fff;}
    .peopleCards li img {  position:absolute; left:0; top:0; width: 100%;  height: 100%;  object-fit: cover;  object-position: center; }
    .peopleCards li a { text-decoration:none; color:inherit; }
    
    .popup { display: flex; align-items: flex-start;transition:all 0.3s ease; background:rgba(0,0,0,0.7); left:0;
    padding:2vw; width:100%; height:100%; position:absolute; bottom:-69%; z-index:10; }

    
    .peopleCards li:hover .popup { bottom:0; }
    .popup  div { width:100%;}
    .popup h4 {margin-bottom:20px;font-size:1vw;text-transform:uppercase; letter-spacing:2px;}
    .popup h3 {color:#fff; font-size:1.7vw; }


@media screen and (max-width:768px) {
    .peopleCards {display: block; padding:20px; }
    .peopleCards li  {  margin-bottom:20px; }
     .popup { padding:20px;bottom:-72%; }
 .popup h4 {font-size:14px;}
    .popup h3 {font-size:20px; }
}


/* ===== articles ====== */

.avatar { width:80px; height:80px; border-radius:40px; display:block; object-fit:cover; display:block; margin: 0 auto 12px auto;  }
.avatarBig { width:120px; height:120px; border-radius:60px;}
/* === footer ===== */


footer { position:relative;background:#000; padding:40px; color:#fff; }
footer a { color:#fff; }

.footerLogo { width:60px; margin-bottom:20px;height:auto; display:block; object-fit:cover; }

footer nav ul { display:flex; }
footer nav ul li a { padding:10px; color:#fff; text-decoration:none;  }
footer nav ul li:first-child a { padding-left:0; }

@media screen and (max-width:768px) {
    footer { text-align:center; }
    
footer nav ul { flex-direction:column; align-items:center; }
footer nav ul li:first-child a {padding:0; }
}