.heroBanner{position:relative;width:100%;max-width:1920px;height:auto;color:#fff;background-size:cover;background-position:center;background-repeat:no-repeat;overflow:hidden}
.heroBanner::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(180deg,rgba(0,61,121,0.5),rgba(0,61,121,0.2));z-index:1}
.heroBanner picture{display:flex;width:100%}
.heroBanner__overlay{z-index:2;width:100%;height:100%;padding:0 20px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.heroBanner__heading{text-transform:uppercase;margin:0;font-weight:700}
h1.heroBanner__heading{font-size:48px;line-height:58px}
h2.heroBanner__heading{font-size:42px;line-height:50px}
h3.heroBanner__heading{font-size:32px;line-height:44px}
h4.heroBanner__heading{font-size:24px;line-height:32px}
h5.heroBanner__heading{font-size:22px;line-height:26px}
h6.heroBanner__heading{font-size:20px;line-height:26px}
.heroBanner .breadcrumb-wrapper{display:flex;flex-wrap:wrap;justify-content:center;margin-top:25px;text-align:center}
.heroBanner .breadcrumb-wrapper .cmp-breadcrumb__list{padding:0;margin:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:center}
.heroBanner .breadcrumb-wrapper .cmp-breadcrumb__item,.heroBanner .breadcrumb-wrapper .cmp-breadcrumb__item-link{font-size:18px;line-height:26px;font-weight:500;color:#fff}
.heroBanner .breadcrumb-wrapper .cmp-breadcrumb__item:after{content:"/";margin:0 5px 0 0;color:#fff}
.heroBanner .breadcrumb-wrapper .cmp-breadcrumb__item:last-child:after{display:none}
.heroBanner .heroBanner__overlay{position:absolute;top:0}
@media screen and (min-width:481px) and (max-width:767px){.heroBanner img.heroBanner__bg{height:auto;object-fit:cover}
}
@media screen and (min-width:768px) and (max-width:1024px){.heroBanner img.heroBanner__bg{height:auto;object-fit:cover}
}
@media screen and (max-width:1680px){.heroBanner{width:100%;max-width:100%;height:auto}
}
@media screen and (max-width:1440px){.heroBanner{height:auto}
}
@media screen and (max-width:1200px){.heroBanner{height:auto}
h1.heroBanner__heading{font-size:32px;line-height:40px}
h2.heroBanner__heading{font-size:28px;line-height:36px}
h3.heroBanner__heading{font-size:24px;line-height:32px}
h4.heroBanner__heading{font-size:20px;line-height:26px}
h5.heroBanner__heading{font-size:18px;line-height:24px}
h6.heroBanner__heading{font-size:18px;line-height:22px}
.heroBanner .breadcrumb-wrapper{margin-top:20px}
.heroBanner .breadcrumb-wrapper .cmp-breadcrumb__item,.heroBanner .breadcrumb-wrapper .cmp-breadcrumb__item-link{font-size:18px;line-height:24px}
}
@media screen and (max-width:768px){.heroBanner{height:auto}
h1.heroBanner__heading{font-size:26px;line-height:30px}
h2.heroBanner__heading{font-size:24px;line-height:28px}
h3.heroBanner__heading{font-size:18px;line-height:22px}
h4.heroBanner__heading{font-size:16px;line-height:21px}
h5.heroBanner__heading{font-size:16px;line-height:23px}
h6.heroBanner__heading{font-size:16px;line-height:20px}
.heroBanner .breadcrumb-wrapper .cmp-breadcrumb__item,.heroBanner .breadcrumb-wrapper .cmp-breadcrumb__item-link{font-size:16px;line-height:20px}
}
.transmission-hero-banner li{height:150px;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 20px}
.transmission-hero-banner li img{display:none}
.transmission-hero-banner li a{display:inline-block;color:#fff;font-weight:700;text-align:center;text-transform:capitalize;text-decoration:none;word-break:break-word;max-height:100%;overflow:hidden}
@media screen and (min-width:1440px){.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards>ul>li>a>span{font-size:20px;line-height:24px}
.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards>ul li a{height:100%}
.cmp-container-oncor__hero-cards .hero-cards>ul li{overflow:hidden}
}
@media screen and (min-width:768px){.transmission-hero-banner .hero-cards li span{font-size:20px;line-height:22px}
.cmp-container-oncor__hero-cards .hero-cards>ul li a{height:100%}
}
@media screen and (max-width:769px){.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards{all:unset;display:block;position:relative}
.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards ul{all:unset;list-style:none;padding:0;margin:0;position:absolute;top:calc(90%);z-index:99;width:100%;display:inline-block}
.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards ul li{all:unset;display:none;height:70px;background:linear-gradient(0,#fff,#fff),linear-gradient(359.79deg,rgba(0,61,121,0.3) .16%,rgba(0,61,121,0.1) 99.79%);box-shadow:0 12px 6px 0 #0000001A;align-items:center;justify-content:center;margin-bottom:10px;position:relative}
.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards ul a{all:unset;width:100%;display:flex;align-items:center;font-family:'Lato',sans-serif;font-weight:700;font-size:16px;line-height:20px;color:#003d79;text-transform:capitalize;padding-left:20px}
.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards ul span{all:unset;color:#003d79;white-space:nowrap;text-align:left}
.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards>li.active>a{color:var(--Dark-Blue,#003d79)}
.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards>li.active::after{content:'';position:absolute;right:41px;top:50%;transform:translateY(-50%);width:16px;height:16px;background:url('../../../../../../content/dam/oncorwww/images-refresh/faqs/icons/Arrow.svg') no-repeat center;background-size:contain;filter:brightness(0) invert(18%) sepia(76%) saturate(439%) hue-rotate(169deg) brightness(89%) contrast(91%);transition:transform .3s ease}
.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards.open>ul>li{display:flex}
.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards.open>li.active::after{transform:translateY(-50%) rotate(180deg)}
.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards.open>ul>li{background:#fff;box-shadow:none;margin-bottom:0;border-bottom:1px solid #d9d9d9;justify-content:flex-start;padding:0;height:60px;display:flex;box-sizing:border-box;width:90%;margin:0 auto}
.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards.open>ul>li:first-child{border-radius:10px 10px 0 0}
.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards.open>ul>li:last-child{border-radius:0 0 10px 10px}
.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards.open>ul>li.active:first-child{border-radius:10px 10px 0 0}
.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards.open>ul>li>a{padding:20px;justify-content:flex-start;line-height:24px;-webkit-tap-highlight-color:transparent}
.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards.open>ul>li span{white-space:normal;word-break:break-word;font-size:16px;font-weight:700;line-height:20px}
}
.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards>li.active{font-weight:700;font-style:normal;font-size:16px;line-height:20px;letter-spacing:0;color:#003d79;justify-content:flex-start}
.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards>li.active a{font-weight:700;font-style:normal;font-size:16px;line-height:20px;color:#003d79;padding-left:20px;display:flex;width:100%;text-align:left;padding-right:40px;align-items:flex-start}
.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards>li.active span{all:unset;color:#003d79;white-space:nowrap;text-align:left;white-space:normal;word-break:break-word}
@media screen and (max-width:768px){.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards li.active a{min-height:60px;transform:scaleY(1);height:60px;pointer-events:none}
.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards.open>li:not(.active)::after{transform:translateY(-50%) rotate(180deg)}
.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards>li:not(.active) a{border:1px solid #809ebc;min-height:60px;font-size:16px;line-height:20px;font-weight:700;width:100%;text-align:left;align-items:flex-start;height:60px;border-radius:10px;background:transparent;z-index:9;position:relative}
.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards>li:not(.active) a span{font-size:16px;width:100%;white-space:nowrap;font-weight:700}
.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards>li:not(.active)::after{content:'';position:absolute;right:41px;top:50%;transform:translateY(-50%);width:16px;height:16px;background:url('../../../../../../content/dam/oncorwww/images-refresh/faqs/icons/Arrow.svg') no-repeat center;background-size:contain;filter:brightness(0) invert(1);transition:transform .3s ease}
}
@media screen and (max-width:768px){.cmp-container-oncor__hero-cards.transmission-hero-banner nav.hero-cards li{height:90px;border-top-left-radius:0}
}
@media screen and (max-width:769px){.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards li.active{border-radius:0}
}
@media screen and (max-width:769px){.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards.open>ul>li.active{background-color:#f2f5f8;box-shadow:none}
.transmission-hero-banner .hero-cards li.active a{pointer-events:auto}
}
@media screen and (min-width:769px) and (max-width:1200px){.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;padding-bottom:0}
.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards>ul>li{flex:1 1;max-width:calc(30%);height:auto;min-height:120px}
.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards>ul>li a{font-size:16px;line-height:1.3;min-height:auto;max-height:unset;height:100%}
}
@media screen and (min-width:769px) and (max-width:1200px){.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards>ul>li>a{padding:10px 10px}
}
@media screen and (min-width:769px) and (max-width:1200px){.cmp-container-oncor__hero-cards.transmission-hero-banner .hero-cards>ul>li>a>span{font-size:14px;line-height:20px;height:auto}
}