@charset "UTF-8";
/*=============================================================*/
/* BETAG North America — Header & Footer */
/* All rules scoped to .northamericaupdate */
/* Integrate safely alongside any existing site styles */
/* */
/* FONTS: Do NOT declare @font-face here. */
/* Instead, add this tag to your HTML : */
/* */
/* */
/* */
/* Loading Fonts.css directly from betagnorthamerica.com means */
/* fonts and their CSS share the same origin → no CORS block. */
/*=============================================================*/
/* ============================================================
TYPOGRAPHY (header / footer elements only)
============================================================ */
.northamericaupdate .headerOuterWrapper,
.northamericaupdate .nav,
.northamericaupdate .partnerLoginLink,
.northamericaupdate .convoStartLink,
.northamericaupdate #drivingTagline {
font-family: "helvetica_neue_lt_proitalic";
-webkit-text-stroke-width: 0 !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-synthesis: none;
}
.northamericaupdate #copyright,
.northamericaupdate .footerBaseMenu,
.northamericaupdate .footerMenu li {
font-family: "helvetica_neue_lt_std97BlkCn";
}
.northamericaupdate .footerlink,
.northamericaupdate .footerbaseLink,
.northamericaupdate .addressText {
font-family: "helvetica_neue_lt_std43LtEx";
}
/* Utility colour helpers (header/footer use) */
.northamericaupdate .yellowText {
color: rgba(255, 212, 7, 1);
}
.northamericaupdate .darkBlueText {
color: rgba(7, 123, 192, 1);
}
.northamericaupdate .lightBlueText {
color: rgba(33, 176, 230, 1);
}
.northamericaupdate .greyText {
color: rgba(135, 135, 135, 1);
}
/* Prevent base resets bleeding in */
.northamericaupdate a {
text-decoration: none;
}
/* ============================================================
HEADER
============================================================ */
.northamericaupdate .headerOuterWrapper {
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100px;
min-width: 320px;
background-color: #fff;
border-bottom: 1px solid #ffd500;
z-index: 10000;
box-sizing: border-box;
}
/* .northamericaupdate #globalLogo {
position: relative;
display: inline-block;
top: 20px;
float: left;
width: 330px;
height: 45px;
margin: 5px 0 0 45px;
z-index: 500;
} */
.northamericaupdate .partnerLoginWrapper {
display: inline-block;
position: relative;
margin: 15px 40px 0 0;
text-align: right;
float: right;
width: 280px;
}
.northamericaupdate .partnerLogin {
display: inline-block;
position: relative;
margin: 3px 20px 0 0;
text-align: right;
float: right;
}
.northamericaupdate #menuWrapper {
position: relative;
display: inline-block;
float: left;
margin: 45px 40px 0 60px;
width: 500px;
text-align: left;
}
.northamericaupdate #menu {
position: relative;
display: inline-block;
width: 1000px;
float: right;
z-index: 4000;
}
/* Ham menu wrapper hidden by default on wide screens */
.northamericaupdate #hamMenuInnerWrapper {
display: none;
}
/* "Start the Conversation" link */
.northamericaupdate .convoStartLink a:link {
font-size: 16px;
color: rgba(7, 123, 192, 1);
text-decoration: none;
cursor: default;
}
.northamericaupdate .convoStartLink a:visited {
text-decoration: none;
color: rgba(7, 123, 192, 1);
}
.northamericaupdate .convoStartLink a:hover {
color: rgba(33, 176, 230, 1);
text-decoration: none;
}
.northamericaupdate .convoStartLink a:active {
text-decoration: none;
color: rgba(7, 123, 192, 1);
}
/* ============================================================
DESKTOP NAV (.nav)
============================================================ */
.nav-wrap #access ul li a {
display: block;
color: rgba(7, 123, 192, 1);
text-decoration: none;
font-size: 18px;
font-family: "helvetica_neue_lt_std97BlkCn";
}
.nav-wrap #access ul ul li a {
height: auto;
font-size: 15px;
}
div#single-rq-modal {
z-index: 999999;
}
#access ul ul li.current-menu-item a {
color: #fff !important;
/* background: #292a35 !important; */
}
.northamericaupdate .nav {
padding: 0;
margin: 10px 0 0 0;
list-style: none;
height: 30px;
position: relative;
z-index: 5000;
}
.northamericaupdate .nav li.top {
float: left;
display: block;
}
.northamericaupdate .nav li a.topLinkFirst,
.northamericaupdate .nav li a.topLink,
.northamericaupdate .nav li a.topLinkLast {
display: block;
float: left;
height: 15px;
line-height: 15px;
color: rgba(7, 123, 192, 1);
text-decoration: none;
font-size: 18px;
font-family: "helvetica_neue_lt_std97BlkCn";
}
.northamericaupdate .nav li a.topLinkFirst {
padding: 0 17px 0 0;
}
.northamericaupdate .nav li a.topLink {
padding: 0 17px 0 7px;
}
.northamericaupdate .nav li a.topLinkLast {
padding: 0 0 0 7px;
}
.northamericaupdate .nav li a.topLink span.down {
float: left;
display: inline-block;
}
.northamericaupdate .nav li:hover a.topLink,
.northamericaupdate .nav li:hover a.topLinkFirst,
.northamericaupdate .nav li:hover a.topLinkLast {
color: #ffd407;
}
.northamericaupdate .nav li:hover {
position: relative;
z-index: 200;
}
/* Dropdown panels */
.northamericaupdate .nav li:hover ul.sub,
.northamericaupdate .nav li:hover ul.sub2 {
left: -5px;
top: 17px;
padding-top: 10px;
white-space: nowrap;
height: auto;
z-index: 300;
font-size: 16px;
background-color: #fff;
font-family: "helvetica_neue_lt_std97BlkCn";
}
.northamericaupdate .nav ul.sub2 li:hover ul.sub3 {
left: 290px;
top: 0;
white-space: nowrap;
height: auto;
z-index: 300;
font-size: 19px;
}
.northamericaupdate .nav li:hover ul.sub {
left: 0;
width: 280px;
}
.northamericaupdate .nav li:hover ul.sub2 {
left: 0;
width: 200px;
}
.northamericaupdate .nav li:hover ul.sub li,
.northamericaupdate .nav li:hover ul.sub2 li,
.northamericaupdate .nav li:hover ul.sub3 li {
display: block;
float: left;
height: 30px;
}
.northamericaupdate .nav li:hover ul.sub li,
.northamericaupdate .nav li:hover ul.sub3 li {
width: 280px;
}
.northamericaupdate .nav li:hover ul.sub2 li {
width: 280px;
}
.northamericaupdate .nav li:hover ul.sub li a,
.northamericaupdate .nav li:hover ul.sub2 li a,
.northamericaupdate .nav li:hover ul.sub3 li a {
display: block;
width: auto;
height: 18px;
line-height: 18px;
padding-top: 3px;
color: rgba(7, 123, 192, 1);
text-decoration: none;
text-indent: 5px;
font-family: "helvetica_neue_lt_std97BlkCn";
}
.northamericaupdate .nav li ul.sub li,
.northamericaupdate .nav li ul.sub2 li,
.northamericaupdate .nav li ul.sub3 li {
border-left: 2px solid #fed217;
background-color: #ffffff;
}
.northamericaupdate .nav li:hover ul.sub li a:hover,
.northamericaupdate .nav li:hover ul.sub2 li a:hover,
.northamericaupdate .nav li:hover ul.sub3 li a:hover {
color: #ffd407;
}
.northamericaupdate .nav li:hover li:hover ul {
left: 280px;
top: 0;
white-space: nowrap;
z-index: 400;
height: auto;
background-color: rgba(0, 0, 0, 0.5);
}
/* Hide sub-menus by default */
.northamericaupdate .nav ul {
position: absolute;
left: -9999px;
top: -9999px;
width: 0;
height: 0;
margin: 0;
list-style: none;
}
/* ============================================================
HAMBURGER MENU (#hamMenu)
============================================================ */
.northamericaupdate #hamMenuWrapper {
z-index: 150000;
}
.northamericaupdate #hamMenu ul,
.northamericaupdate #hamMenu ul li,
.northamericaupdate #hamMenu ul li a,
.northamericaupdate #hamMenu #head-mobile {
border: 0;
list-style: none;
line-height: 2;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.northamericaupdate #hamMenu {
width: 100%;
}
.northamericaupdate #hamMenu ul {
width: 100%;
display: none;
}
.northamericaupdate #hamMenu ul li {
width: 100%;
border-bottom: 1px solid #aaa;
}
.northamericaupdate #hamMenu>ul>li {
float: none;
background: #fff !important;
}
.northamericaupdate #hamMenu>ul>li>a {
padding: 12px 17px;
font-size: 20px;
letter-spacing: 1px;
text-decoration: none;
color: #077bc0;
font-weight: 400;
}
.northamericaupdate #hamMenu>ul>li:hover>a,
.northamericaupdate #hamMenu ul li.active a {
color: #fff;
}
.northamericaupdate #hamMenu>ul>li:hover,
.northamericaupdate #hamMenu ul li.active:hover,
.northamericaupdate #hamMenu ul li.active,
.northamericaupdate #hamMenu ul li.has-sub.active:hover {
background: #077bc0 !important;
-webkit-transition: background 0.3s ease;
transition: background 0.3s ease;
}
.northamericaupdate #hamMenu>ul>li.has-sub>a {
padding-right: 30px;
}
.northamericaupdate #hamMenu>ul>li.has-sub>a:after {
position: absolute;
top: 0;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #fff;
content: "";
}
.northamericaupdate #hamMenu>ul>li.has-sub>a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #fff;
content: "";
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.northamericaupdate #hamMenu>ul>li.has-sub:hover>a:before {
top: 23px;
height: 0;
}
.northamericaupdate #hamMenu li:hover>ul {
left: auto;
}
.northamericaupdate #hamMenu li:hover>ul>li {
height: 35px;
}
.northamericaupdate #hamMenu ul ul ul {
margin-left: 100%;
top: 0;
}
.northamericaupdate #hamMenu ul ul li,
.northamericaupdate #hamMenu li:hover>ul>li {
height: auto;
}
.northamericaupdate #hamMenu ul li a,
.northamericaupdate #hamMenu ul ul li a {
width: 100%;
border-bottom: 0;
}
.northamericaupdate #hamMenu ul ul li a {
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
padding: 11px 15px 11px 25px;
width: 170px;
font-size: 20px;
text-decoration: none;
color: #fff;
background: none;
font-weight: 400;
}
.northamericaupdate #hamMenu ul ul ul li a {
padding-left: 35px;
}
.northamericaupdate #hamMenu ul ul li:last-child>a,
.northamericaupdate #hamMenu ul ul li.last-item>a {
border-bottom: 0;
}
.northamericaupdate #hamMenu ul ul li:hover>a,
.northamericaupdate #hamMenu ul ul li a:hover,
.northamericaupdate #hamMenu ul ul li.active>a {
color: #fff;
}
.northamericaupdate #hamMenu ul ul li {
background: #1ab0e6 !important;
}
.northamericaupdate #hamMenu ul ul li:hover {
background: #aaa !important;
}
.northamericaupdate #hamMenu ul ul,
.northamericaupdate #hamMenu ul ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left;
}
.northamericaupdate #hamMenu ul ul li.has-sub>a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #fff;
content: "";
}
.northamericaupdate #hamMenu ul ul li.has-sub>a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #fff;
content: "";
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.northamericaupdate #hamMenu ul ul>li.has-sub:hover>a:before {
top: 17px;
height: 0;
}
.northamericaupdate #hamMenu ul ul li.has-sub:hover,
.northamericaupdate #hamMenu ul li.has-sub ul li.has-sub ul li:hover {
background: #aaa;
}
.northamericaupdate #hamMenu ul ul ul li.active a {
border-left: 1px solid #aaa;
}
.northamericaupdate #hamMenu>ul>li.has-sub>ul>li.active>a,
.northamericaupdate #hamMenu>ul ul>li.has-sub>ul>li.active>a {
border-top: 1px solid #fff;
}
/* Hide chevron pseudo-elements on mobile layout */
.northamericaupdate #hamMenu>ul>li.has-sub>a:after,
.northamericaupdate #hamMenu>ul>li.has-sub>a:before,
.northamericaupdate #hamMenu ul ul>li.has-sub>a:after,
.northamericaupdate #hamMenu ul ul>li.has-sub>a:before {
display: none;
}
.northamericaupdate #hamMenu #head-mobile {
display: block;
padding: 23px;
color: #fff;
font-size: 12px;
font-weight: 700;
}
/* Hamburger icon button
— selector uses #hamMenuInnerWrapper to beat any generic .button
rules on the host site (e.g. WooCommerce / Bootstrap etc.) */
.northamericaupdate #hamMenuInnerWrapper .button {
width: 55px;
height: 40px;
position: absolute;
right: 40px;
top: -50px;
cursor: pointer;
z-index: 12399994;
/* Hard-reset anything the host site might have put on .button */
background: none !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
box-shadow: none !important;
outline: none !important;
appearance: none !important;
-webkit-appearance: none !important;
}
.northamericaupdate #hamMenuInnerWrapper .button:after {
position: absolute;
right: 5px;
top: 10px;
display: block;
height: 9px;
width: 45px;
border-top: 4px solid #077bc0;
border-bottom: 4px solid #077bc0;
content: "";
background: none;
}
.northamericaupdate #hamMenuInnerWrapper .button:before {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
position: absolute;
right: 5px;
top: 36px;
display: block;
height: 4px;
width: 45px;
background: #077bc0;
content: "";
}
.northamericaupdate #hamMenuInnerWrapper .button.menu-opened:after {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
top: 25px;
border: 0;
height: 4px;
width: 38px;
background: #077bc0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.northamericaupdate #hamMenuInnerWrapper .button.menu-opened:before {
top: 25px;
background: #077bc0;
width: 38px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Submenu expand button (mobile) */
.northamericaupdate #hamMenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid #fff;
height: 64px;
width: 124px;
cursor: pointer;
}
.northamericaupdate #hamMenu .submenu-button.submenu-opened {
background: #077bc0;
}
.northamericaupdate #hamMenu ul ul .submenu-button {
height: 78px;
width: 124px;
}
.northamericaupdate #hamMenu .submenu-button:after {
position: absolute;
top: 32px;
right: 50px;
width: 28px;
height: 4px;
display: block;
background: #ffffff;
content: "";
}
.northamericaupdate #hamMenu ul ul .submenu-button:after {
top: 35px;
right: 13px;
}
.northamericaupdate #hamMenu .submenu-button.submenu-opened:after {
background: #fff;
}
.northamericaupdate #hamMenu .submenu-button:before {
position: absolute;
top: 20px;
right: 62px;
display: block;
width: 4px;
height: 28px;
background: #fff;
content: "";
}
.northamericaupdate #hamMenu ul ul .submenu-button:before {
top: 32px;
right: 16px;
}
.northamericaupdate #hamMenu .submenu-button.submenu-opened:before {
display: none;
}
.northamericaupdate #hamMenu ul ul ul li.active a {
border-left: none;
}
.northamericaupdate #hamMenu>ul>li.has-sub>ul>li.active>a,
.northamericaupdate #hamMenu>ul ul>li.has-sub>ul>li.active>a {
border-top: none;
}
/* ============================================================
SOCIAL MEDIA ICONS
============================================================ */
.northamericaupdate .socMedWrapper {
position: relative;
display: inline-block;
float: right;
clear: both;
height: auto;
width: 122px;
margin: 0 auto 15px;
}
.northamericaupdate .socMedIcon {
position: relative;
display: inline-block;
height: 25px;
width: 25px;
-webkit-box-sizing: content-box !important;
-moz-box-sizing: content-box !important;
box-sizing: content-box !important;
}
.northamericaupdate .socMedIcon img {
height: 25px;
width: 25px;
}
.northamericaupdate #fb {
float: left;
margin: 0 7px 0 0;
}
.northamericaupdate #insta {
float: left;
margin: 0 7px 0 0;
}
.northamericaupdate #linkedIn {
float: left;
margin: 0 7px 0 0;
}
.northamericaupdate #youTube {
float: right;
margin: 0 auto;
}
/* ============================================================
FOOTER
============================================================ */
.northamericaupdate #footerTopWrapper {
position: relative;
overflow-x: hidden;
height: 120px;
width: 100%;
margin: -60px auto 0;
background-image: url("https://store.betagnorthamerica.com/wp-content/themes/betag/na-assets/footerWaves.webp");
background-position: center center;
}
.northamericaupdate #drivingTagline {
position: relative;
display: block;
top: 10px;
float: left;
margin-right: 10%;
color: #fff;
font-size: 30px;
text-align: left;
}
.northamericaupdate #footer {
position: relative;
display: inline-block;
float: left;
clear: both;
margin: 0 auto;
padding: 0 0 40px 0;
width: 100%;
min-width: 320px;
min-height: 100px;
background-color: #077bc0;
z-index: 10000;
}
.northamericaupdate #footerCol1 {
width: 45%;
float: left;
text-align: left;
}
.northamericaupdate #footerCol2 {
width: 34%;
float: left;
}
.northamericaupdate #footerCol3 {
width: 20%;
float: right;
}
.northamericaupdate #footerCol1Inner {
margin: 30px 0 0 65px;
width: 100%;
float: left;
line-height: 30px;
}
.northamericaupdate #footerCol2Inner {
margin: 30px 0 0 35px;
width: 70%;
float: left;
}
.northamericaupdate #footerCol3Inner {
margin: 30px 35px 0 0;
width: 90%;
float: right;
}
/* ============================================================
FOOTER BASE
============================================================ */
.northamericaupdate #footerbase {
position: relative;
display: inline-block;
float: left;
clear: left;
margin: 0 auto;
padding: 10px 0;
width: 100%;
min-height: 150px;
min-width: 320px;
background-color: #077bc0;
border-top: 0.025em solid rgba(255, 212, 7, 1);
}
.northamericaupdate #footerbaseInner {
position: relative;
display: block;
margin: 10px auto;
width: 95%;
min-height: auto;
}
.northamericaupdate #footerbaseColLeft {
position: relative;
display: inline-block;
float: left;
width: 30%;
margin: 10px auto;
text-align: left;
color: #fff;
}
.northamericaupdate #footerbaseColMid {
position: relative;
display: inline-block;
width: 35%;
margin: 10px auto;
color: #fff;
}
.northamericaupdate #footerbaseColRight {
position: relative;
display: inline-block;
float: right;
width: 30%;
margin: 10px auto;
min-height: 20px;
text-align: right;
color: #fff;
}
.northamericaupdate .footerBaseMenu {
position: relative;
display: inline-block;
float: right;
text-align: right;
width: 100%;
margin-bottom: 5px;
}
.northamericaupdate #copyright {
clear: right;
color: #fff;
font-size: 12px;
font-weight: 200;
letter-spacing: 0.03em;
}
/* Footer typography links */
.northamericaupdate .addressText {
color: #fff;
font-size: 14px;
}
.northamericaupdate ul.footerMenu {
padding-bottom: 10px;
}
.northamericaupdate .footerMenu li {
font-size: 11px;
line-height: 19px;
list-style: none;
}
.northamericaupdate .footerMenu li a:link {
color: #fff;
text-decoration: none;
}
.northamericaupdate .footerMenu li a:visited {
color: #fff;
text-decoration: none;
}
.northamericaupdate .footerMenu li a:hover {
color: rgba(255, 212, 7, 1);
text-decoration: none;
}
.northamericaupdate .footerMenu li a:active {
color: #fff;
text-decoration: none;
}
.northamericaupdate .footerlink a:link {
font-size: 14px;
color: #fff;
text-decoration: none;
}
.northamericaupdate .footerlink a:visited {
color: #fff;
text-decoration: none;
}
.northamericaupdate .footerlink a:hover {
color: rgba(255, 212, 7, 1);
text-decoration: none;
}
.northamericaupdate .footerlink a:active {
color: #fff;
text-decoration: none;
}
.northamericaupdate .footerlinkBold a:link {
color: #fff;
text-decoration: none;
}
.northamericaupdate .footerlinkBold a:visited {
color: #fff;
text-decoration: none;
}
.northamericaupdate .footerlinkBold a:hover {
color: rgba(255, 212, 7, 1);
text-decoration: none;
}
.northamericaupdate .footerlinkBold a:active {
color: #fff;
text-decoration: none;
}
.northamericaupdate .footerbaseLink a:link {
font-size: 12px;
color: rgba(255, 212, 7, 1);
text-decoration: none;
}
.northamericaupdate .footerbaseLink a:visited {
color: rgba(255, 212, 7, 1);
text-decoration: none;
}
.northamericaupdate .footerbaseLink a:hover {
color: #fff;
text-decoration: none;
}
.northamericaupdate .footerbaseLink a:active {
color: rgba(255, 212, 7, 1);
text-decoration: none;
}
.northamericaupdate .nav-wrap ul li:hover a,
.northamericaupdate .nav-wrap ul li:hover a,
.northamericaupdate .nav-wrap ul li:hover a {
color: #ffd407;
}
#access li:hover>a,
#access a:focus {
color: #ffd407 !important;
/* border-bottom: 2px solid #102f52; */
}
#access li:hover>a,
#access a:focus {
color: #ffd407 !important;
/* border-bottom: 2px solid #102f52; */
}
.northamericaupdate .nav-wrap ul li:hover a,
.northamericaupdate .nav-wrap ul li:hover a,
.northamericaupdate .nav-wrap ul li:hover a {
color: #ffd407 !important;
}
section.banner-section {
margin-top: 79px;
}
/* ============================================================
RESPONSIVE / MEDIA QUERIES
============================================================ */
/* ── Wide desktop (≥ 1720px): desktop nav visible, hamburger hidden ── */
@media only screen and (min-width: 1720px) {
.northamericaupdate #hamMenuInnerWrapper {
display: none;
}
.northamericaupdate #menuWrapper {
display: inline-block;
}
}
@media screen and (min-width: 1720px) and (min-resolution: 192dpi) {
.northamericaupdate #hamMenuInnerWrapper {
display: none;
}
.northamericaupdate #menuWrapper {
display: inline-block;
}
}
/* ── Tablet / small desktop (< 1720px): hamburger on, desktop nav off ── */
@media only screen and (max-width: 1719px) {
.northamericaupdate #menuWrapper {
display: none;
}
.northamericaupdate #hamMenuInnerWrapper {
position: relative;
display: inline-block;
clear: both;
margin: 40px auto 0;
width: 100%;
z-index: 10000;
}
.northamericaupdate #convoButtonWrapper {
margin-right: 8px;
}
}
/* @media only screen and (max-width: 1109px) {
.northamericaupdate .main-menu {
margin: 31px 40px 0 60px;
}
} */
@media only screen and (max-width: 991px) {
.nav-wrap ul {
display: block;
padding: 0;
margin-right: -48px;
}
.slicknav_menu {
float: right;
z-index: 11;
position: relative;
width: 100%;
top: 5px;
right: -9px;
}
.slicknav_nav a:hover {
background: #00ade8 !important;
color: #6b6a6a !important;
}
}
/* ── Mobile (≤ 768px): tighten header elements ── */
@media only screen and (max-width: 768px) {
/* Scale down logo */
.northamericaupdate #globalLogo {
width: 180px;
height: 32px;
top: 15px;
margin-left: 15px;
}
/* CTA button: smaller text and padding */
.northamericaupdate #convoButtonWrapper {
display: none !important;
}
/* Pull hamburger button up into the smaller header */
.northamericaupdate #hamMenuInnerWrapper {
margin-top: 28px;
}
.northamericaupdate #hamMenuInnerWrapper .button {
top: -65px;
right: 47px;
}
/* Footer columns stack vertically */
.northamericaupdate #footerCol1,
.northamericaupdate #footerCol2,
.northamericaupdate #footerCol3 {
width: 100%;
float: none;
text-align: center;
}
.northamericaupdate #footerCol1Inner {
margin: 20px auto;
width: 90%;
float: none;
}
.northamericaupdate #footerCol2Inner {
margin: 10px auto;
width: 90%;
float: none;
}
.northamericaupdate #footerCol3Inner {
margin: 10px auto;
width: 90%;
float: none;
}
/* Footer base stacks */
.northamericaupdate #footerbaseColLeft,
.northamericaupdate #footerbaseColMid,
.northamericaupdate #footerbaseColRight {
width: 90%;
float: none;
display: block;
margin: 10px auto;
text-align: center;
}
.northamericaupdate .footerBaseMenu {
float: none;
text-align: center;
}
.northamericaupdate .socMedWrapper {
float: none;
margin: 0 auto 15px;
}
/* Driving tagline wraps */
.northamericaupdate #drivingTagline {
font-size: 20px;
float: none;
margin: 0 auto;
text-align: center;
}
}
/* ── Extra small (≤ 480px): hide CTA text, keep icon ── */
@media only screen and (max-width: 480px) {
.northamericaupdate #convoButtonWrapper {
margin-right: 11px;
padding: 5px 8px;
font-size: 7px;
top: 6px;
font-weight: 700;
}
.northamericaupdate .convoStartLink a:link {
font-size: 13px;
}
.northamericaupdate #globalLogo {
width: 140px;
height: 26px;
top: 18px;
margin-left: 10px;
}
}
/* */
span.convoStartLink {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.header-inn-all {
width: 96%;
margin: 0 auto;
}
aside.col-lg-3.col-md-3.col-6.logo-left-side {
display: flex;
justify-content: flex-start;
align-items: center;
}
aside.col-lg-3.col-md-3.col-6.logo-left-side img {
width: 330px;
height: 45px;
}
div#convoButtonInner {
font-size: 13px;
font-weight: 500;
display: flex;
align-items: center;
}
.menu-lang {
display: flex;
justify-content: flex-end;
}
div#convoButtonInner {
padding: 8px;
border: 1px solid rgba(7, 123, 192, 1);
border-radius: 3px;
margin: 8px 0;
}
aside.col-lg-3.col-md-3.col-6.logo-left-side {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
.main-menu {
height: 100px;
padding-bottom: 10px;
align-items: flex-end;
}
ul#primary-nav {
width: unset;
display: unset;
}
@media (max-width: 1024px) {
span.convoStartLink {
margin: 10px 0 !important;
}
.nav-wrap #access ul li a {
font-size: 15px;
}
div#convoButtonInner {
display: none !important;
}
div#access {
display: flex;
flex-direction: column;
align-items: flex-end !important;
}
.menu-lang {
display: flex;
justify-content: flex-end;
flex-direction: column-reverse;
}
aside.col-lg-3.col-md-3.col-6.logo-left-side {
display: flex;
justify-content: flex-start;
align-items: center;
height: 100px;
}
.slicknav_nav {
right: 40px !important;
width: 200px !important;
}
.main-menu {
height: unset !important;
}
}