/* =========================
   COCA CSS OVERRIDES
   FINAL STABLE VERSION
   ========================= */


/* -------------------------
   BRAND BASICS
   ------------------------- */
:root {
  --site-primary: #231717;
  --site-accent: #D81F27;
  --site-secondary: #97999B;
  --site-bg: #FFFFFF;
  --site-text: #231717;
  --site-border: #E5E5E5;
}

body {
  background: var(--site-bg);
  color: var(--site-text);
  font-family: Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--site-primary);
}

a {
  color: var(--site-accent);
}

a:hover {
  color: var(--site-primary);
}


/* =========================
   WIDER THEME (ALL TEMPLATES)
   ========================= */

#mLayout .container_12 {
  width: calc(100% - 40px) !important;
  max-width: 1500px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

#mLayout .s1_grid_12,
#mLayout .s2_grid_12,
#mLayout .s3_grid_12 {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  float: none !important;
}

#mLayout .WaPlaceHolder {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

#mLayout .WaPlaceHolder > div {
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}


/* =========================
   FULL-WIDTH HEADER BAR
   ========================= */

#idHeaderContentHolder {
  position: relative;
  z-index: 1;
  padding-top: 20px;
  padding-bottom: 20px;
}

#idHeaderContentHolder::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #000000;
  z-index: -1;
}

#idHeaderContentHolder,
#idHeaderContentHolder * {
  color: #FFFFFF;
}


/* =========================
   HEADER STRUCTURE SAFETY
   ========================= */

#idHeaderContentHolder table,
#idHeaderContentHolder tbody,
#idHeaderContentHolder tr {
  width: 100% !important;
  max-width: 100% !important;
}


/* =========================
   WHITE BREAK (THIS IS THE FIX)
   ========================= */

.WaGadgetMenuHorizontal {
  margin-top: 16px !important;
  border-top: 6px solid #FFFFFF !important;
  box-sizing: border-box !important;
}


/* =========================
   IMAGE CONTROL
   ========================= */

#idContentHolder img:not(.coca-video-logo) {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

.coca-video-logo {
  display: block !important;
  width: auto !important;
  object-fit: contain !important;
  margin: 0 !important;
}


/* =========================
   BUTTONS
   ========================= */

button,
input[type="submit"],
input[type="button"],
a.button,
a.styledButton,
.generalButton {
  background: var(--site-accent) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 600;
  padding: 10px 20px;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.button:hover,
a.styledButton:hover,
.generalButton:hover {
  background: var(--site-primary) !important;
  color: #FFFFFF !important;
}


/* =========================
   FOOTER FIX (MOBILE + DESKTOP)
   ========================= */

#idFooterContentHolder,
#idFooterContentHolder .WaPlaceHolder,
#idFooterContentHolder .WaPlaceHolder > div,
#idFooter,
.footerContainer,
#idFooterContentHolder table,
#idFooterContentHolder tbody,
#idFooterContentHolder tr,
#idFooterContentHolder td {
  background: #231717 !important;
  color: #FFFFFF !important;
  box-sizing: border-box !important;
}

#idFooterContentHolder a,
#idFooter a {
  color: #D81F27 !important;
}

#idFooterContentHolder::before,
#idFooter::before,
#idFooterContentHolder::after,
#idFooter::after {
  display: none !important;
  content: none !important;
}


/* =========================
   WIDGET SAFETY
   ========================= */

#idContentHolder iframe,
#idContentHolder object,
#idContentHolder embed,
#idContentHolder .WaGadget,
#idContentHolder .gadgetContainer {
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible !important;
}


/* =========================
   MOBILE SAFETY
   ========================= */

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

  #mLayout .container_12 {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
  }

  #mLayout .WaPlaceHolder > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

}
/* =========================
   MAKE WA LINK BOXES PILLS
   ========================= */

a.stylizedButton.buttonStyle001,
a.stylizedButton.buttonStyle002,
a.stylizedButton.buttonStyle003 {
  border-radius: 999px !important;
  overflow: hidden !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}
//* =========================
   SECONDARY MENU HOVER FIX
   FORCE RED, NO BLUE
   ========================= */

.WaGadgetMenuVertical ul li a,
.WaGadgetMenuVertical ul li .item > a,
.WaGadgetMenuVertical ul li a:link,
.WaGadgetMenuVertical ul li a:visited,
.WaGadgetMenuVertical ul li a:hover,
.WaGadgetMenuVertical ul li a:focus,
.WaGadgetMenuVertical ul li a:active,
.WaGadgetMenuVertical ul li.sel > a,
.WaGadgetMenuVertical ul li.sel > .item > a,
.WaGadgetMenuVertical ul li a span,
.WaGadgetMenuVertical ul li a:hover span,
.WaGadgetMenuVertical ul li a:focus span,
.WaGadgetMenuVertical ul li a:active span,
.WaGadgetMenuVertical ul li.sel > a span,
.WaGadgetMenuVertical ul li.sel > .item > a span {
  color: #D81F27 !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* kill theme blue on all child elements inside hovered secondary menu items */
.WaGadgetMenuVertical ul li:hover *,
.WaGadgetMenuVertical ul li.sel * {
  color: #D81F27 !important;
}

/* if the gadget is using the newer menu markup */
.WaGadgetMenuVertical .menuInner ul li a,
.WaGadgetMenuVertical .menuInner ul li a:hover,
.WaGadgetMenuVertical .menuInner ul li a:focus,
.WaGadgetMenuVertical .menuInner ul li.sel > a,
.WaGadgetMenuVertical .menuInner ul li.sel > .item > a,
.WaGadgetMenuVertical .menuInner ul li a span,
.WaGadgetMenuVertical .menuInner ul li a:hover span,
.WaGadgetMenuVertical .menuInner ul li.sel > a span {
  color: #D81F27 !important;
  background: transparent !important;
  background-color: transparent !important;
}